mvvm模式构建组件库 RegularJS

mvvm模式构建组件库 RegularJS

MIT
JavaScript
跨平台
网易
2014-09-04
第三方支付接口

看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果

Angularjs的火爆以及它的小伙伴们

Angularjs从12年开始开始火爆起来, 数据驱动的业务实现方式也由此深入人心, 它的数据更新策略基于脏检查,在明确内部的生命周期后在数据绑定的使用上是最为灵活的(即这种方式不介意是何种方式促使数据改变,而只关心数据改变的结果),作者本人以及周围的小伙伴也开始为之着迷. 随着使用的深入, 发现angularjs的强大特性也引出了一些无法攻克的不足:

  1. 由于本身生命周期的强约束,难以与其它框架公用

  2. 入门容易,深入难 —— 想想directive一个feature就涉及到的 postlink prelink controller compile scope等等概念.

  3. 模板的逻辑实现依赖的是directive(ng-repeat, ng-if etc..),即最小逻辑颗粒是节点, 与常规的模板自由度上还是有较大差异.

  4. FOUC(Flash of unstyled content), 因为angular是先通过浏览器(innerHTML)生成了dom,再后置link来产生真正需要的元素,所以会导致内容闪动.regular也没有完美的解决问题(因为内容仍然是前端render的),但是可以保证进入文档的节点就是预期的节点

除此之外,Angularjs的核心是scope对象, 业务的实现大部分都是在scope上动态添加函数或属性. 也有人提出整个controller的写法缺乏约束性,这个时候angular-classy出现, 它将原本因挂载在scope上的业务逻辑转移到构造函数原型的形式, 减少了灵活度,但是更有约束性, 这也给了regular很大灵感.

在angular大行其道的时期也激励产生了很多框架,比如vue.jsavalon.jsreactive等等优秀的框架,它们解决了一些问题, 比如avalon.js利用defineProperty实现了数据get-set的代理 并利用VB实现了ie6的兼容(当然数组还是wrap), 但总体来讲基于dom实现的新秀们还是缺少足够的差异化(代码量的减少并不是最核心的部分)

新思维的出现——react ractive

与此同时,react的出现让这个百花齐放但缺少差异化的阶段注入了一些不一样的味道,它可以实现了另一种内建的生命周期(lifecycle), 在不依赖数据层面的脏检查的同时,建立了ui与数据之间的连接. 它将diff职责放到了一个dom结构的抽象virtual dom上,通过脏检查两次render之间virtual-dom发生的变化来更新ui.不过如果移除了jsx的依赖,手动通过嵌套函数的方式创建virtual-dom(如下例)简直不可忍,并且它的组件展现中的逻辑控制完全依赖与js的语言能力, 往往不像利用模板构建那么清晰(当然react的作者有它自己的说法,仁者见仁了)。

render: function() { return (
    React.DOM.div(null, 
      React.DOM.h3(null, "TODO"),
      TodoList( {items:this.state.items} ),
      React.DOM.form( {onSubmit:this.handleSubmit}, 
        React.DOM.input( {onChange:this.onChange, value:this.state.text} ),
        React.DOM.button(null, 'Add #' + (this.state.items.length + 1))
      )
    )
  );
}

同期ractive也悄然出世, 几乎就是作者需要的那个菜了. 可惜ractive的ui事件系统是通过代理事件的形式,你仍需要在init里去处理,这样一是弱化了声明式的意味,二是必然要杂糅进dom操作. 并且数据更新上是采用的提取依赖关系的方式并提供set函数, 这种方式对于习惯了angular的脏检查的人来讲无疑会带来很多不利。

由于react在使用上逻辑上可以几乎理解为'full-refresh'对使用者有巨大的吸引力,最初版本的regular也是旨在替换掉react的js+jsx而是与ractive一样定义一种模板语言来描述结构, 在diff策略上沿用virtual-dom的思想.在实现的过程渐渐发现,虽然基于virtual-dom的策略无需去绑定大量的watcher, 但仍然引入了一些实现上和使用上的难题

  1. 一次digest中virtual-dom的diff只需一次,但是会随着ui的复杂度,性能损耗严重,virtual-dom与原dom的对应也更难(如果angular的脏检查的性能取决与watcher的数量,那react则是取决与ui规模)

  2. virtual-dom的内部结构变化是不可预知的

    比如

    var MyComponent = React.createClass({
     render: function() { if (this.props.first) { return <div className="first"><span>A Span</span></div>; } else { return <div className="second"><p>A Paragraph</p></div>; }
     }
    });

    在props.first发生改变时, 发生的其实仅仅只是同一个节点的className在first和second的切换. 由于这种未知性,永远无法在react中出现类似directive的节点增强或包装器,所有事件也必须以数据代理的形式

regular的产生和取舍

regular正是在这种百花齐放的时候产生, 最终在实现上采取了angular的数据更新策略(但是提取了表达式的依赖关系以便在Object.observe正式到来时切换到脏检查+observe的形式)提倡极致的声明式和裸数据操作, 依赖于基于字符串的模板描述结构结合更规范性的类式继承的组件体系来定义数据层的业务逻辑.

这也是框架取名 regular = react(ractive) + angular的由来
的码云指数为
超过 的项目
加载中

评论(9)

l
linbojue999
http://sourceforge.net/p/kunmingkfp http://sourceforge.net/p/xiankfp http://sourceforge.net/p/chengdukfp http://sourceforge.net/p/guangzhoukfp http://sourceforge.net/p/shenzhenkfp http://sourceforge.net/p/dongguankfp https://sourceforge.net/projects/chengdukfp/ https://sourceforge.net/projects/xiankfp/ https://sourceforge.net/projects/kunmingkfp/ https://sourceforge.net/projects/guangzhoukfp/ https://sourceforge.net/projects/shenzhenkfp/ https://sourceforge.net/projects/dongguankfp/
IdleMan
IdleMan
#React# #Vue.js# #RegularJS# #jQuery# 前端怎么选?
MartinBockZhu
MartinBockZhu
空腔
空腔
其实比较下来,还是Riot实现了这个框架本来的意图,虽然只适合零依赖的单个库。。 #RegularJS#
第三方支付接口
第三方支付接口
每日一荐 RegularJS
哭你吃完
哭你吃完
jquery 打天下的飘过,对各种框架无爱啊 RegularJS
逍遥huang
逍遥huang
框架在退化程序猿,就像民工一样 RegularJS
dfar2008
dfar2008
框架是越来越多啊 RegularJS
朱__朱
朱__朱
车轮越来越多,程序员越来越累。 RegularJS

RegularJS v0.5.2 发布,MVVM 模式构建

RegularJS v0.5.2 发布了。 主要更新内容: 对流程无关的性能优化 减少_.typeOf使用 标记没有side effects的watcher 增加$watch接口的stable参数 复用一些不变得参数型对象 减少_.exend的使用...

2016/09/27 07:38

RegularJS 0.5.0 发布,MVVM 模式构建

RegularJS 0.5.0 发布了,主要更新如下: 指令参数 [bug fixed]当一个component use了两个都包含events的mixin时,前一个mixin的events会被覆盖。 [bug fixed]destroy 性能问题 [ enhancemen...

2016/08/26 06:52

RegularJS 0.4.4 发布,MVVM 模式构建

RegularJS 0.4.4 发布了,更新了以下部分 : 更新列表v.4.4 重要度排序 1.默认extend不再预解析模板, 这个可能在组件数量很大的情况下并且使用类似webpack的整体打包工具时,会引入不必要的...

2016/05/27 06:34

RegularJS 0.4.3 发布,MVVM 模式构建

RegularJS 0.4.3 发布,更新如下: isolate问题 bug 应该将include的内容强制转换为字符串 bug 嵌套 update 应该阻止并抛出错误,以及未来集成zone.js的设想 discuss list对象的时候更加简明...

2015/12/09 07:50

RegularJS 0.4.2 发布下载,MMVM 模式构建

RegularJS 0.4.2 发布下载,此版本主要改进: Bug 修复: forEach, filter, map等ES5的兼容处理函数在IE8和现代浏览器中使用不完全一致 当内外组件有大数组数据存在时,有性能问题 r-hide={...

2015/11/21 06:01

RegularJS 0.4.1 发布下载,MMVM 模式构建

RegularJS 0.4.1 发布下载: https://github.com/regularjs/regular/archive/v0.4.1.zip 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅...

2015/10/31 08:14

RegularJS v0.4.0 发布,JavaScript MVC 框架

RegularJS v0.4.0 发布,更新内容如下: r-component for dynamic component <r-component is={componentName} props.... /> if Express is const, now regularjs will pass a value but no...

2015/09/30 08:06

RegularJS v0.3.1 发布,JavaScript MVC 框架

RegularJS v0.3.1 发布,此版本更新内容如下: add $outer property to make transcluded component easily, see demo like tab-pane. see issues at #26 r-animation: command on now bind...

2015/02/27 08:11

RegularJS v0.3.0 发布,JavaScript MVC 框架

RegularJS v0.3.0 发布,此版本是 v0.0.1 版本以来最大的更新版本,引入了一些新特性: The default Syntax changed from {{}} to {} now. but you can return to old syntax use Regular.c...

2015/01/28 07:24

RegularJS 0.2.12 发布,JavaScript MVC 框架

RegularJS 0.2.12 发布,此版本现已提供下载。 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果 Angularjs的...

2014/10/19 06:43

没有更多内容

加载失败,请刷新页面

暂无问答

基于Regularjs一步步教你实现一个todo list

前言 现在市面上充斥了越来越多的javascript框架,给开发者的技术选型带来极大的选择成本,todomvc在这个环境下应运而生. 由于todomvc有一个完整的实现定义,它复杂度适中,大概就是平时开发...

2014/11/17 09:01
122
0
干货分享——Javascript 的开源功能插件和框架集锦

一、MV* 框架和库 1、 Angular JS Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 web 应用的架构,无需进行手工 DOM ...

2016/12/19 15:55
12
0
JavaScript 的开源功能插件和框架小集锦

JavaScript 是一个在全球范围内都非常受欢迎的脚本语言,由 Netscape 的 LiveScript 发展而来,可用于 Web 开发、移动应用开发、服务器端开发等。它因简单、安全、动态和跨平台等特点而受到新...

2016/12/14 20:54
7.4K
18
2014年国人开发的最热门的开源软件TOP 100

不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必。做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多的开源软件,而且还有很多软...

2016/03/11 15:50
407
1

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部