Intact是一个充分利用继承思想开发前端页面的框架,秉承了数据驱动来简单高效地更新界面的同时,又充分利用组合和继承来实现代码的复用。 Intact将组件分为两类:可复用组件和不可复用组件。可复用组件很好理解,它是构成页面的基本元素。但是对于页面级组件,它一般是不可复用的。实际开发中,各个页面之前又存在相似性。此时如果将页面间通用逻辑和视图提炼成组件然后供子页面继承,便可以最大限度地复用代码。同时派生出的子组件拥有整个页面逻辑和视图的控制权,可以摆脱由组合方式实现页面而不得不进行繁琐的组件间通信的问题。 v2.0相比于v1.0做了以下改进:
示例: 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: '<t:parent>\
<b:body>\
{parent()}\
<button class="button"\
ev-click={self.add.bind(self)}\
>Click me!</button>\
</b:body>\
</t:parent>',
add: function() {
this.set('count', this.get('count') + 1);
}
});
Intact.mount(Page, document.getElementById('app')); |