web Components 学习之路

就目前而言，纯粹的Web Components在兼容性方面还有着较为长远的路，这里做个记录总结，以纪念自己最近关于Web Components的学习道路。

参考教材

　　Web Components由HTML Import、Template、Custom Element、Shadow DOM四种技术规范。上面的三个文件，是我这次学习的主要参考，其中前两个教材引领我入门，学习了HTML import、Template、shadowDOM以及custom Element的相关知识;而第三个github上的资源则是一个比较完善的综合使用web Components实现的一个小例子。这里,最后，我也会给出自己学习制作的一个弹层的组件小例子。

HTML Import

  1. 作用:HTML Import将外部的html引入,引入的文档全局有效。其用途有二:一是将整个项目所有的公共的css和js引用都放在一个html页面里,需要时直接引用这个html文档即可;二是将写好的组件放入一个html文档中，需要时直接引用这个html文档;

  2. 用法: 被引用html页面不需要操作,引用页面需要加入link标签 <link rel="import" href="xxx.html" />这时被引入的文档内容只会被主文档存储起来，不会显示在页面中，需要手动添加到DOM结构中。

  3. 将被引用文档内容添加到DOM结构中，需要先获取其link值的import,再通过其获得对应子文档的DOM结构，将其引入。格式如下:


//子文档 importSub.html
<h1>hello world!</h1>

//主文档 importMain.html
<head lang="en">
    <link rel="import" href="importSub.html"/>
</head>
<body>
<script>
//获取到子文档在本文档对应的引用——即子文档在本文档的"代言人";
var s = document.querySelector('link[rel="import"]').import;
//获取子文档要被插入的DOM;
var t = s.querySelector('h1');
//插入到主文档中;
document.body.appendChild(t);
</script>
</body>

Template模板

  1. template里可以存放html,css,js;

  2. template本身及其内部的css、js、html不会被浏览器加载的,包括其中的格式;

  3. 引入的时候先获取到模板,再复制模板的content,将其插入dom结构中;模板的作用在于可重用,每次的使用都需要复制模板的content，插入DOM中;模板的复制可以采用cloneNode,也可以采用importNode,推荐importNode;格式为var x=document.importNode(content,true)或者var x = content.cloneNode(true)

  4. 移除模板 document.querySelector('template').remove();

  5. Template模板所定义的css样式和js可被外界干扰，封装性不好,通常多与shadowDOM组合;

格式


<div class="container"></div>
<template>
    <style>
        span{color:red;}
    </style>
    <span>hello</span>
    <script>
        console.log(1);
    </script>
</template>
<script>
//通过模板选择器获取到模板，再选择其内容;
    var m = document.querySelector('template').content;
//两种克隆模板内容的方法
    var s = document.importNode(m,true);
//    var s = document.importNode(m,true);
//将克隆结果插入到dom结构中;
    document.querySelector('.container').appendChild(s);
</script>
</body>
</html>

shadowDOM

  1. shadowDOM,形成一个封闭的空间;将内部的html、css、js与外部隔离，不受干扰。其中,DOM结构中的元素是代言人,被爬虫爬取，而shadowDOM则是真正的DOM，用于展示内容,不会被爬取。多与template组合使用，使template内的css、js不受外界干扰。

  2. shadowDOM内的模板可以通过:host{}来修改其外部容器的css样式,在外部也可以通过选择器::shadow 选择器击穿修改shadowDOM内的css样式; 优先级依照元素选择器的优先级进行比较,来决定是否能够修改template内部的样式;

  3. 格式

// 给class为container的div创建一个shadowDOM;
var shadow = document.querySelector('.container').createShadowRoot();
// 获取模板内容
var content = document.querySelector('template').content;
//将模板内容插入到shadowDOM中;
shadow.appendChild(content);

customElement

  1. 作用: customElement允许我们定制独有的HTMLElement元素;

  2. 生命周期:customElement在其生命周期内提供了四个回调函数createdCallback、attachedCallback、attributeChangedCallback和detachedCallback;

  3. 格式


//创建一个自定义DOM元素，继承自HTML.prototype;
var MyButton = Object.create(HTMLElement.prototype);
//增加自定义方法
MyButton.say = function(){
    console.log('hello');
};
//增加生命周期方法
MyButton.createdCallback = function(){
   this.innerHTML = 'hello,I\'m customElement!'
}
//将创建的DOM元素注册到DOM结构;这里的注册名字必须是带 '-'的写法;返回一个构造函数;

var myButton = document.registerElement('my-button',{
   prototype:MyButton,
   extends:'div',
//不加extends属性则为 <my-button></my-button>格式,加extends则为<div is="my-button"></div>格式
});
//接下来可以什么也不写,直接在页面中创建<div is="my-button"></div>;也可以执行下面的方法,自动添加;

var meButton =new myButton();
document.body.appendChild(meButton);

//获取加入的me-button
var s = document.querySelector('div[is="me-button"]');
s.say();        //output:hello;

总结

　　我理解的Web Components开发组件是customElement做外壳，在其中建立shadowDOM,将模板放到shadowDOM中,形成一个html页面，使用时通过HTML Import引入。

　　学习Web Components碰到最多问题是事件方面,很多问题都是由于真正的DOM结构里没有对应的元素，可以在元素被插入到DOM结构中再绑定事件,引以为戒！

　　在学习web Components的时候，想像着自己封装的一个个组件，将整个页面通过组件像"搭积木"一样搭起来，挺有意思!

　　实例源码

　　我的博客

posted @ 2016-04-29 18:01  六石  阅读(2929)  评论(0)  编辑  收藏  举报