Nuclear开始

为什么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

你可以直接在页面引用

也可在AMD环境同步 require

define(function (require) {
    var Nuclear = require('nuclear');
});

或者异步 require：

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

在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 () {

所以，只要你加载了nuclear.js文件，你就能直接子啊root/window下直接访问到Nuclear。
那么为什么要暴露在root/window?
因为，为了支持声明式事件绑定，即让事件调用自身组件定义的方法。如下面render方法中的模板：

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

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

简单例子

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

Q&A

任何问题可以留言回复或者issues 发过来