前言

 最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得到的结果是:"资料99%是英语无所谓,最重要是UI/UX上符合要求,技术的事你说了算。",于是我只好乖乖地去学UI/UX设计的事,木有设计师撑腰的前端是苦逼的:(嘈吐一地后,还是挤点时间总结一下WebComponent的内容吧,为以后作培训材料作点准备。

浮在水面上的痛

组件噪音太多了!

 在使用Bootstrap的Modal组件时,我们不免要Ctrl+c然后Ctrl+v下面一堆代码

  1. <div class="modal fade" tabindex="-1" role="dialog">
  2. <div class="modal-dialog" role="document">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  6. <h4 class="modal-title">Modal title</h4>
  7. </div>
  8. <div class="modal-body">
  9. <p>One fine body&hellip;</p>
  10. </div>
  11. <div class="modal-footer">
  12. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  13. <button type="button" class="btn btn-primary">Save changes</button>
  14. </div>
  15. </div><!-- /.modal-content -->
  16. </div><!-- /.modal-dialog -->
  17. </div><!-- /.modal -->



 一个不留神误删了一个结束标签,或拼错了某个class或属性那就悲催了,此时一个语法高亮、提供语法检查的编辑器是如此重要啊!但是我其实只想配置个Modal而已。

 由于元素信息由标签标识符,元素特性树层级结构组成,所以排除噪音后提取的核心配置信息应该如下(YAML语法描述):

  1. dialog:
  2. modal: true
  3. children:
  4. header:
  5. title: Modal title
  6. closable: true
  7. body:
  8. children:
  9. p:
  10. textContent: One fine body&hellip;
  11. footer
  12. children:
  13. button:
  14. type: close
  15. textContent: Close
  16. button:
  17. type: submit
  18. textContent: Save changes

转换成HTML就是

  1. <dialog modal>
  2. <dialog-header title="Modal title" closable></dialog-header>
  3. <dialog-body>
  4. <p>One fine body&hellip;</p>
  5. </dialog-body>
  6. <dialog-footer>
  7. <dialog-btn type="close">Close</dialog-btn>
  8. <dialog-btn type="submit">Save changes</dialog-btn>
  9. </dialog-footer>
  10. </dialog>

而像Alert甚至可以极致到这样

  1. <alert>是不是很简单啊?</alert>

可惜浏览器木有提供<alert></alert>,那怎么办呢?

手打牛丸模式1

既然浏览器木有提供,那我们自己手写一个吧!

  1. <script>
  2. 'use strict'
  3. class Alert{
  4. constructor(el = document.createElement('ALERT')){
  5. this.el = el
  6. const raw = el.innerHTML
  7. el.dataset.resolved = ''
  8. el.innerHTML = `<div class="alert alert-warning alert-dismissible fade in">
  9. <button type="button" class="close" aria-label="Close">
  10. <span aria-hidden="true">&times;</span>
  11. </button>
  12. ${raw}
  13. </div>`
  14. el.querySelector('button.close').addEventListener('click', _ => this.close())
  15. }
  16. close(){
  17. this.el.style.display = 'none'
  18. }
  19. show(){
  20. this.el.style.display = 'block'
  21. }
  22. }
  23. function registerElement(tagName, ctorFactory){
  24. [...document.querySelectorAll(`${tagName}:not([data-resolved])`)].forEach(ctorFactory)
  25. }
  26. function registerElements(ctorFactories){
  27. for(let k in ctorFactories){
  28. registerElement(k, ctorFactories[k])
  29. }
  30. }

清爽一下!

  1. <alert>舒爽多了!</alert>
  2. <script>
  3. registerElements({alert: el => new Alert(el)})
  4. </script>

复盘找问题

 虽然表面上实现了需求,但存在2个明显的缺陷

  1. 不完整的元素实例化方式

    原生元素有2种实例化方式

    a. 声明式
  1. <!-- 由浏览器自动完成 元素实例化 和 添加到DOM树 两个步骤 -->
  2. <input type="text">

b. 命令式

  1. // 元素实例化
  2. const input = new HTMLInputElement() // 或者 document.createElement('INPUT')
  3. input.type = 'text'
  4. // 添加到DOM树
  5. document.querySelector('#mount-node').appendChild(input)

 由于声明式注重What to do,而命令式注重How to do,并且我们操作的是DOM,所以采用声明式的HTML标签比命令式的JavaScript会来得简洁平滑。但当我们需要动态实例化元素时,命令式则是最佳的选择。于是我们勉强可以这样

  1. // 元素实例化
  2. const myAlert = new Alert()
  3. // 添加到DOM树
  4. document.querySelector('#mount-node').appendChild(myAlert.el)
  5. /*
  6. 由于Alert无法正常实现HTMLElement和Node接口,因此无法实现
  7. document.querySelector('#mount-node').appendChild(myAlert)
  8. myAlert和myAlert.el的差别在于前者的myAlert是元素本身,而后者则是元素句柄,其实没有明确哪种更好,只是原生方法都是支持操作元素本身,一下来个不一致的句柄不蒙才怪了
  9. */

 即使你能忍受上述的代码,那通过innerHTML实现半声明式的动态元素实例化,那又怎么玩呢?是再手动调用一下registerElement('alert', el => new Alert(el))吗?

 更别想通过document.createElement来创建自定义元素了。

2. 有生命无周期

 元素的生命从实例化那刻开始,然后经历如添加到DOM树、从DOM树移除等阶段,而想要更全面有效地管理元素的话,那么捕获各阶段并完成相应的处理则是唯一有效的途径了。

生命周期很重要

 当定义一个新元素时,有3件事件是必须考虑的:

  1. 元素自闭合: 元素自身信息的自包含,并且不受外部上下文环境的影响;
  2. 元素的生命周期: 通过监控元素的生命周期,从而实现不同阶段完成不同任务的目录;
  3. 元素间的数据交换: 采用property in, event out的方式与外部上下文环境通信,从而与其他元素进行通信。

     元素自闭合貌似无望了,下面我们试试监听元素的生命周期吧!

手打牛丸模式2

 通过constructor我们能监听元素的创建阶段,但后续的各个阶段呢?可幸的是可以通过MutationObserver监听document.body来实现:)

最终得到的如下版本:

  1. 'use strict'
  2. class Alert{
  3. constructor(el = document.createElement('ALERT')){
  4. this.el = el
  5. this.el.fireConnected = () => { this.connectedCallback && this.connectedCallback() }
  6. this.el.fireDisconnected = () => { this.disconnectedCallback && this.disconnectedCallback() }
  7. this.el.fireAttributeChanged = (attrName, oldVal, newVal) => { this.attributeChangedCallback && this.attributeChangedCallback(attrName, oldVal, newVal) }
  8. const raw = el.innerHTML
  9. el.dataset.resolved = ''
  10. el.innerHTML = `<div class="alert alert-warning alert-dismissible fade in">
  11. <button type="button" class="close" aria-label="Close">
  12. <span aria-hidden="true">&times;</span>
  13. </button>
  14. ${raw}
  15. </div>`
  16. el.querySelector('button.close').addEventListener('click', _ => this.close())
  17. }
  18. close(){
  19. this.el.style.display = 'none'
  20. }
  21. show(){
  22. this.el.style.display = 'block'
  23. }
  24. connectedCallback(){
  25. console.log('connectedCallback')
  26. }
  27. disconnectedCallback(){
  28. console.log('disconnectedCallback')
  29. }
  30. attributeChangedCallback(attrName, oldVal, newVal){
  31. console.log('attributeChangedCallback')
  32. }
  33. }
  34. function registerElement(tagName, ctorFactory){
  35. [...document.querySelectorAll(`${tagName}:not([data-resolved])`)].forEach(ctorFactory)
  36. }
  37. function registerElements(ctorFactories){
  38. for(let k in ctorFactories){
  39. registerElement(k, ctorFactories[k])
  40. }
  41. }
  42. const observer = new MutationObserver(records => {
  43. records.forEach(record => {
  44. if (record.addedNodes.length && record.target.hasAttribute('data-resolved')){
  45. // connected
  46. record.target.fireConnected()
  47. }
  48. else if (record.removedNodes.length){
  49. // disconnected
  50. const node = [...record.removedNodes].find(node => node.hasAttribute('data-resolved'))
  51. node && node.fireDisconnected()
  52. }
  53. else if ('attributes' === record.type && record.target.hasAttribute('data-resolved')){
  54. // attribute changed
  55. record.target.fireAttributeChanged(record.attributeName, record.oldValue, record.target.getAttribute(record.attributeName))
  56. }
  57. })
  58. })
  59. observer.observe(document.body, {attributes: true, childList: true, subtree: true})
  60. registerElement('alert', el => new Alert(el))

总结

 千辛万苦撸了个基本不可用的自定义元素模式,但通过代码我们进一步了解到对于自定义元素我们需要以下基本特性:

  1. 自定义元素可通过原有的方式实例化(<custom-element></custom-element>,new CustomElement()document.createElement('CUSTOM-ELEMENT'))
  2. 可通过原有的方法操作自定义元素实例(如document.body.appendChild等)
  3. 能监听元素的生命周期

    下一篇《WebComponent魔法堂:深究Custom Element 之 标准构建》中,我们将一同探究H5标准中Custom Element API,并利用它来实现满足上述特性的自定义元素:)

     尊重原创,转载请注明来自: http://www.cnblogs.com/fsjohnhuang/p/5918677.html _肥仔John

感谢

Custom ELement

Custom ELement v1

MutationObserver

WebComponent魔法堂:深究Custom Element 之 面向痛点编程的更多相关文章

  1. WebComponent魔法堂:深究Custom Element 之 标准构建

    前言  通过<WebComponent魔法堂:深究Custom Element 之 面向痛点编程>,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定 ...

  2. WebComponent魔法堂:深究Custom Element 之 从过去看现在

    前言  说起Custom Element那必然会想起那个相似而又以失败告终的HTML Component.HTML Component是在IE5开始引入的新技术,用于对原生元素作功能"增强& ...

  3. CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

  4. JS魔法堂:属性、特性,傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  5. CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

    前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发 ...

  6. CSS魔法堂:小结一下Box Model与Positioning Scheme

    前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.B ...

  7. HTML5魔法堂:全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  8. CSS魔法堂:Absolute Positioning就这个样

    前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还有各种神秘的力量左右着它的来去,于是我们 ...

  9. CSS魔法堂:你真的懂text-align吗?

    前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...

随机推荐

  1. ZKWeb网页框架1.2正式发布

    发行日志 https://github.com/zkweb-framework/ZKWeb/blob/master/ReleaseNotes/ReleaseNote.1.2.md 主要改动 更新 ZK ...

  2. AI人工智能系列随笔

    初探 AI人工智能系列随笔:syntaxnet 初探(1)

  3. Jquery(1)

    鼠标点击事件: <input type="button" value="测试" onclick="test()" /> < ...

  4. [开发笔记]GCC 分支预测优化

    #define likely(x) __builtin_expect(!!(x),1)#define unlikely(x) __builtin_expect(!!(x),0) 用于优化在做分支判断的 ...

  5. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  6. ThinkPHP 模板substr的截取字符串函数

    ThinkPHP 模板substr的截取字符串函数在Common/function.php加上以下代码 /** ** 截取中文字符串 **/ function msubstr($str, $start ...

  7. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  8. 使用nginx反向代理,一个80端口下,配置多个微信项目

    我们要接入微信公众号平台开发,需要填写服务器配置,然后依据接口文档才能实现业务逻辑.但是微信公众号接口只支持80接口(80端口).我们因业务需求需要在一个公众号域名下面,发布两个需要微信授权的项目,怎 ...

  9. 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令(2)

    今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...

  10. 保护ASP.NET 应用免受 CSRF 攻击

    CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/ ...