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

刀耕火種是新石器時代殘留的農(nóng)業(yè)經(jī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");

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

js里查找dom

js里綁定事件

在以前的文章里寫過，如果不使用組件化編程，js里查找dom以及在js里綁定事件可能會帶來如下問題：

浪費帶寬

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

腳本錯誤

頁面短暫錯亂

上面的書寫方式粗暴、原始、落后，即：刀耕火種。

“石器鋤耕”是奴隸社會時期的主要耕作方式，這一時期農(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");

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

黃龍：即黃龍府，轄地在今吉林一帶，應(yī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");

會發(fā)現(xiàn)，查找dom和綁定的代碼同時銷聲匿跡！！

需要使用input，直接標記nc-id為textBox，就可以this.textBox訪問

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

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

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

宋·釋道原《景德傳燈錄·利山和尚》：“僧問：不歷僧只獲法身，請師直指。師云：子承父業(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不過是TodoList的炎黃子孫，故TodoApp可以通過this._super訪問父輩。也可訪問父輩任何方法。有人會說：“組合”優(yōu)于“繼承”的。一定要明白：OOP既能組合也能繼承，是不沖突的。且看下面例子。

明·劉基 《郁離子·省敵》：“萬夫一力，天下無敵。”

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");

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

唐·孟郊《去婦》詩：“妾心藕中絲；雖斷猶牽連。”

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");

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

 《漢書·高帝記》：“且夫天子以四海為家。”

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沒傳第二個參數(shù)指定容器。后面使用setNuclearContainer指定容器。這個場景還是比較常見，創(chuàng)建游離態(tài)組件，后續(xù)根據(jù)需要指定容器。AlloyLever就是這么干的： https://github.com/AlloyTeam/AlloyLever/blob/master/src/js/main.js

三國·蜀·諸葛亮《心書·兵機》：“將能執(zhí)兵之權(quá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;}";
    }
});
var todoApp = new TodoApp({ items: [] }, "#container");

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

style方法內(nèi)的樣式自會對自身生效，不會污染其他組件。可以操作對象實例option，option的變更會自動更新組件，屬性設(shè)置>方法調(diào)用。
雙向綁定的好處以前寫過一篇文章專門介紹，從上面的例子也能可出：

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

組件外部的代碼更簡潔

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

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

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

《莊子·達生》：“梓慶削木為鐻，鐻成，見者驚憂鬼神。”

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簡單穩(wěn)定，幾乎沒怎么變動，內(nèi)部是實現(xiàn)在不斷的完善，API驅(qū)動非常重要，不能因為實現(xiàn)某些API困難而做任何妥協(xié)，比如讓使用框架的著多傳個參數(shù)、多調(diào)用一次方法，這都是設(shè)計的缺陷。

Nuclear就是不妥協(xié)的結(jié)果。因為簡單的設(shè)計，所以可以有很多強大的玩法，待續(xù)...

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

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