前端技术双周刊 2023 |
您所在的位置：网站首页 › 抖音前端框架 › 前端技术双周刊 2023 |
前端技术双周刊 2023
|
项目地址：olivewind/weekly 微信公众号：依赖注入 发布时间：2023.05.07 本周内容：资讯x4、开源x5、文章x2 行业资讯 Qwik 1.0 正式发布Qwik 是一个有里程碑意义的前端框架，无论应用程序有多大，Qwik 都能够快速地构建，在多数情况下，Qwik 会先下载 1KB 的 JavaScript，在需要的时候才会懒加载或预处理程序和应用程序代码。 虽然才发布 1.0 版本，但该项目在 Github 上已经有超过 16k star，提出的 Resumable 对传统前端框架有根本上的颠覆，非常值得 Web 开发者关注。值得一提的是该框架作者 Misko Hevery 也是 Angular&Angular.js 的作者。 import { component$ } from '@builder.io/qwik'; import { routeLoader$ } from '@builder.io/qwik-city'; export const useDadJoke = routeLoader$(async () => { const response = await fetch('https://icanhazdadjoke.com/', { headers: { Accept: 'application/json' }, }); return (await response.json()) as { id: string; status: number; joke: string; }; }); export default component$(() => { // Calling our `useDadJoke` hook, will return a reactive signal to the loaded data. const dadJokeSignal = useDadJoke(); return ( {dadJokeSignal.value.joke} ); }); 复制代码如果你对相关理念还不太熟悉，我推荐你阅读 Qwik-前端性能的终极方案？。 Angular 16 正式发布这是 Angular 自发布以来最大的一次变更，其首次引入 Signals 试图带来全新但更简单的心智模型，同时这也意味着基于 Zone.js 的响应式将成为历史。同时该版本也允许启用 Vite 和 esbuild，可以将构建速度提升 72%。 可以明显感受到 Angular 团队正在积极整合主流工具和范式，非常期待 Angular 可以早日重回巅峰。 @Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 复制代码Signals 也可以和 RxJS 搭配使用 import { toObservable, signal } from '@angular/core/rxjs-interop'; @Component({...}) export class App { // signals -> observable count = signal(0); count$ = toObservable(this.count); // observable -> signals dataService = inject(DataService); data = toSignal(this.dataService.data$, []); ngOnInit() { this.count$.subscribe(() => ...); } } 复制代码 Node.js 20 正式发布该版本最重要的更新是增加了权限控制，这是一个非常关键的特性，有助于解决此前被人诟病的安全性问题，不过该特性目前还处于试验性阶段，需要使用 --experimental-permission 显式开启。 node --experimental-permission --allow-fs-read=* --allow-fs-write=* index.js node --experimental-permission --allow-fs-write=/tmp/ --allow-fs-read=/home/index.js index.js node --experimental-permission --allow-fs-read=/home/test* index.js 复制代码启用权限控制后，process 上的 permission 对象可用于检查运行时权限。 process.permission.has('fs.write'); // true process.permission.has('fs.write', '/home/nodejs/protected-folder'); // true 复制代码 Vite 4.3 正式发布该版本带来了全面的性能提升，没啥好说的，就是更快 ⚡️。 一个五彩纸屑枪工具库，可以给你的网站增加一点活力。 一个刚开源不久的 Headless UI 组件库，其最大优势是组件丰富且同时支持 Vue、React、Solid 三大框架。 一个框架无关的 input 输入代理工具，基于此可以轻松一个 input 变体组件，类似常见的 InputNumber。 const numberMask = IMask(document.getElementById('number-mask'), { mask: Number, min: -10000, max: 10000, thousandsSeparator: ' ' }); 复制代码一个可以基于 Buffer、Uint8Array、ArrayBuffer 来检测文件类型的 Node.js 工具库。 import fs from 'node:fs'; import { fileTypeFromFile, fileTypeFromStream } from 'file-type'; console.log(await fileTypeFromFile('Unicorn.png')); //=> {ext: 'png', mime: 'image/png'} console.log(await fileTypeFromStream(fs.createReadStream('Unicorn.mp4'))); //=> {ext: 'mp4', mime: 'video/mp4'} 复制代码 pinojs/pino（11.4k star）一个开销非常低的 Node.js 日志工具，用法也非常简单。 const logger = require('pino')() logger.info('hello world') const child = logger.child({ a: 'property' }) child.info('hello child!') 复制代码输出 {"level":30,"time":1531171074631,"msg":"hello world","pid":657,"hostname":"Davids-MBP-3.fritz.box"} {"level":30,"time":1531171082399,"msg":"hello child!","pid":657,"hostname":"Davids-MBP-3.fritz.box","a":"property"} 复制代码 优质文章 ECMAScript 2023 有哪些新东西？（英文）该文章列举了已经进入 Stage4 并有望包含在即将发布的 ECMAScript 版本中的新功能，主要包括： 增加 findLast 和 findLastIndex 支持从后查找数组的 const isEven = (number) => number % 2 === 0; const numbers = [1, 2, 3, 4]; // from first to the last lookup console.log(numbers.find(isEven)); // 2 console.log(numbers.findIndex(isEven)); // 1 // from last to the first lookup console.log(numbers.findLast(isEven)); // 4 console.log(numbers.findLastIndex(isEven)); // 3 复制代码 增加 Hashbang 语法，支持在可执行脚本开头定义解释器 #!/usr/bin/env node console.log('hi 👋'); 复制代码 支持使用 Symbol 作为 WeakMap 的 key const weak = new WeakMap(); const key = Symbol("ref"); weak.set(key, "ECMAScript 2023"); console.log(weak.get(key)); 复制代码 增加 toReversed、toSorted、toSpliced，区别是不会修改原数组 const original = [1, 2, 3, 4]; const reversed = original.toReversed(); console.log(original); // [ 1, 2, 3, 4 ] console.log(reversed); // [ 4, 3, 2, 1 ] 复制代码 Tech Lead 之路这是一本旨在帮助程序员成为优秀的 Tech Lead 的电子书，由 Thoughtworks 编写，通俗易懂，干货满满，值得阅读。 |
【本文地址】
今日新闻 |
推荐新闻 |