这两天在优化环球网首页的加载速度，为了减少DOM的加载时间，我才用了webComponent的方式去分解了DOM。 简单记载下吧～ 有过angularjs开发经验的哥们，对于webComponent的
这两天在优化环球网首页的加载速度，为了减少DOM的加载时间，我才用了webComponent的方式去分解了DOM。
简单记载下吧～
有过angularjs开发经验的哥们，对于webComponent的初体验应该都和我差不多吧，这尼玛简直就是指令好不～
其实我到现在也是有这个感觉的～
言归正传，WebComponent通过一个标准化的非侵入的方式封装了一个组件，每个组件都能够组织好它自身的html结构，css样式以及ajvascript的代码，并且不受外界的影响。
其实这是非常不得了的事情，这就意味着组件化，模块化开发非常非常的犀利了有木有
说到web Component，shadow DOM也必须说下。
开发者通过shadow DOM在文档流中创建了一些完全独立于其他元素的子DOM树。由于这个特性，使我们可以封装一些具有独立功能的组件，并且可以保证不会在无意中干扰到别的DOM。shadow DOM和标准的DOM一样，可以设置它的样式，也可以用javascript来操作他的行为。主文档和基于shadow DOM创建的独立组件之间互不干扰。所以组件的复用变得异常的简单！
对于别的这些东西就不多说了，直接上代码吧，直观点
<template> <style type="text/css"> p{ margin-top: 2em; } .coloured{ background-color: blue; } </style> <p>my name is <strong class="coloured">Neal</strong></p></template><script type="text/javascript"> (function () { // 创建一个基于html元素原形的html对象 var element = Object.create(HTMLElement.prototype); // 获取template的内容 var template = document.currentScript.ownerDocument.querySelector('template').content; //定义元素被创建时候的回调 element.createdCallback = function() { // 创建 shadow root var shadowRoot = this.createShadowRoot(); // 添加一个template的clone加入shadowRoot var clone = document.importNode(template, true); shadowRoot.appendChild(clone); }; document.registerElement('neal-yang', { prototype: element }); })();</script>
而在index页面中我们需要引入这个template页面，然后在 html中直接用就可以了
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css components</title> <link href="components/templateTest.html" rel="import"> <script src='components/webcomponents.min.js'></script> <style type="text/css"> body{ padding: 4em; } </style></head><body></body><script type="text/javascript"> var body = document.body; body.appendChild(document.createElement('neal-yang'));</script></html>注意我这里还引入了webcomponent.js的插件，是为了解决浏览器兼容性的问题的。
还有这个页面的打开需要个服务器打开，不然会有CORS错误。
