Nuclear开始

jopen 9年前

为什么Nuclear

这里列举Nuclear在竞品中的优势：

  • 借助浏览器本身的机制，无任何代码约定和入侵
  • 放心使用HTML+CSS+JS
  • observejs替代EventLoop、requestAnimationFrame、Ticker等定时循环
  • 解决MV*无法构建复杂特效的难题，随意构建超复杂交互特效，自由地大展拳脚
  • 支持Dom和Canvas组件，未来支持SVG和WebGL.
  • SVG库Sword已经整装待发： https://github.com/AlloyTeam/Sword
  • WebGL库pixeljs正在全力推进 https://github.com/kmdjs/pixeljs

获取Nuclear

Nuclear网站 http://alloyteam.github.io/Nuclear/ .

Github https://github.com/AlloyTeam/Nuclear

你也可以通过npm安装Nuclear

npm install alloynuclear

使用Nuclear

js文件可以在这里找到最新版的: nuclear.js or nuclear.min.js

你可以直接在页面引用

<script src = "nuclear.js" > </script>

也可在AMD环境同步 require

define ( function ( require ) {

var Nuclear = require ( 'nuclear' ) ;

} ) ;

</td> </tr> </tbody> </table> </div>

或者异步 require：

require ( [ 'nuclear' ] , function ( Nuclear ) {

} ) ;

</td> </tr> </tbody> </table> </div>

在CommonJS 环境：

var Nuclear = require ( 'nuclear' ) ;

Nuclear直接暴露

下面是暴露给AMD/CommonJS和Root的代码。

; ( function ( root , factory ) {

if ( typeof define === 'function' && define . amd ) {

define ( [ ] , factory ) ;

} else if ( typeof exports === 'object' ) {

module . exports = factory ( ) ;

} else if ( typeof define === "function" && define . cmd ) {

define ( function ( require , exports , module ) {

module . exports = factory ( ) ;

} ) ;

}

root . $ = root . Nuclear    = factory ( ) ;   

} ( this , function ( ) {

</td> </tr> </tbody> </table> </div>

所以，只要你加载了nuclear.js文件，你就能直接子啊root/window下直接访问到Nuclear。

那么为什么要暴露在root/window?

因为，为了支持声明式事件绑定，即让事件调用自身组件定义的方法。如下面render方法中的模板：

< form onsubmit = "add(event)" >

到了dom里面，进过Nuclear的处理会变成：

< form onsubmit = "Nuclear.instances[0].add(event)" >

所以add不会去访问全局的add，而是访问自身组件定义的add方法。关于这点后面教程再详细说明这么设计的好处。先看简单的例子。

简单例子

< ! DOCTYPE html >

< html >

< head >

< title > Hello , Nuclear ! < / title >

< / head >

< body >

< div id = "container" > < / div >

<script src = "../dist/nuclear.js" > </script>

<script type = "text/javascript" >

var HelloMessage = Nuclear . create ( {

render : function ( ) {

return '<div>Hello , {{name}} !</div>' ;

}

} )

new HelloMessage ( { name : "Nuclear" } , "#container" ) ;

</script>

< / body >

< / html >

</td> </tr> </tbody> </table> </div>

new HelloMessage的第一个参数会赋给this.option，render的模板使用的数据源就是this.option。所以，直接通过 {{name}}就能得到option的name的值。new HelloMessage的第二个参数是组件的容器。

原文 http://www.alloyteam.com/2015/07/nuclear-kai-shi/

相关经验