摘要：目前來(lái)看，團(tuán)隊(duì)內(nèi)部前端項(xiàng)目已全面實(shí)施組件化開發(fā)。層疊樣式保佑不要污染別的在前端，一般一個(gè)組件必須要有骨架和裝飾的以及邏輯。事件綁定條件判斷秒后改變，會(huì)自動(dòng)變更。循環(huán)姓名年齡增加修改移除的變更也能監(jiān)聽到，能夠自動(dòng)觸發(fā)的變更。

目前來(lái)看，團(tuán)隊(duì)內(nèi)部前端項(xiàng)目已全面實(shí)施組件化開發(fā)。組件化的好處太多，如：按需加載、可復(fù)用、易維護(hù)、可擴(kuò)展、少挖坑、不改組件代碼直接切成服務(wù)器端渲染（如Nuclear組件化可以做到，大家叫同構(gòu))...
怎么做到這么強(qiáng)大的優(yōu)勢(shì)，來(lái)回憶下以前見過的坑，或者現(xiàn)有項(xiàng)目里的坑。

在web前端，一般一個(gè)組件必須要有骨架HTML和裝飾的CSS以及JS邏輯。而CSS要是可以是局部作用域那就再好不過了！就不用寫長(zhǎng)長(zhǎng)的前綴了，浪費(fèi)帶寬不說，而且費(fèi)勁。
如

.ui-popup-arrow-xx-xxxxx-xxxx-container {

}

這回夠長(zhǎng)了吧，不會(huì)污染別的HTML了吧。真的太長(zhǎng)了,沒有辦法，因?yàn)镃SS不是局部的，怕污染其他的HTML，規(guī)劃好長(zhǎng)長(zhǎng)的namespace、module是以前的最佳實(shí)踐。

如果HTML綁定的事件是局部作用域那就再好不過了！我真的見過模版代碼里出現(xiàn)下面的代碼：

然后在js里找到了下面的代碼：

要綁定的事件一多，得污染多少全局變量啊。所以還有的工程師這么干：

然后在js里找到了下面的代碼：

這里貌似比不設(shè)定namespace好很多，但是還是妥協(xié)的結(jié)果。一般希望能封裝成組件，組件的HTML里綁定的事件就是組件內(nèi)定義的事件，內(nèi)聚內(nèi)聚！！
通過js動(dòng)態(tài)綁定事件的壞處我以前專門寫了一篇文章來(lái)闡述，主要是lazy bind會(huì)導(dǎo)致用戶看到了頁(yè)面，但是頁(yè)面確無(wú)法響應(yīng)用戶的交互，這里不再闡述。

大型項(xiàng)目如游戲什么的為啥都是面向?qū)ο笫降膶懛?？如果一個(gè)組件剛好又能是一個(gè)Class那就再好不過，Class base可以更方便地抽象現(xiàn)實(shí)世界的物體及其屬性或者邏輯算法，所以甚至有些編程語(yǔ)言都是面向?qū)ο蟮?這里逆向邏輯)，如JAVA、C#...整體過程式的代碼對(duì)于大型項(xiàng)目幾乎沒法維護(hù)（如基于jQuery就能容易寫出整體都是過程式的組織結(jié)構(gòu)），整體OO，局部過程式是可以接受的。

扁平無(wú)嵌套組件還是比較簡(jiǎn)單，對(duì)模板的字符串處理下，把綁定的事件全指向組件自身定義的方法，生命周期也好處理。在真正的業(yè)務(wù)里經(jīng)常需要組件嵌套，這樣也更利于復(fù)用。雖然大量模板引擎支持引用子模板、共享數(shù)據(jù)等，但是組件是有生命周期的，模板嵌套不能真正解決組件嵌套的問題。能支持組件嵌套并且聲明式嵌套就那就再好不過了！

怎么替換？先查找dom？什么？你還在查找dom？你還在背誦CSS選擇器？替換一下？不能增量更新嗎？或者diff一下吧？不要每次全部替換?。?/p> 首屏太慢？以前抽象的組件沒法復(fù)用？

什么？首屏太慢？改成直出（服務(wù)器渲染）？以前代碼沒法復(fù)用？要推翻重寫？什么？怎么搞？排期？產(chǎn)品不給排期？需求沒變?yōu)槭裁匆o排期？

下面來(lái)看下Nuclear怎么解決上面問題。

npm install alloynuclear

var HelloNuclear = Nuclear.create({
    render: function () {
        return "
Hello , {{name}} !
";
    }
})

new HelloNuclear({ name: "Nuclear" }, "body");

內(nèi)置了mustache.js無(wú)邏輯模板。

var EventDemo = Nuclear.create({
    clickHandler: function (evt, target, other1,other2) {
        //MouseEvent {isTrusted: true, screenX: 51, screenY: 87, clientX: 51, clientY: 21…}
        console.log(evt);
        //
Click Me!
        console.log(target);
        //otherParameter1
        console.log(other1);
        //otherParameter2
        console.log(other2);

        alert("Hello Nuclear!");
    },
    render: function () {
        return "
Click Me!
"
    }
})

new EventDemo({ seen: true }, "body");

var ConditionDemo = Nuclear.create({
    render: function () {
        return "{{#seen}}
                    

                        you can see me
                    
                {{/seen}}
                {{^seen}}
                    

                        yan can not see me
                    
                {{/seen}}"
    }
})

var cd = new ConditionDemo({ seen: true }, "body");

setTimeout(function () {
    cd.option.seen = false;
}, 2000);

2秒后改變seen，dom會(huì)自動(dòng)變更。

var LoopDemo = Nuclear.create({
    render: function () {
        return "
{{#list}}
姓名:{{name}} 年齡:{{age}}
{{/list}}
"
    }
})

var ld = new LoopDemo({
    list: [
        { name: "dntzhang", age: 18 },
        { name: "vorshen", age: 17 }
    ]
}, "body");

setTimeout(function () {
    //增加
    ld.option.list.push({ name: "lisi", age: 38 });
}, 1000);

setTimeout(function () {
    //修改
    ld.option.list[0].age = 19;
}, 2000);

setTimeout(function () {
    //移除
    ld.option.list.splice(0, 1);
}, 3000);

Array的變更也能監(jiān)聽到，能夠自動(dòng)觸發(fā)Dom的變更。

    
I"m other div!! my color is not red!!

    

    

組件外的div不會(huì)被組件內(nèi)的CSS污染。

討厭反斜杠可以使用 ES20XX template literals、或者split to js、css和html文件然后通過構(gòu)建組裝使用。也可以用template標(biāo)簽或者textare存放模板。

通過在父對(duì)象的install里設(shè)置this.childrenOptions來(lái)把option傳給子節(jié)點(diǎn)。

function todo(Nuclear,server) {
    var Todo = 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;}`;
        }
    },{
        server:server
    });
    return Todo;
}

if ( typeof module === "object" && typeof module.exports === "object" ) {
    module.exports =  todo ;
} else {
    this.todo = todo;
}

通過第二個(gè)參數(shù)server來(lái)決定是服務(wù)器端渲染還是客戶端渲染。server使用的代碼也很簡(jiǎn)單：

var koa = require("koa");
var serve = require("koa-static");
var router = require("koa-route");
var app = koa();
var jsdom = require("jsdom");
var Nuclear = require("alloynuclear")(jsdom.jsdom().defaultView);

var Todo = require("./component/todo")(Nuclear,true);



app.use(serve(__dirname + "/component"));

app.use(router.get("/todos", function *(){
    var  str = require("fs").readFileSync(__dirname + "/view/index.html", "utf8");
    var todo = new Todo({ items: ["Nuclear2","koa","ejs"] });
    this.body = Nuclear.Tpl.render(str, {
        todo:  todo.HTML
    }); 
    Nuclear.destroy(todo);
}));


app.listen(3000);

瀏覽器端使用的代碼：

 {{{todo}}}

 
 
 

這樣，組件的代碼不需要任何變更就可以在server和client同時(shí)使用。

內(nèi)置三條管線如下所示：

比如一般前后端分離的開發(fā)方式，僅僅會(huì)走中間那條管線。而同構(gòu)的管線如下所示：

這里前后后端會(huì)共用option，所以不僅僅需要直出HTML,option也會(huì)一并支持給前端用來(lái)二次渲染初始一些東西。

1.節(jié)約流量
2.提升用戶體驗(yàn)
3.加載更加靈活
4.Dom查找?guī)缀踅^跡
5.搭積木一樣寫頁(yè)面
6.提升代碼復(fù)用性
7.可插拔的模板引擎
8.Lazy CSS首屏更輕松
9.Nuclear文件大小6KB (gzip)
10.零行代碼修改無(wú)縫切到同構(gòu)直出
...
...

https://github.com/AlloyTeam/Nuclear