Regular 是 MDV(数据驱动视图技术) 的一种实现。 它...
set/get
包装
看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果。
Angularjs从12年开始开始火爆起来, 数据驱动的业务实现方式也由此深入人心, 它的数据更新策略基于脏检查,在明确内部的生命周期后在数据绑定的使用上是最为灵活的(即这种方式不介意是何种方式促使数据改变,而只关心数据改变的结果),作者本人以及周围的小伙伴也开始为之着迷. 随着使用的深入, 发现angularjs的强大特性也引出了一些无法攻克的不足:
由于本身生命周期的强约束,难以与其它框架公用
入门容易,深入难 —— 想想directive一个feature就涉及到的 postlink prelink controller compile scope等等概念.
模板的逻辑实现依赖的是directive(ng-repeat, ng-if etc..),即最小逻辑颗粒是节点, 与常规的模板自由度上还是有较大差异.
FOUC(Flash of unstyled content), 因为angular是先通过浏览器(innerHTML)生成了dom,再后置link来产生真正需要的元素,所以会导致内容闪动.regular也没有完美的解决问题(因为内容仍然是前端render的),但是可以保证进入文档的节点就是预期的节点
除此之外,Angularjs的核心是scope对象, 业务的实现大部分都是在scope上动态添加函数或属性. 也有人提出整个controller的写法缺乏约束性,这个时候angular-classy出现, 它将原本因挂载在scope上的业务逻辑转移到构造函数原型的形式, 减少了灵活度,但是更有约束性, 这也给了regular很大灵感.
在angular大行其道的时期也激励产生了很多框架,比如vue.js、avalon.js、reactive等等优秀的框架,它们解决了一些问题, 比如avalon.js利用defineProperty实现了数据get-set的代理 并利用VB实现了ie6的兼容(当然数组还是wrap), 但总体来讲基于dom实现的新秀们还是缺少足够的差异化(代码量的减少并不是最核心的部分)
与此同时,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, 但仍然引入了一些实现上和使用上的难题
一次digest中virtual-dom的diff只需一次,但是会随着ui的复杂度,性能损耗严重,virtual-dom与原dom的对应也更难(如果angular的脏检查的性能取决与watcher的数量,那react则是取决与ui规模)
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正是在这种百花齐放的时候产生, 最终在实现上采取了angular的数据更新策略(但是提取了表达式的依赖关系以便在Object.observe正式到来时切换到脏检查+observe的形式)提倡极致的声明式和裸数据操作, 依赖于基于字符串的模板描述结构结合更规范性的类式继承的组件体系来定义数据层的业务逻辑.
这也是框架取名 regular = react(ractive) + angular的由来
本文由作者郑海波授权网易云社区发布。 此文摘自regularjs的指南, 目前指南正在全面更新, 把老文档的【接口/语法部分】统一放到了独立的 Reference页面. Regularjs是基于动态模板实现的用于构建数据驱动型组件的新一代类库 关键词 1. 动态模板引擎 关于前端的模板技术, 我在前端乱炖有一篇反响还算不错的综合性文章——一个对前端模板技术的全面总结, 总体来讲动态模板引擎是一种介
据说,RegularJS是基于动态模版实现的用于构建数据驱动型组建的新一代类库。结合了AngularJS的脏检查机制的数据双向绑定和ReactJS组件化的思想,用起来应该和VueJS差不多(因为我没用过VueJS)。 RegularJS是极具网易特色的库,项目中在用,稍微研究研究。搜索了一下网上所有有关的资料,还真的不多。这是我能找到的所有靠谱资料。 官网资料 http://regularjs.g
提示:阅读本文需配合Regularjs官方文档,一起食用味道更佳哦! 组件是什么?组件的定义为: 在用户端开发领域,组件应该是一种独立的、可复用的交互元素的封装。 RegularJS的组件满足以下等式: 组件 = 模板 + 数据 + 业务逻辑 如果说组件是Regular的灵魂,那么组合是Regular灵魂的核心。那么组合到底是什么? 简单来说,组合的实质就是让组件在即使在与其他组件嵌套使用时仍保持
前言 现在市面上充斥了越来越多的javascript框架,给开发者的技术选型带来极大的选择成本,todomvc在这个环境下应运而生. 由于todomvc有一个完整的实现定义,它复杂度适中,大概就是平时开发的一个组件的功能复杂度,开发者可以轻松对各个框架的代码做对比,同时由于功能一致,也可以进行各框架之间的性能对比(当然这个测试案例其实并没有很大的实际意义). 接下来这篇指南会一步步的带大家使用Re
最近在用一款来自网易的javascript MVC 框架regularJS来写项目,这是网易一位叫郑海波的大神写的一款框架,所谓regualrJS, 作者这样取名主要是因为这个框架更像是angular与react的集合体,按照作者的话说大概是regular = react(ractive) + angular,此框架对于我来说最好用的特点是模板对于数据的渲染。同时框架支持引入其他类似于jquery
RegularJS 详细介绍 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果 Angularjs的火爆以及它的小伙伴们 Angularjs从12年开始开始火爆起来, 数据驱动的业务实现方式也由此深入人心, 它的数据更新策略基于脏检查,在明确内部的生命周期后在数据绑定的使用上是最为灵活的(即这种方式不介意是
看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果 Angularjs的火爆以及它的小伙伴们 Angularjs从12年开始开始火爆起来, 数据驱动的业务实现方式也由此深入人心, 它的数据更新策略基于脏检查,在明确内部的生命周期后在数据绑定的使用上是最为灵活的(即这种方式不介意是何种方式促使数据改变,而只关心
webpack-regular github源码: https://github.com/fisher-zh/webpack-regular 基于webpack构建的多页面网站开发环境。 webpack在前端开发的过程中逐渐扮演着越来越重要的角色,在使用vuejs开发单页面应用的过程中,个人是倾向于直接使用vue-cli来搭建初期的环境,毕竟方便。但是在做一些需要兼容老版本浏览器(如IE7、8)的
数个项目的总结,框架为填补现今Ajax框架的不足而生,命名为RegularJS,后续将会不断更新。 /* ******************************************************* * RegularJS framework * * verson: 0.1 * author: star.stroll * * 支持Firefox2与IE6或更高版本,
RegularJS 0.2.12 发布,此版本现已提供下载。 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果 Angularjs的火爆以及它的小伙伴们 Angularjs从 12年开始开始火爆起来, 数据驱动的业务实现方式也由此深入人心, 它的数据更新策略基于脏检查,在明确内部的生命周期后在数据绑定的使用
我需要在没有静态嵌套类的情况下实现Builder模式。如果我有遗传,最好的方法是什么?让我们想象一下我有下面的课。 是创建一个Builder类来负责设置PassengerCar和Truck的值更好,还是我们需要另外三个类,CarBuilder,PassengerCarBuilder extends CarBuilder和TruckBuilder extends CarBuilder?
当用户搜索租赁时,他可能还想将搜索范围缩小到特定城市。虽然我们的初始租赁列表组件仅显示租赁信息,但此新的过滤器组件还将允许用户以过滤条件的形式提供输入。 首先,让我们生成新的组件list-filter。我们的需求是希望组件根据用户输入过滤租赁列表。 $ ember g component list-filter installing component create app/component
目录 简介 对程序员来说很常见一种情况是在没有合理的程序架构时就开始编程,没有一个清晰的和定义好的架构的时候,大多数开发者和架构师通常会使用标准式的传统分层架构模式(也被称为多层架构)—通过将源码模块分割为几个不同的层到不同的包中。不幸的是,这种编码方式会导致一系列没有组织性的代码模块,这些模块缺乏明确的规则、职责和同其他模块之间的关联。这通常被称为架构大泥球。 应用程序缺乏合理的架构一般会导致程
本文向大家介绍设计模式构建器模式/Java 实现,包括了设计模式构建器模式/Java 实现的使用技巧和注意事项,需要的朋友参考一下 示例 通过Builder模式,您可以以易于阅读的方式创建具有许多可选变量的类的实例。 考虑以下代码: 如果所有参数都是必需的,那么一切都很好。如果有更多的变量和/或其中一些是可选的怎么办?您不想使用必需参数和可选参数的每种可能的组合来创建大量的构造函数,因为它变得难以
问题内容: 我正在构建一个Rails应用程序,并且我想通过AJAX将Rails部分中的内容放入模式中。 在Twitter Bootstrap 2.3.2模式中,我阅读了文档,您可以使用远程密钥通过ajax加载内容。 http://getbootstrap.com/2.3.2/javascript.html#modals 但是,这仅允许将内容注入,而不是动态构建整个模式。 有没有办法用JS动态构建整
由于无法解析最后一个链接调用,未定义方法,因此此调用将不会编译。所以这种方式要求所有调用都以特定的顺序链接起来,这是非常不切实际的,特别是对于一个深度层次结构树。 现在,在我寻找答案的过程中,我遇到了一个Java Builder类的子类,它建议使用奇怪的递归泛型模式。但是,由于我的层次结构不包含一个抽象类,所以这个解决方案对我不起作用。但是这种方法依赖于抽象和多态性来发挥作用,这就是为什么我不相信
我将JSON文件&JSON模式解析为AVRO模式。我有点困惑,我是否必须使用AVRO文档中定义的数据类型来编写手动AVRO模式。 或者是否有任何自动化的方法/函数/程序可以完全按照要求工作?
本文向大家介绍详解java构建者模式Builder,包括了详解java构建者模式Builder的使用技巧和注意事项,需要的朋友参考一下 定义 Builder模式是一步步创建一个复杂对象的创建型模式,它允许用户在不知道内部构建细节的情况下,可以更精细的控制对象的构建过程。该模式是将构建复杂对象的过程和它的部件解耦,使得构建过程和部件的表示隔离。 作为复杂对象可能有很多组成部分,比如汽车有车轮、方向盘