摘要：直搗黃龍黃龍即黃龍府，轄地在今吉林一帶，應(yīng)該是指長(zhǎng)春市農(nóng)安縣，為金人腹地。一直打到黃龍府。指搗毀敵人的巢穴。有人會(huì)說(shuō)組合優(yōu)于繼承的。的變更會(huì)自動(dòng)更新依賴的組件?？梢圆僮鲗?duì)象實(shí)例，的變更會(huì)自動(dòng)更新組件，屬性設(shè)置方法調(diào)用。

刀耕火種是新石器時(shí)代殘留的農(nóng)業(yè)經(jīng)營(yíng)方式。又稱遷移農(nóng)業(yè)，為原始生荒耕作制。

var TodoApp = Nuclear.create({
    add: function (evt) {
        evt.preventDefault();
        var textBox = this.node.querySelector("input");
        this.option.items.push(textBox.value);
    },
    installed: function () {
        var form = this.node.querySelector("form");
        form.addEventListener("submit", this.add.bind(this), false);
    },
    render: function () {
        return "

                 
TODO
                 
 {{#items}} 
{{.}}
 {{/items}}
                  

                   
                   Add #{{items.length}}
                 
                
";
    }
});

new TodoApp( { items: [] },"#container");

這種書(shū)寫(xiě)方式依賴延續(xù)了jQuery時(shí)代的思維方式：

js里查找dom

js里綁定事件

在以前的文章里寫(xiě)過(guò)，如果不使用組件化編程，js里查找dom以及在js里綁定事件可能會(huì)帶來(lái)如下問(wèn)題：

浪費(fèi)帶寬

用戶反饋無(wú)響應(yīng)

腳本錯(cuò)誤

頁(yè)面短暫錯(cuò)亂

上面的書(shū)寫(xiě)方式粗暴、原始、落后，即：刀耕火種。

“石器鋤耕”是奴隸社會(huì)時(shí)期的主要耕作方式，這一時(shí)期農(nóng)業(yè)已經(jīng)有了很大的發(fā)展。

var TodoApp = Nuclear.create({
    onRefresh: function () {   
        this.form.addEventListener("submit", function (evt) {
            evt.preventDefault();                
            this.option.items.push(this.textBox.value);
        }.bind(this), false);
    },
    render: function () {
       return "

                 
TODO
                 
 {{#items}} 
{{.}}
 {{/items}}
                 

                   
                   Add #{{items.length}}
                 
               
";
    }
},{
    diff:false
});

new TodoApp( { items: [] },"#container");

會(huì)發(fā)現(xiàn)，查找dom的代碼已銷聲匿跡。直接標(biāo)記nc-id，就自動(dòng)掛載在this下。
值得注意的是，傳入了第二參數(shù)關(guān)閉了DOM diff。關(guān)掉diff的結(jié)果就是，每次組件HTML會(huì)全部重新替換渲染，綁定的事件全部丟失，所以需要將綁定事件的代碼寫(xiě)入onRefresh里，這樣每次重新渲染都會(huì)再綁定一次。
比刀耕火種先進(jìn)一點(diǎn)：石器鋤耕。

黃龍：即黃龍府，轄地在今吉林一帶，應(yīng)該是指長(zhǎng)春市農(nóng)安縣，為金人腹地。一直打到黃龍府。指搗毀敵人的巢穴。指殺敵取勝。

var TodoApp = Nuclear.create({
    add: function (evt) {   
            evt.preventDefault();                
            this.option.items.push(this.textBox.value);
    },
    render: function () {
       return "

                 
TODO
                 
 {{#items}} 
{{.}}
 {{/items}}
                 

                   
                   Add #{{items.length}}
                
               
";
    }
});

new TodoApp( { items: [] },"#container");

會(huì)發(fā)現(xiàn)，查找dom和綁定的代碼同時(shí)銷聲匿跡?。?/p>

需要使用input，直接標(biāo)記nc-id為textBox，就可以this.textBox訪問(wèn)

需要綁定事件，直接在HTML內(nèi)聲明事件和回調(diào)onsubmit="add(event)"

也可以通過(guò)add(event,this)拿到event和觸發(fā)該事件的dom元素。

代碼通俗簡(jiǎn)潔干凈直接，目的直觀明確。故：直搗黃龍。

宋·釋道原《景德傳燈錄·利山和尚》：“僧問(wèn)：不歷僧只獲法身，請(qǐng)師直指。師云：子承父業(yè)。”

var TodoList = Nuclear.create({
    render: function () {
        return "
 {{#items}} 
{{.}}
 {{/items}}
";
    }
});

var TodoApp = TodoList.create({
    add: function (evt) {
        evt.preventDefault();
        this.option.items.push(this.textBox.value);
    },
    render: function () {
        return "

                 
TODO
"
                + this._super.render() +
                "

                   
                   Add #{{items.length}}
                 
               
";
    }
});

new TodoApp({ items: [] },"#container");

TodoApp不過(guò)是TodoList的炎黃子孫，故TodoApp可以通過(guò)this._super訪問(wèn)父輩。也可訪問(wèn)父輩任何方法。有人會(huì)說(shuō)：“組合”優(yōu)于“繼承”的。一定要明白：OOP既能組合也能繼承，是不沖突的。且看下面例子。

明·劉基 《郁離子·省敵》：“萬(wàn)夫一力，天下無(wú)敵?！?

var TodoList = Nuclear.create({
    render: function () {
        return "
 {{#items}} 
{{.}}
 {{/items}}
";
    }
});

var TodoApp = Nuclear.create({
    install: function () {
        this.todoList = new TodoList({ items: [] })
    },
    add: function (evt) {
            evt.preventDefault();
            this.todoList.option.items.push(this.textBox.value);
            this.refresh();
    },
    render: function () {
       return "

                 
TODO
"
                 + this.todoList.render()+
                 "

                   
                   Add #"+this.todoList.option.items.length+"
                 
               
";
    }
});

new TodoApp( {},"#todo2Container");

前一個(gè)例子的繼承，這個(gè)例子是組合。不能說(shuō)你的框架是Class base就不能使用組合，這是天大的誤解。而我依稀記得極限編程關(guān)于面向?qū)ο笤O(shè)計(jì)的推論是：優(yōu)先使用對(duì)象組合，而不是類繼承。作為框架的設(shè)計(jì)者，雖然會(huì)有一些約束，但是如果連組合和繼承都不能共存，那就是設(shè)計(jì)的最大敗筆。
使用Nuclear既能繼承也能組合，關(guān)鍵看程序邏輯該怎么抽象和實(shí)現(xiàn)復(fù)雜度。

唐·孟郊《去婦》詩(shī)：“妾心藕中絲；雖斷猶牽連?！?

var TodoList = Nuclear.create({
    render: function () {
        return "
 {{#items}} 
{{.}}
 {{/items}}
";
    }
});

var TodoApp = Nuclear.create({
    install: function () {
        this.todoList = new TodoList(this.option)
    },
    add: function (evt) {
            evt.preventDefault();                
            this.option.items.push(this.textBox.value);
    },
    render: function () {
       return "

                 
TODO
"
                 + this.todoList.render()+
                 "

                   
                   Add #{{items.length}}
                 
               
";
    }
});

new TodoApp( { items: [] },"#container");

這個(gè)例子和上個(gè)例子的區(qū)別是：共用option。option的變更會(huì)自動(dòng)更新依賴option的組件。

 《漢書(shū)·高帝記》：“且夫天子以四海為家?！?

var TodoApp = Nuclear.create({
add: function (evt) {   
        evt.preventDefault();                
        this.option.items.push(this.textBox.value);
},
render: function () {
   return "

             
TODO
             
 {{#items}} 
{{.}}
 {{/items}}
             

               
               Add #{{items.length}}
             
           
";
}
});
var todo= new TodoApp( { items: [] });

todo.setNuclearContainer("#container");

且看上面的new TopApp沒(méi)傳第二個(gè)參數(shù)指定容器。后面使用setNuclearContainer指定容器。這個(gè)場(chǎng)景還是比較常見(jiàn)，創(chuàng)建游離態(tài)組件，后續(xù)根據(jù)需要指定容器。AlloyLever就是這么干的： https://github.com/AlloyTeam/AlloyLever/blob/master/src/js/main.js

三國(guó)·蜀·諸葛亮《心書(shū)·兵機(jī)》：“將能執(zhí)兵之權(quán)，操兵之勢(shì)，而臨群下，臂如猛虎加之羽翼，而翱翔四海?！?

var TodoApp = Nuclear.create({
    add: function (evt) {
        evt.preventDefault();
        this.option.items.push(this.textBox.value);
    },
    render: function () {
        return "

                  
TODO
                  
 {{#items}} 
{{.}}
 {{/items}}
                  

                   
                   Add #{{items.length}}
                 
               
";
    },
    style: function () {
        return "h3 { color:red; }
                button{ color:green;}";
    }
});
var todoApp = new TodoApp({ items: [] }, "#container");

todoApp.option.items.push("Nuclear");
todoApp.option.items.push("Hello World!");

style方法內(nèi)的樣式自會(huì)對(duì)自身生效，不會(huì)污染其他組件?？梢圆僮鲗?duì)象實(shí)例option，option的變更會(huì)自動(dòng)更新組件，屬性設(shè)置>方法調(diào)用。
雙向綁定的好處以前寫(xiě)過(guò)一篇文章專門(mén)介紹，從上面的例子也能可出：

組件內(nèi)部的代碼更簡(jiǎn)潔

組件外部的代碼更簡(jiǎn)潔

壁壘:古代軍營(yíng)四周的圍墻;森嚴(yán):整齊,嚴(yán)肅。原指軍事戒備嚴(yán)密?，F(xiàn)也用來(lái)比喻彼此界限劃得很分明。

不用擔(dān)心template標(biāo)簽的兼容性問(wèn)題，Nuclear幫你處理好了。支持所有現(xiàn)代瀏覽器(包括IE9+)。
Nuclear也在js里進(jìn)行了動(dòng)態(tài)插入了template { display: none !important; }。但是js還沒(méi)執(zhí)行到且瀏覽器不兼容template的話，用戶會(huì)看到一閃而過(guò)的模板原始代碼。
所以為了避免IE9一閃而過(guò)的模板原始代碼直接顯示，建議在head中加入。

如果你像手Q hybrid應(yīng)用那樣只需要兼容webkit的話，天生支持template，就不用加入上面的兼容樣式。

《莊子·達(dá)生》：“梓慶削木為鐻，鐻成，見(jiàn)者驚憂鬼神?！?

var TodoApp = Nuclear.create({
    add: function (evt) {
        evt.preventDefault();
        this.option.items.push(this.textBox.value);
    },
    render: function () {
        return `

                  
TODO
                  
 {{#items}} 
{{.}}
 {{/items}}
                  

                   
                   Add #{{items.length}}
                 
               
`;
    },
    style: function () {
        return `h3 { color:red; }
                button{ color:green;}`;
    }
});

劍修者最高境界，人既是劍，劍既是人，劍隨心發(fā)，人隨劍殺

var TodoApp = Nuclear.create({
    add: function (evt) {
        evt.preventDefault();
        this.option.items.push(this.textBox.value);
    },
    render: function () {
        return `
                

                  
TODO
                  
 {{#items}} 
{{.}}
 {{/items}}
                  

                   
                   Add #{{items.length}}
                 
                
`;
    }
});

Nuclear從出生，API簡(jiǎn)單穩(wěn)定，幾乎沒(méi)怎么變動(dòng)，內(nèi)部是實(shí)現(xiàn)在不斷的完善，API驅(qū)動(dòng)非常重要，不能因?yàn)閷?shí)現(xiàn)某些API困難而做任何妥協(xié)，比如讓使用框架的著多傳個(gè)參數(shù)、多調(diào)用一次方法，這都是設(shè)計(jì)的缺陷。

Nuclear就是不妥協(xié)的結(jié)果。因?yàn)楹?jiǎn)單的設(shè)計(jì)，所以可以有很多強(qiáng)大的玩法，待續(xù)...

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

加入Nuclear，一起讓組件化開(kāi)發(fā)體驗(yàn)更加愜意、舒適..