漫谈Nuclear Web组件化入门篇

摘要：目前来看，团队内部前端项目已全面实施组件化开发。层叠样式保佑不要污染别的在前端，一般一个组件必须要有骨架和装饰的以及逻辑。事件绑定条件判断秒后改变，会自动变更。循环姓名年龄增加修改移除的变更也能监听到，能够自动触发的变更。

目前来看，团队内部前端项目已全面实施组件化开发。组件化的好处太多，如：按需加载、可复用、易维护、可扩展、少挖坑、不改组件代码直接切成服务器端渲染（如Nuclear组件化可以做到，大家叫同构)...
怎么做到这么强大的优势，来回忆下以前见过的坑，或者现有项目里的坑。

在web前端，一般一个组件必须要有骨架HTML和装饰的CSS以及JS逻辑。而CSS要是可以是局部作用域那就再好不过了！就不用写长长的前缀了，浪费带宽不说，而且费劲。
如

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

}

这回够长了吧，不会污染别的HTML了吧。真的太长了,没有办法，因为CSS不是局部的，怕污染其他的HTML，规划好长长的namespace、module是以前的最佳实践。

如果HTML绑定的事件是局部作用域那就再好不过了！我真的见过模版代码里出现下面的代码：

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

要绑定的事件一多，得污染多少全局变量啊。所以还有的工程师这么干：

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

这里貌似比不设定namespace好很多，但是还是妥协的结果。一般希望能封装成组件，组件的HTML里绑定的事件就是组件内定义的事件，内聚内聚！！
通过js动态绑定事件的坏处我以前专门写了一篇文章来阐述，主要是lazy bind会导致用户看到了页面，但是页面确无法响应用户的交互，这里不再阐述。

大型项目如游戏什么的为啥都是面向对象式的写法？如果一个组件刚好又能是一个Class那就再好不过，Class base可以更方便地抽象现实世界的物体及其属性或者逻辑算法，所以甚至有些编程语言都是面向对象的(这里逆向逻辑)，如JAVA、C#...整体过程式的代码对于大型项目几乎没法维护（如基于jQuery就能容易写出整体都是过程式的组织结构），整体OO，局部过程式是可以接受的。

扁平无嵌套组件还是比较简单，对模板的字符串处理下，把绑定的事件全指向组件自身定义的方法，生命周期也好处理。在真正的业务里经常需要组件嵌套，这样也更利于复用。虽然大量模板引擎支持引用子模板、共享数据等，但是组件是有生命周期的，模板嵌套不能真正解决组件嵌套的问题。能支持组件嵌套并且声明式嵌套就那就再好不过了！

怎么替换？先查找dom？什么？你还在查找dom？你还在背诵CSS选择器？替换一下？不能增量更新吗？或者diff一下吧？不要每次全部替换啊！

什么？首屏太慢？改成直出（服务器渲染）？以前代码没法复用？要推翻重写？什么？怎么搞？排期？产品不给排期？需求没变为什么要给排期？

下面来看下Nuclear怎么解决上面问题。

npm install alloynuclear

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

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

内置了mustache.js无逻辑模板。

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会自动变更。

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的变更也能监听到，能够自动触发Dom的变更。

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

    

    

组件外的div不会被组件内的CSS污染。

讨厌反斜杠可以使用 ES20XX template literals、或者split to js、css和html文件然后通过构建组装使用。也可以用template标签或者textare存放模板。

通过在父对象的install里设置this.childrenOptions来把option传给子节点。

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;
}

通过第二个参数server来决定是服务器端渲染还是客户端渲染。server使用的代码也很简单：

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同时使用。

内置三条管线如下所示：

比如一般前后端分离的开发方式，仅仅会走中间那条管线。而同构的管线如下所示：

这里前后后端会共用option，所以不仅仅需要直出HTML,option也会一并支持给前端用来二次渲染初始一些东西。

1.节约流量
2.提升用户体验
3.加载更加灵活
4.Dom查找几乎绝迹
5.搭积木一样写页面
6.提升代码复用性
7.可插拔的模板引擎
8.Lazy CSS首屏更轻松
9.Nuclear文件大小6KB (gzip)
10.零行代码修改无缝切到同构直出
...
...

https://github.com/AlloyTeam/Nuclear