微信小程序组件框架升级：glass-easel 带来更多特性及更优性能

IT之家 8 月 15 日消息，微信开发者本周（8 月 12 日）宣布，微信小程序新一代框架组件 glass-easel 已经可以自由使用，该框架具备更多特性和更优性能，适合用来编写、维护复杂的小程序。

glass-easel 是新版微信小程序组件框架的核心实现。它本质上是一个用于组件化、定义式的界面开发的 JavaScript 组件化界面框架。


glass-easel 内核可以独立运行在 web 环境下。除了组件框架，glass-easel 还配备了一组附件，包括代码编辑器插件、开发者工具扩展、国际化扩展等。同时，该框架还是旧版组件 exparser 的升级，保持兼容性的同时新增了各大特性和性能改进。

从小程序基础库版本 3.8.12 开始，glass-easel 组件框架支持 WebView 渲染引擎，目前覆盖约 98% 的微信用户。

### glass-easel 新特性

IT之家附 glass-easel 新特性如下：

#### Component 构造器的 Chaining 形式

Component 构造器新增了一种 Chaining 形式的写法，如下所示：

```javascript
export default Component()
.data(() => ({
foo: 'bar',
}))
.init(function ({ data, setData, lifetime }) {
lifetime('attached', () => {
console.log('attached')
})
})
.register()
```

Chaining 形式更适合组织复杂的组件逻辑，对 TypeScript 的支持也更好。它拥有一个 init (...) 实例初始化函数，形成一个闭包，可以在这个闭包内自由定义（专属于当前实例的）局部变量，非常适合复杂组件开发。

此外，glass-easel 还提供了动态 slot、trait behaviors 等新特性，方便复杂组件的开发。

#### 新 WXML 编译器

glass-easel 组件框架还附带了新的 WXML 编译器，支持新的实用语法。`let:` 语法可以轻松定义局部变量，`class:` 语法则可以更清晰地为节点添加和移除样式类。

```html
<block let:field="{{ my.complex.data.field }}">
<view>{{ field.title }}</view>
<view>{{ field.description }}</view>
</block>

<view
class:button
class:button-enabled="{{ buttonEnabled }}"
/>
```

新的 WXML 编译器的编译速度更快，生成的运行时代码也更高效，WXML 生成的代码执行速度可提升约 20%。

#### glass-easel 运行时性能优化

glass-easel 组件框架的运行时性能进行了重大改进。它采用了新的更新算法，大幅降低了在某些情况下的更新开销。现在 glass-easel 综合使用基于虚拟树和非虚拟树的更新算法，以适应不同场景。在列表更新算法方面，新的算法在某些场合下可提升执行速度数倍。

此外，glass-easel 还提供了高级数据更新方法、数据字段拷贝控制、组件初始化策略等新特性，帮助实现更极致的性能优化。

微信官方建议用户将开发者工具升级至 nightly 版本，以获得更好的开发体验。使用 TypeScript 开发时，建议将 miniprogram-api-typings 升级到最新版本（5.2.3）。

### 参考

[小程序组件框架升级：glass-easel 带来更多特性及更优性能](https://mp.weixin.qq.com/s/CvST9Lg0INTCGlA0dMyk3Q)

---

原文链接：[点击查看](https://www.ithome.com/0/990/155.htm)