一个轻量级的JavaScript库:Reactor.js
var foo = Signal(1);var bar = Signal(function(){ return foo() + 1;});var moo = Observer(function(){ console.log(bar());}); foo();// 1bar();// 2 foo(6);// console logs 7 foo();// 6bar();// 7
通过上面的例子,可以看出Reactor具有以下三大特点:
- 无需自己声明一个监听器。reactor可以自动追踪程序的所有运行过程。
- 无需为代码设置一个专门的框架,任何变量的值都能轻松的替换掉原先使用过的数值。
- 用户不需要专门学习该语言的语法、类、对象或者方法。
概述
Reactor由两大组件组成:Signals和Observers。
- Singals用于改变超时的数据,且相互依赖。
- Observers是功能函数,在signal发生改变时会触发。
一个signal需要依赖于其它signal中的数值来确定自己的值。同样,一个observer函数也是依赖signal来确定下一步要做的事情。
当一个signal更新时,它会自动更新所有相关的signals和observers。这时,在整个应用程序中,signals和observers形成一个传递曲线图。signals是传递曲线图的内在因素,而observers则是外在因素。
下面是一个使用Reactor的例子。
// The model is just an array of strings wrapped in a Signal
noteList = Signal(["sample note", "another sample note"]);
// The code to display the notes is wrapped in an Observer
// This code is automatically retriggered when the noteList is modified
Observer(function(){
var noteListElement = document.getElementById("noteList");
noteListElement.innerHTML = '';
// "noteList().length" causes a read of noteList
// This automatically sets noteList as a dependency of this Observer
// When noteList is updated it automatically retriggers the whole code block
for (var i = 0; i < noteList().length; i++) {
var noteElement = document.createElement("div");
noteElement.textContent = noteList()[i];
noteListElement.appendChild(noteElement);
}
});
// The input only needs to modify the Signal
// The UI update is automatically handled by the Observer
var noteInputElement = document.getElementById("noteInput");
noteInputElement.onkeydown = function(event){
if (event.keyCode === 13) {
noteList.push(noteInputElement.value);
noteInputElement.value = '';
}
};
Reactor中使用Signals和Observer函数只需很小的内存,就能轻易的操作相应的变量、代码块、交换读取和调用响应的函数。
与其它的库比较
正如Bacon.js和Knockout.js一样,Reactor库也是基于相同reactive的原则。不同之处是Reactor始终保持着轻量级,后添加的语法和模板都保持在最小状态。Reactor库还设置了自动更新功能,这就不需要专门设置监听器(反馈系统)。
- 与Knockout库比起来,Reactor库无需提供语义绑定可直接使用HTML,用户设置合适的HTML供Observers函数调用。
- 与Bacon库比起来,Reactor库无需帮助事件处理流程。
Signals
Signal是个依赖于其它Signals中的数值。
Reactor提供了一个称为Signal的全局函数。提供一个数值作为返回Signal对象。
var foo = Signal(7);
实现Signal 对象函数功能。读取signal中的值,这个没有任何形参。
foo();
// returns 7
改变Signal中的数值,传递一个新的参数。
foo(9);
// sets the signal's value to 9
Signal可以取任何类型的值,如:数值型、字符串型、布尔型、数组型、对象型。
foo(2.39232);
foo("cheese cakes");
foo(true);
foo(["x", "y", "z"]);
foo({"moo": bar});
如果提供Signal的是函数,则返回函数的值来替代原来的函数。
var foo = Signal(function(){
return 2 * 3;
});
foo();
// returns 6 instead of the function
Signals自身的数值可依赖于其他的Signals的函数调用。如果不同的Signal中的数值读取同一给定的函数,那么这些Signal将自动的被设置为依赖关系。这就意味着依赖关系更新,那么被依赖Signals的数值也会更新。
var foo = Signal(7);
var bar = Signal(function(){
return foo() * foo();
// since foo is read here,
// is is registered as a dependency of bar
});
foo();
// returns 7 as expected
bar();
// returns 49 since it is defined as foo() * foo()
foo(10);
// this updates the value of foo
// and the value of bar as well
bar();
// returns 100 since it was automatically updated together with foo
值得注意的是,这里没有声明任何的监听器或者追踪绑定。Reactor能自动的找到具有依赖关系的signal函数定义。
自动更新使signals链接在一起形成更多复杂依赖关系的曲线图。
var firstName = Signal("Gob");
var lastName = Signal("Bluth");
// fullName depends on both firstName and lastName
var fullName = Signal(function(){
return firstName() + " " + lastName();
});
// barbarianName depends only on firstName
var barbarianName = Signal(function(){
return firstName() + " the Chicken"
});
// comicTitle depends on barbrianName and fullName and therefore
// indirectly depending on firstName and lastName
var comicTitle = Signal(function(){
return "He who was once " + fullName() + " is now " + barbarianName();
});
firstName();
// "Gob"
lastName();
// "Bluth"
fullName();
// "Gob Bluth"
barbarianName();
// "Gob the Chicken"
comicTitle();
// "He who was once Gob Bluth is now Gob the Chicken"
firstName("Michael");
// updating firstname automatically updates
// fullName, barbarianName, and comicTitle
firstName();
// "Michael"
lastName();
// "Bluth"
fullName();
// "Michael Bluth"
barbarianName();
// "Michael the Chicken"
comicTitle();
// "He who was once Michael Bluth is now Michael the Chicken"
【一个轻量级的JavaScript库:Reactor.js】相关文章
1. 一个轻量级的JavaScript库:Reactor.js
2. Facebook开源JavaScript库:React
4. Rainyday.js:一个轻量的 JavaScript 库
6. TogetherJS:一个免费开源的JavaScript库
7. BLACKHOLE – 易于定制、轻量级的SASS/CSS框架
10. 5个免费的JavaScript库和CSS框架的CDN加速
本文来源:https://www.51html5.com/a3246.html
﹝一个轻量级的JavaScript库:Reactor.js﹞相关内容
- 全世界最受欢迎的JavaScript库排名
- JavaScript 矢量图表库:两行代码实现精美图表
- Zrender——轻量级Canvas类库,让绘图大不同!
- React Native v0.4 发布,用 React 编写移动应用
- Prompt轻量级提示框弹出层Jquery插件
- Prompt轻量级提示框弹出层Jquery插件
- cssSandpaper-兼容IE的CSS3 JavaScript库
- 2014年最酷的30个JavaScript库
- JScrambler:保护你的JavaScript代码
- ECT:最快的JavaScript模板引擎