RegularJS 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
RegularJS 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
RegularJS 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
RegularJS 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
RegularJS 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Regular 是 MDV(数据驱动视图技术) 的一种实现。 它...

提供以下能力

  • 数据绑定,局部刷新
  • 深度的组件化能力
  • 服务端渲染
  • 单页系统:regular-state提供完整的单页系统解决方案,包括服务端渲染支持
  • 编译到小程序: 感谢考拉团队精彩的 mpregular

拥有以下特性

  • 语法灵活:自建DSL,表达能力不受HTML语法所限
  • 基于脏检查:直接操作裸数据,没有 set/get 包装
  • 良好的兼容性:支持 IE7+ 以及其他现代浏览器
  • 渐进的视图层框架:无侵入性,可以配合任何框架和模块系统使用

 

看到 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的由来
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (9)

加载中
车轮越来越多,程序员越来越累。 RegularJS
2014/09/05 09:57
回复
举报
框架是越来越多啊 RegularJS
2014/09/05 10:14
回复
举报
框架在退化程序猿,就像民工一样 RegularJS
2014/09/05 11:20
回复
举报
jquery 打天下的飘过,对各种框架无爱啊 RegularJS
2014/09/06 03:28
回复
举报
每日一荐 RegularJS
2014/09/20 13:23
回复
举报
其实比较下来,还是Riot实现了这个框架本来的意图,虽然只适合零依赖的单个库。。 #RegularJS#
2015/07/25 20:03
回复
举报
2016/02/02 22:38
回复
举报
#React# #Vue.js# #RegularJS# #jQuery# 前端怎么选?
2016/10/12 08:32
回复
举报
更多评论
发表了资讯
2016/09/27 00:00

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

RegularJS v0.5.2 发布了。 主要更新内容: 对流程无关的性能优化 减少_.typeOf使用 标记没有side effects的watcher 增加$watch接口的stable参数 复用一些不变得参数型对象 减少_.exend的使用 修复子组件属性与unsetable表达式数据绑定后报错 修改$unwatch的实现 下载地址: Source code (zip) Source code (tar.gz)...

2
10
发表了资讯
2016/08/26 00:00

RegularJS 0.5.0 发布,MVVM 模式构建

RegularJS 0.5.0 发布了,主要更新如下: 指令参数 [bug fixed]当一个component use了两个都包含events的mixin时,前一个mixin的events会被覆盖。 [bug fixed]destroy 性能问题 [ enhancement]增加devtool支持 [feature]增加input[r-model] lazy throttle支持 [feature]增加指令directive定义的update函数 [feature]Regular的实例中$one没有实 详细更细说明: https://github.com/regularjs/regular/milestone/6?closed=1 下载:...

2
12
发表了资讯
2016/05/27 00:00

RegularJS 0.4.4 发布,MVVM 模式构建

RegularJS 0.4.4 发布了,更新了以下部分 : 更新列表v.4.4 重要度排序 1.默认extend不再预解析模板, 这个可能在组件数量很大的情况下并且使用类似webpack的整体打包工具时,会引入不必要的组件解析成本。 解析默认放置在实例化阶段, 并且每个组件的模板只会被解析一次。不过你仍然可以通过Regular.config来控制它 Regular.config({    PRECOMPILE: true}) 2.增加了两个事件 $afterConfig, $afterInit, 使得在使用mixin时...

0
14
发表了资讯
2015/12/09 00:00

RegularJS 0.4.3 发布,MVVM 模式构建

RegularJS 0.4.3 发布,更新如下: isolate问题 bug 应该将include的内容强制转换为字符串 bug 嵌套 update 应该阻止并抛出错误,以及未来集成zone.js的设想 discuss list对象的时候更加简明 feature 希望r-anim对参数里的{}可以进行解析 discuss enhancement IE8 Compatibility Problems bug 详情请看:v0.4.3...

0
6
发表了资讯
2015/11/21 00:00

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

RegularJS 0.4.2 发布下载,此版本主要改进: Bug 修复: forEach, filter, map等ES5的兼容处理函数在IE8和现代浏览器中使用不完全一致 当内外组件有大数组数据存在时,有性能问题 r-hide={true}会报错 换行导致模板无法解析 改进: move from componnent.io to webpack. 下载:https://github.com/regularjs/regular/archive/v0.4.2.zip。...

5
8
发表了资讯
2015/10/31 00:00

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

RegularJS 0.4.1 发布下载: https://github.com/regularjs/regular/archive/v0.4.1.zip 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果 Angularjs的火爆以及它的小伙伴们 Angularjs从12年开始开始火爆起来, 数据驱动的业务实现方式也由此深入人心, 它的数据更新策略基于脏检查,在明确内部的生命周期后在数据绑定的使用上是最为灵活的(即这种方...

5
18
发表了资讯
2015/09/30 00:00

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 not a Expression like in previous version. value = {1} , 1 will pass to directive. $watch now accept function for watch complex value this.$watch(function(){  return global.value}, function (gval, old_gval)) { }) #...

5
10
发表了资讯
2015/02/27 00:00

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 component event when the particular event is not a dom event. see testcase for detail fix some bug 此版本现已提供下载:https://github.com/regularjs/regular/archive/0.3.1.zip。 RegularJS 在实现上采取了angular的数据更新策略...

0
13
发表了资讯
2015/01/28 00:00

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.config({END: '}}', BEGIN: '{{'}) Two-way filter is introduced . see reference for detail . It is used to control the flow from view back to model. you can combine it with r-model to realize some complex binding. prevent t...

1
16
发表了资讯
2014/10/19 00:00

RegularJS 0.2.12 发布,JavaScript MVC 框架

RegularJS 0.2.12 发布,此版本现已提供下载。 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果 Angularjs的火爆以及它的小伙伴们 Angularjs从 12年开始开始火爆起来, 数据驱动的业务实现方式也由此深入人心, 它的数据更新策略基于脏检查,在明确内部的生命周期后在数据绑定的使用上是最为灵活的(即这种方式不介意是何种方式促使数据改变,而只关...

1
19
发表了资讯
2014/10/12 00:00

RegularJS 0.2.11 发布,JavaScript MVC 框架

RegularJS 0.2.11 发布,此版本现已提供下载,主要是添加了 refs 支持。 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果 Angularjs的火爆以及它的小伙伴们 Angularjs从 12年开始开始火爆起来, 数据驱动的业务实现方式也由此深入人心, 它的数据更新策略基于脏检查,在明确内部的生命周期后在数据绑定的使用上是最为灵活的(即这种方式不介意是何种...

6
17
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2014/11/17 09:01

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

前言 现在市面上充斥了越来越多的javascript框架,给开发者的技术选型带来极大的选择成本,todomvc在这个环境下应运而生. 由于todomvc有一个完整的实现定义,它复杂度适中,大概就是平时开发的一个组件的功能复杂度,开发者可以轻松对各个框架的代码做对比,同时由于功能一致,也可以进行各框架之间的性能对比(当然这个测试案例其实并没有很大的实际意义). 接下来这篇指南会一步步的带大家使用Regularjs实现一个完整的todomvc的...

0
1
发表于程序人生专区
2016/03/13 15:03

教你优雅地运用JS模块化编程

(点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 首先,看一个非常不优雅的例子: 看到这段代码,虽然代码很短,但是一眼看上去就不想再看了,也就是没什么可读性。这段代码,没有封装,随意定义一个变量都是全局变量,这样在多人开发或者是大型开发中,极其容易造成所谓的脏读。 那么,该怎样把JS写得优雅一些呢?下面总结了几点供大家参考(如有错误,欢迎指正!): ①巧用闭包将函数变量变为局部变量,基本格式为: ;(...

0
0
发表了博客
2020/05/18 07:35

JS核心理论之《Vue响应式原理及MVVM实现》

MVVM 概念 MVVM表示的是 Model-View-ViewModel。 Model:模型层,负责处理业务逻辑以及和服务器端进行交互 View:视图层:负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面 ViewModel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁 View层和Model层并没有直接联系,而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来,使得View层和Model层的同步工作完全是自动...

0
0
发表了博客
2019/04/10 10:10

5G到来,App的未来,是JavaScript,Flutter还是Native ?

Native App React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发。与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Native代码,其使用的技术Facebook的Flux技术。 其特点是: 使用JavaScript语言,由于JS被广泛地使用,所以RN也很容易被接受。 RN依赖JS的运行时环境,也就是JS桥接技术。其使用Facebook的Flux架构。 RN仅提供了UI渲染和设备访问的API,很多功能必须依赖第三方库来实现对本...

0
0
发表了博客
2019/02/12 20:42

Native、Web App、Hybrid、React Native(简称RN)、Weex 间的异同点。

App常用开发模式简介 此处App为应用application,并非我们通常讲的手机App。 常用的几种APP开发模式-脑图 Native App 传统的原生App开发模式,有iOS和aOS两大系统,需要各自语言开发各自App。 优点:性能和体验都是最好的。 缺点:开发和发布成本高。 举个栗子:网易管家App (https://id.163.com/gj/) 应用技术:Swift,OC,Java。 WebApp 移动端的网站,常被称为H5应用,说白了就是特定运行在移动端浏览器上的网站应用。一般...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
9 评论
215 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部