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
你可以直接在頁面引用
<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 發過來
總結
- 上一篇： mysql限制类别_MySQL限制每个类
- 下一篇： windows steam账号密码忘了怎