可继承的前端开发框架 Intact v2.0 发布 - 开源中国社区
可继承的前端开发框架 Intact v2.0 发布
JaveyZ 2017年09月06日

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

JaveyZ JaveyZ 发布于2017年09月06日 收藏 28

腾讯云 十分钟定制你的第一个小程序>>>  

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 发布
分享
评论(3)
精彩评论
4
利用继承组件的思想,是当前流行框架所不具备的,值得学习下,ps(动画很赞,流程,连贯,看来作者花了很大功夫的):+1:
最新评论
0

引用来自“今天星期一”的评论

不丑
例子中将模板字符串写入组件可能显得有点混乱,借助webpack可以将它们分离
0
不丑
4
利用继承组件的思想,是当前流行框架所不具备的,值得学习下,ps(动画很赞,流程,连贯,看来作者花了很大功夫的):+1:
顶部