可继承的前端开发框架 Intact v2.0 发布

内容简介：Intact是一个充分利用继承思想开发前端页面的框架，秉承了数据驱动来简单高效地更新界面的同时，又充分利用组合和继承来实现代码的复用。 Intact将组件分为两类：可复用组件和不可复用组件。可复用组件很好理解，...

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: '<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'));

【声明】文章转载自：开源中国社区 [http://www.oschina.net]

以上所述就是小编给大家介绍的《可继承的前端开发框架 Intact v2.0 发布》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 前端基本功(七)：javascript中的继承（原型、原型链、继承的实现方式）
• 前端培训-初级阶段（13） - 类、模块、继承
• 【前端词典】继承（一） - 面试官问的你都会吗？
• 前端进击的巨人（七）：走进面向对象，原型与原型链，继承方式
• JS高级讲解面向对象，原型，继承，闭包，正则表达式，让你彻底爱上前端（进阶二）
• 028.Python面向对象继承（单继承，多继承，super，菱形继承）

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。