咬文嚼字vue系列(一)

1.基础知识

• AMP，CMP，UMP的由来

AMD是RequireJS在推广过程中对模块定义的规范化产出，AMD是异步加载模块，推崇依赖前置。

CMD是SeaJS在推广过程中对模块定义的规范化产出，对于模块的依赖，CMD是延迟执行，推崇依赖就近。

UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先，异步加载；CommonJS是服务器优先，同步加载。

• dom模板与字符串模板

HTML模板(dom模板)：直接在HTML页面挂载的模板,就是原先写在页面上的，能被浏览器识别的HTML结构，会在一加载就被浏览器渲染，然后js获取dom节点的内容， 形成dom模板。（即非字符串模板）
字符串模板：可能原先放在服务器上的，script标签或者js的字符串里，原先不参与页面渲染的一串字符。

• Web Components 

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。Web Components旨在解决这些问题 — 它由三项主要技术组成（Custom elements（自定义元素）Shadow DOM（影子DOM）HTML templates（HTML模板）），它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

Custom elements

它使开发者能够将HTML页面的功能封装为自定义元，其中生成的元素存在一些可操作性的生命周期:connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallback等。

代码地址

Shadow DOM

Shadow DOM接口是关键所在，它可以将一个隐藏的、独立的DOM添加到一个元素上。

需要了解的 Shadow DOM相关技术：

• Shadow host： 一个常规 DOM节点，Shadow DOM会被添加到这个节点上。
• Shadow tree：Shadow DOM内部的DOM树。
• Shadow boundary：Shadow DOM结束的地方，也是常规 DOM开始的地方。
• Shadow root: Shadow tree的根节点。

代码实现

HTML templates

 此元素及其内容不会在DOM中呈现，但仍可使用JavaScript去引用它。

slot

槽，用于向HTML片段中插入一些文本。

代码实现

参考文献

1.https://www.cnblogs.com/humin/p/5389901.html

2.https://blog.csdn.net/weixin_34238642/article/details/88831810

3.https://developer.mozilla.org/zh-CN/docs/Web/Web_Components