• 前端JavaScript中常见设计模式

    1、为啥会有这一篇 ？

    前两天有个同学问我，然后组内同学也即将分享相关实践内容，此处 在他之前发出（早一天发布的发布会），good!

    2、是何物？

    组件化是前端非常重要的一块内容，现在流行的 React 和 Vue 都是组件框架。

    谷歌 Chrome 一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，不用加载任何外部模块，代码量小。当前发展较为成熟，在很多项目中被使用

    广受好评！

    3、基本概念早知道

    Web Components主要由三项技术组成，分别为

    • Custom elements（自定义元素）

    • Shadow DOM（影子DOM）

    • HTML templates（HTML模板）

    • 自定义元素实例

    customElements.define(
'test-custom', // name 
class TestCustom extends HTMLParagraphElement { // 这个类定义功能constructor() {super();// 功能代码...}
}, { extends: 'p' }); // 继承自哪个元素 此处 p 

    • 1
    • 2
    • 3
    • 4
    • 影子 DOM

    Shadow DOM 可将隐藏的 DOM挂到一个元素上：且 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样

    • 如下图
    • 想将一个 Shadow DOM 附加到 custom element 怎么做？
    class Button extends HTMLElement {constructor() {super();let shadow = this.attachShadow({mode: 'open'}); // 挂到 构造函数上}
} 

    • 1
    • 2
    • 操作一下 也是 ok 的
    class Button extends HTMLElement {constructor() {super();let shadow = this.attachShadow({mode: 'open'});let p = document.createElement('p');shadow.appendChild(p);}
} 

    • 1
    • 2
    • 我想添加样式 怎么办 ？
    let mySelfStyle = document.createElement('style');

mySelfStyle.textContent = `.btn-container {position: relative;}.btn {// ...}
`

shadow.appendChild(mySelfStyle); 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • good !* HTML模版* 类似于 html 结构 和 vue slot```

    ```

    4、磨拳擦掌，怎么使用 ？

    1.创建一个类或函数来指定 web 组件的功能，如果使用类，请使用 ECMAScript 2015 的类语法 (参阅类获取更多信息)。
    2.使用 CustomElementRegistry.define() 方法注册您的新自定义元素，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
    3.如果需要的话，使用Element.attachShadow() 方法将一个 shadow DOM 附加到自定义元素上。使用通常的 DOM 方法向 shadow DOM 中添加子元素、事件监听器等等。
    4.如果需要的话，使用