新闻 可继承的前端开发框架 Intact v2.0 发布 下载

Intact是一个充分利用继承思想开发前端页面的框架，秉承了数据驱动来简单高效地更新界面的同时，又充分利用组合和继承来实现代码的复用。

Intact将组件分为两类：可复用组件和不可复用组件。可复用组件很好理解，它是构成页面的基本元素。但是对于页面级组件，它一般是不可复用的。实际开发中，各个页面之前又存在相似性。此时如果将页面间通用逻辑和视图提炼成组件然后供子页面继承，便可以最大限度地复用代码。同时派生出的子组件拥有整个页面逻辑和视图的控制权，可以摆脱由组合方式实现页面而不得不进行繁琐的组件间通信的问题。

参考官方文档，以及Vdt.js文档

v2.0相比于v1.0做了以下改进：

1. 
   底层virtual dom库fork自最快的虚拟DOM库之一（inferno）进行重写，大大提高了渲染效率
   
   
2. 
   更完善的组件生命周期，新增_mount挂载后这一关键生命周期
   
   
3. 
   更丰富的指令，新增v-model，v-raw等指令
   
   
4. 
   派生组件中的模板，可以直接通过parent引用到父类组件的模板
   
   
5. 
   借鉴Vue的动画设计思想，重写了Animate组件用于实现复杂的动画，并且在动画连贯性上做了许多改进
   
   
6. 
   新增组件渲染成字符串（toString）和混合（hydrate）接口，用于实现前后端同构
   
   
7. 
   更充分的兼容性测试，最低支持到IE8
   
   
8. 
   其他大量细节修改和Bug修复
   

示例：

var Layout = Intact.extend({
template: '<div>\
<header>\
<b:header>Extendable and Reactive Component</b:header>\
</header>\
<div>\
<b:body>\
<div class="count">{self.get("count")}</div>\
</b:body>\
</div>\
</div>',
defaults: function() {
return {count: 0};
}
});

var Page = Layout.extend({
template: '<tarent>\
<b:body>\
{parent()}\
<button class="button"\
ev-click={self.add.bind(self)}\
>Click me!</button>\
</b:body>\
</tarent>',
add: function() {
this.set('count', this.get('count') + 1);
}
});

Intact.mount(Page, document.getElementById('app'));
可继承的前端开发框架 Intact v2.0 发布下载地址