为什么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');
});
或者异步 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方法中的模板:
<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>
new HelloMessage的第一个参数会赋给this.option,render的模板使用的数据源就是this.option。所以,直接通过 {{name}}就能得到option的name的值。
new HelloMessage的第二个参数是组件的容器。
Q&A
任何问题可以留言回复或者issues 发过来