乐趣区

关于程序员:23年你可能错过的-10个-前端新变化

jiezi

2023 年前端圈中迎来了很多新的变动，快来回顾一下吧

1. 可迭代对象 group by

应用 group by 很容易对可迭代对象进行分组，例如上面的数组示例数据

const arr = [{ name: "芦笋", type: "蔬菜", quantity: 5},
  {name: "香蕉", type: "水果", quantity: 0},
  {name: "山羊", type: "肉", quantity: 23},
  {name: "樱桃", type: "水果", quantity: 5},
  {name: "鱼", type: "肉", quantity: 22},
];

const cb = ({type}, index) => type;
const result = Object.groupBy(arr, cb);

Object.groupBy()”)”) 为可迭代对象中的每个元素调用一次提供的 callbackFn 函数。回调函数应返回一个字符串或 symbol（不属于这两种类型的值会被强制转换为字符串），用于批示元素所属的分组。callbackFn 的返回值会被用作 Map.groupBy() 返回的对象的键。每个键都有一个相关联的数组，其中蕴含回调函数返回雷同值的所有元素。

2. toSorted

Array 实例的 toSorted() 办法是 sort() 办法的复制办法版本。它返回一个新数组，其元素按升序排列。

const arr = [5, 3, 1, 4, 2]
const newArr = arr. toSorted((a, b) => a - b);

toSorted函数承受一个可选的 compareFn 函数参数，用于指定排序程序。如果省略，则将数组元素转换为字符串，而后依据每个字符的 Unicode 码位值进行排序。

3. dialog html 标签

2023 年 html 新增的 <dialog/> 标签让咱们在 html 中创立新弹窗元素更加语义化了。

<dialog id="d">
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

<button onclick="d.showModal()"> 关上弹窗 </button>

4. ios Web Push

在 ios 16.4 版本开始，增加了对 Web Push to Home Screen Web 应用程序的反对。Web Push 使 Web 开发人员能够通过应用 Push API、Notifications API 和 Service Workers 向用户发送推送告诉。

已增加到主屏幕的 Web 应用程序能够申请接管推送告诉的权限，只有该申请是响应间接用户交互（例如点击 Web 应用程序提供的“订阅”按钮）即可。而后，iOS 或 iPadOS 将提醒用户授予 Web 利用发送告诉的权限。一旦取得许可，用户就能够在“告诉设置”中治理每个 Web 应用程序的这些权限，就像 iPhone 和 iPad 上的任何其余应用程序一样。

来自网络应用程序的告诉的工作形式与来自其余应用程序的告诉完全相同。它们显示在锁定屏幕、告诉核心和配对的 Apple Watch 上

5. Nextjs App Router 利用路由器

Next.js App Router 引入了一种新模型，用于应用 React 的最新性能（例如服务器组件、Suspense 流式传输和服务器操作）构建应用程序。

2023 年在 Nextjs@13.4 版本阐明中，App Router 已处于 Stable 可用阶段了。

最大的变动就是咱们能够间接操作服务端数据了，例如

import kv from './kv';
 
export default function Page({params}) {async function increment() {
    'use server';
    await kv.incr(`post:id:${params.id}`);
  }
 
  return (<form action={increment}>
      <button type="submit">Like</button>
    </form>
  );
}

有没有 php 即视感

6. Nuxt Dev Tools

2023 年 10 月份 Nuxt Dev Tools 正式公布 v1.0 版本，通过Nuxt Dev Tools，可让您深刻理解 Nuxt 应用程序并进步其透明度。找出性能差距，无缝管理应用程序配置。

7. Svelte Runes

Svelte 5 引入了 runes，这是一组弱小的原语，用于管制 Svelte 组件内的反馈性，并且首次在 .svelte.js 和 .svelte.ts 模块内管制反馈性。

<script>
-    let count = 0;
+    let count = $state(0);

    function increment() {count += 1;}
</script>

<button on:click={increment}>
    clicks: {count}
</button>

感觉越来越像 react 了

Runes 还有以下成员

  • $state
  • $state.frozen
  • $derived
  • $derived.by
  • $effect
  • $effect.pre
  • $effect.active
  • $effect.root
  • $props
  • $inspect

8. Angular 17

Angular 17 带来的新的个性，次要变更有

优化内置控制流

Angular官网开发团队发现 许多开发人员都在 *ngIf、*ngSwitch 和 *ngFor 方面遇到困难，因而在新版本中，Angular 中应用新的语法实现，例如

*ngIf 优化版

@if (loggedIn) {The user is logged in} @else {The user is not logged in}

*ngSwitch 优化版

@switch (accessLevel) {@case ('admin') { }
  @case ('moderator') { }
  @default {}}

*ngFor 优化版

@for (user of users; track user.id) {{{ user.name}}
} @empty {Empty list of users}

引入 Signals

Angular Signals 实现已通过开发者预览版，到往年 5 月，在 Angular v18 中，咱们将提供许多性能来进一步改善开发人员应用 Signals 的体验。

const count = signal(0);

// Signals are getter functions - calling them reads their value.
console.log('The count is:' + count());

Deferrable Views

Angular 17的可提早视图将性能和开发人员体验晋升到了一个新的程度，因为它们通过前所未有的人体工程学实现了申明性和弱小的提早加载。

@defer (on viewport) {<comment-list/>} @loading {Loading…} @error {Loading failed :(} @placeholder {<img src="comments-placeholder.png">}

9. Nodejs

Permissions

nodejs@21 版本中引入了 Permissions 模型, 让开发者在程序执行期间限度对特定资源的拜访，例如文件系统操作、子过程生成和 worker 线程创立。权限分为 Module-based permissions 基于模块的权限 和 Process-based permissions 基于过程的权限

内置 WebSocket 客户端

10 月 17 日公布的 Node.js 21 装备了一个实验性的、与浏览器兼容的 WebSocket 实现，通过 --experimental-websocket 标记启用。WebSocket 反对浏览器和服务器之间的双向通信，无需轮询服务器以取得回答。

const sock = new WebSocket ("ws: //someurl");

10. Bun JS 运行时

Zig 编写的新 JavaScript 运行时 Bun，带来了杰出的开发人员体验和一些狂野的货色，对于性能的申明以及在首次公布后发现了相当多的谬误，但它依然是将来解决后端 JavaScript 的一种有前途的新办法

退出移动版