web components 之 Custom Element
发布在web组件的探索2015年3月10日view:4543前端开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

什么是Web Component?

Web Components 包含了多种不同的技术。你可以把Web Components当做是用一系列的Web技术创建的、可重用的用户界面组件的统称。Web Components使开发人员拥有扩展浏览器标签的能力,可以自由的进行定制组件。但截至本文时间,Web Components依然是W3C工作组的一个草案,并为被正式纳入标准,但这并不妨碍我们去学习它。

Web组件

何为Web组件?Web组件相对于Web开发者来说并不陌生,Web组件是一套封装好的HTML,CSS,以及JavaScript,它最大的特点就是可复用。基本在每一个网站上我们都可以看到各式各样的组件,例如下拉菜单、按钮、图片滚播、日历控件等。慢着,既然我们已经可以实现web组件的封装,那Web Component这家伙出现的意义是什么呢?Web Component回答道:“你们的实现方式不够优雅也不够完美,还是看看我的吧”。

因为当我们使用各种编程技巧对组件进行封装时,一个无法规避的事实是,组件的内部是可被访问和影响的,例如我们对样式表进行改动时经常会担心影响到页面组件的样式。而通过Web Component封装出来的组件,我们可以选择让组件的内部隐藏起来,也就是说,组件内部是与世隔绝的!

Web Component的组成

  • Custom Elements
  • HTML Templates
  • Shadow Dom
  • HTML Imports

总的来说,Web Components包含以上四种技术,本文着重谈谈Custom Element,这也是Web component中最核心的部分。

Custom Elements

自定义元素是一个可由创建者来自定义接口的对象。在创建时我们需要通过 document.registerElement()来对自定义元素进行注册。该方法会返回一个元素的构造器,通过该构造器我们就可以创建我们的自定义元素的实例了。

var MyButton= document.registerElement('my-button');
document.body.appendChild(new MyButton());

实际上 document.registerElement(tag-name, prototype) 包含两个参数:

  1. tag-name: 自定义元素的标签名,这个标签名必须包含连字符’-’,这样做的母的是用以区分自定义元素和HTML规范的元素
  2. prototype: 这是一个可选的参数,用于描述该元素的原型,在该元素中你可以为自定义元素进行接口的定义

Demo:

var MyElement = document.registerElement('my-element', { 
    prototype: Object.create(HTMLElement.prototype, { 
        createdCallback: { 
            value: function() { 
                this.innerHTML = "<p>I'm a Custom Element</p>"
            } 
        } 
    }) 
});
document.body.appendChild(new MyElement())

在上面的例子中,我们通过Object.create()方法创建了一个继承自HTMLElement的对象作为自定义对象的原型,并设置了元素默认的 innerHTML ,如果你对Object.create()方法的第二个参数不熟悉,你最好先去查阅一下。实际上它的上面的例子跟下面给出的写法的效果是一样的:

var MyElementProto = Object.create(HTMLElement.prototype)

MyElementProto.createdCallback = function() {
    this.innerHTML = "<p>I'm a Custom Element</p>"
}

var MyElement = document.registerElement('my-element', { prototype: MyElementProto })

document.body.appendChild(new MyElement())

接着,在页面上我们可以看到渲染出如下结构: enter image description here

自定义元素的生命周期

在上面的例子中我们可以看到自定义元素的原型上有一个createdCallback 属性,它的值是一个回调函数,在自定义元素被创建的时候被调用。实际上自定义元素在它的生命周期中可能会经历以下几种变化:

  • 自定义元素在其注册前被创建
  • 自定义元素被注册
  • 自定义元素的实例在自定义元素注册后被创建
  • 自定义元素被插入到文档中
  • 自定义元素从文档中移除
  • 自定义元素的属性被创建、移除、修改

在自定义元素经历上面某些变化时,不同的回调函数会被调用。这些回调函数被保存在一个名为生命周期回调的键值对集合中。我们可实现的回调函数总共有以下4种,其中attributeChangedCallback 的回调函数中我们可以通过其参数访问到操作的属性名、老的属性值、新的属性值。

enter image description here

DOM:

<div id="modify">
  <label class="CEgreen"><input type="radio" name="CEclass" value="green">green box</label>
  <label class="CEred"><input type="radio" name="CEclass" value="red">red box</label>
</div>

JS:

var MyElement = document.registerElement('my-element', { 
  prototype: Object.create(HTMLElement.prototype, { 
    createdCallback: { 
      value: function() {
        this.innerHTML = "<span>I'm a Custom Element</span>"
      }
    },
    attributeChangedCallback: {
      value: function(property, oldValue, newValue) {
        this.innerHTML = "attribute '" + property + "' is modified to " + newValue
      }
    }
  }) 
})
document.body.appendChild(new MyElement())

var temp = document.querySelector("#modify")
var myElement = document.querySelector("my-element")

temp.addEventListener('click', function(e){
  console.log(e.target.value)
  myElement.className = e.target.value
})

enter image description here

另外,给自定义元素添加样式和普通元素是一样的,这是上面例子中为自定义元素添加的样式:

my-element {display: inline-block;margin-top: 20px;padding: 10px;font-size: 24px;}

这就是一个最基础的自定义元素的实现了。如果我们希望自定义元素内部不受外部样式的影响,我们需要使用Shadow Dom来对内部dom结构和样式进行封装。

评论
发表评论
暂无评论
PUBLISHED IN
web组件的探索

我们应该如何实现web 组件,web components是否是一种理想的方式?

友情链接 大搜车前端团队博客
我的收藏