HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 一个轻量级的JavaScript库:Reactor.js

一个轻量级的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

3. 一个轻量级CSS3动画库:JX.Animate

4. Rainyday.js:一个轻量的 JavaScript 库

5. 为现代浏览器而生的轻量级JavaScript库

6. TogetherJS:一个免费开源的JavaScript库

7. BLACKHOLE – 易于定制、轻量级的SASS/CSS框架

8. 简单的,轻量级的 jQuery 仪表板插件

9. 简单的,轻量级的 jQuery 仪表板插件

10. 5个免费的JavaScript库和CSS框架的CDN加速

本文来源:https://www.51html5.com/a3246.html

点击展开全部

﹝一个轻量级的JavaScript库:Reactor.js﹞相关内容

「一个轻量级的JavaScript库:Reactor.js」相关专题

其它栏目

也许您还喜欢