webCpmponent

传统的组件开发：

代码由四部分构成：

1. 引入CSS组件样式部分
   
2. JS组件封装逻辑部分
   
3. HTML组件模板代码
   
4. JS组件创建脚本代码
   

新一代开发：

vue、react等框架都是在webCpmponent上引申出来的。
代码由两部分组成：

1. 引入html组件源文件
   
2. 使用标签webCpmponent的组件
   

实现一个自定义组件：

在一个标准的html文件中引入并使用webCpmponent组件:

webCpmponent组件：

在webCpmponent.html组件中，代码同样两部分，和。
其中，内书写CSS样式和html模板。
而内是一段标准的Cpmponent代码。

在浏览器打开文件后，会提示文件加载跨域的错误，解决办法：打开命令行，切换到浏览器的安装目录，运行命令：

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe --disable-web-security --user-data-dir

实现组件流程：

1. template组件html模板：
2. 创建闭包：
3. 基于HTML Element原型创建对象：
4. 设置生命周期对调函数：
5. 创建影子根对象
6. 注册webcomponent标准组件。

X-Tag:

可以手动封装一个X-Tag库。

扩展：

假如有一个需求，需要创建10万个div:

for(var i = 0;i<100000;i++){
    var d = document.createElement("div");
    document.body.appendChild(d);
}
//  可以改下面这样：性能是N倍（避免重绘操作）
    //  先创建一个临时缓存区：
    var f = document.createDocumentFragment();
    for(var i = 0;i<100000;i++){
    var d = document.createElement("div");
    //  将创建的dom节点加到缓存区
    f.appendChild(d);
    }
    //最终循环完毕，在一次放入document.body中
    document.body.appendChild(f);