发布于 2015-09-06 14:57:21 | 798 次阅读 | 评论: 0 | 来源: 网络整理
Regularjs是基于动态模板实现的用于构建数据驱动型组件的新一代类库
关于前端的模板技术, 我在前端乱炖有一篇反响还算不错的综合性文章——一个对前端模板技术的全面总结, 总体来讲动态模板引擎是一种介于常规字符串模板(jade, ejs)和Dom模板(angulrjs, vuejs)之间的模板技术, 它保证了regularjs的:
一个regularjs组件的模板写法类似这样
<div class="m-notify m-notify-{position}">
{#list messages as msg}
<div class="notify notify-{msg.type||'info'}" >
<div class="glyphicon glyphicon-{iconMap[msg.type]}"></div>
<span class="notify_close" on-click={this.clear(msg)}>×</span>
{#if needTitle}
<h4 class="notify_title">{msg.title}</h4>
{/if}
<p class="notify_message">{msg.message}</p>
</div>
{/list}
</div>
非常接近于我们使用字符串模板的体验. 但是不同的时, 它编译生成的不是字符串而是Living dom, 使得view是会随着数据变化的, 相信你也看到了模板中有类似on-click
的属性, 因为其实compile结束之后, regularjs与angularjs产生的Living Dom已经没有本质区别,由于也是基于脏检查的设定, 事实上后续使用会非常接近angularjs.
- 强制数据模型抽象是因
- 数据驱动的开发模式是果
数据驱动即强制将你的业务逻辑抽象为数据(状态)的变化, 这样原本琐碎的前端开发会更加贴近与编程本质(算法 + 数据结构), 带来的开发体验上的进步事实上早已被angularjs或更骨灰的knockout框架所验证.
当然数据驱动的开发模式同时也带来一些不便, 比如:
数据模型抽象的方式有很多种, 但是目前不外乎以下几种:
对于这个点, 本来也有一篇长文正在撰写, 但是这篇2015前端框架何去何从差不多说出了我的心声, 推荐大家阅读.
随着angularjs等框架的大行其道, bootstrap等ui框架也提供了很多标签上直接可配的使用方式. 大部分的人脑中对组件化的理解似乎开始停留在了【标签化】这个层级上, 事实上组件的定义从来不曾改变过:
在前端开发领域, 组件应该是一种独立的、可复用的交互元素的封装
而在基于特定框架/类库之下, 组件会被强加一种特定的构建方式. 就如:
一个典型的例子就是regularjs中组件的两种使用方式:
js中实例化
var pager = new Pager({
data: {
current: 1,
total: 10
}
})
模板中实例化
<pager current=1 total=100></pager>
它们带来的结果是一致的, 我们可以看到标签化只是组件的一种使用方式, 或是一种在模板中的接口形式, 关键是组件内部的业务(领域)模型, 并且由于数据驱动的特性, 在mvvm模式下, 并不是所有可复用的交互元素都适合封装成组件. 关于这点@民工精髓的这篇文章差不多说到了点子上.
组件与事件系统没有直接关系, 但是一般而言,一个功能良好的组件会通过抛出事件来与外部系统进行沟通.
这里,是一个比较典型的基于regularjs构建的Tabs组件.
<Tabs ref="tabs">
<TabPane title="<strong>Inbox</strong> <span class='badge'>{user.unread_messages_count}</span>" on-active={user.unread_messages_count+=2} >
Your username is: <strong>{user.username}</strong>
<input r-model={user.username} >
</TabPane>
{#list todos as item}
<TabPane title="Tab {item_index+1} " >
Content of the first tab + {item} + {user.username}
</TabPane>
{/list}
</Tabs>
<hr>
<div>
<button on-click={this.$refs.tabs.selectTab(0)}>Select first tab</button>
<button on-click={this.$refs.tabs.selectTab(1)}>Select second tab</button>
<button on-click={this.$refs.tabs.selectTab(2)}>Select third tab</button>
</div>
大家可以与其他比如angularjs或react做下对比.
类库代表regularjs具有100%的独立性.
相对精简的内核是regularjs成为一个能屈能伸的, 并对其他框架或类库友好的关键所在.
现在声称的下一代(Next-generation)框架越来越多了, 但是本质永远不会变(从根本和可能性讨论问题, 程序员之间的扯皮其实是可以避免的 :) , 即
下一代框架应该顺序前端开发的趋势和潮流
我们目前就可以看得到得趋势有:
在这些部分, regularjs有些完成了一些工作, 而有些还正在进行(但是已经确保可能性).
在实际使用中, 你会发现, regularjs就如我发布初期的slogan:
regularjs = reactjs(ractivejs) + angularjs
在regularjs仅仅50kb的身材之下, 你能看到一些react, angularjs以及ractive的影子, 后来者往往有社区上的劣势, 但换句话说它没有任何历史包袱, 在设计中去糟存精使得regularjs更加易用. 当然它绝对不是特性整合这么简单, 它同时也提供了独一无二的特性来帮助我们实现卓有成效的组件级开发.
我们先简单看下regularjs的特性支持:
哦, 对了, 目前regularjs仍然支持IE6
这是一个令人羞愧的设定, 与作者所在的环境也有直接关系, 但是对于那些可能也需要支持IE6的朋友们, regularjs可能是一个比较安全的选择.
regularjs未来会拉出一个支持度接近vuejs的版本, 但是特性不会发生改变, 大家可以放心使用。 regularjs目前已经在大大小小多个线上产品中使用了, 也收集了一些有效的建议.
好了, 该看下一个最简单的regularjs组件长什么样吧..