注册自定义元素，组件化渲染

前述

从H5开始多了一些header、footer 、article这种标签,这种标签与div 没什么什么差异性,只是它更具有语义性,你看到它的标签名称就能知道这标签是干嘛的.

那web页面语义化对于文档HTML标签的可阅读性和维护性都有提高。那么我们的组件是否也需要语义化了。

 

例如下面这样:

从下面的代码,基本上知道这是一个grid的组件,它共有四列,三个单元格是属性字段列,一个单元格是操作列.

 

渲染后的效果:

 

 

自定义元素标签

浏览器为了区分系统元素与自定义元素区别:通常定义一个自定义元素名是这样的：x（前缀）-tagname(标签名)  例如: me-grid 

正确创建:var grid=document.createElement('me-grid');grid.__proto__ ==HTMLElement.prototype 的原型

错误创建:var grid=document.createElement('grid');grid.__proto__ ==HTMLUnknownElement.prototype 的原型，一个未知的元素

 

那除了创建自定义元素，那我们想要自定义元素也实现与系统元素一样的功能。那就要了解一下自定义元素几个生命周期的事件。

 1.createdCallback使用 document.createElement('自定义元素')  会触发

 2.attachedCallback 插入到body中会触发

 3.detachedCallback从body中移除会触发

 4.attributeChangedCallback(attrName, oldVal, newVal)添加，移除，或修改一个属性 会触发

 

了解这几个生命周期后，那我们也就知道如何利用这些事件去实现一些东西了。后面会给大家一个完整例子

下面是一个注册元素函数例子：

 

 

组件化

组件化对于一个项目来说，是相当重要，特别现在很多框架都慢慢注重组件化，例如连VUE这种最先只是为了解决M到V框架，也发展成M-C(components )-V这样的一个过程.接下来进入正题，其实组件化我在之前也发过几篇这样的文章.这里我就不细讲了，有兴趣的可以去看看之前的文章

 

组件-固明思义它是一个综合体,它有属性--方法-事件（与开发人员之间的交互）-数据源（与用户之间的交互)-生命周期

数据源：最终是要呈现在页面给用户去看的,去交互的

事件:要监听用户的一切行为，然后由开发人员去完成这些行为的分析和业务开发。

 

组件的应用方式

今天讲的是自定义元素,通过设置元素的属性自动化实例组件和传统的手动利用JS去实例一个组件。

自动化实例组件：利用了自定义元素的attachedCallback 事件,当元素插入到body文档中。那么这个事件触发的时候，我把这个元素实例化成一个组件

 

 

那么我们通常写一个组件，一个组件的数据源，即要满足本地数据，又要满足远程数据。那么自定义元素组件化也一样。即要满足元素语义化渲染，也要满足传统JS实例的方式.(图1.第二个grid div)

 

最后看一下自定义元素事件监听写法和传统的JS手动实例组件。从代码上面来看，自定义元素的代码更简单明了

 

 

示例代码：

Log

Grid 自定义元素，自动实例化组件

 

Grid2 手动实例化组件