什么是组件化?
对内高内聚,对外低耦合。
对内各个元素彼此紧密结合、相互依赖,对外和其他组件的联系最少且接口简单。
阻碍前端组件化的因素有哪些?
- CSS是影响全局的。渲染引擎会将所有的 CSS 内容解析为 CSSOM,在生成布局树的时候,会在 CSSOM 中为布局树中的元素查找样式,所以有两个相同标签最终所显示出来的效果是一样的
- DOM 也是阻碍组件化的一个因素,因为在页面中只有一个 DOM,任何地方都可以直接读取和修改 DOM
JavaScript有自己的函数级作用域和块级作用域,所以封装内部状态数据并提供接口给外部都是没有问题的,但是一旦遇上 CSS 和 DOM,那么就相当难办了
WebComponent是如何解决的?
它提供了对局部视图封装能力,可以让 DOM、CSSOM 和 JavaScript 运行在局部环境中,这样就使得局部的 CSS 和 DOM 不会影响到全局。
WebComponent 是一套技术的组合,具体涉及到了Customelements(自定义元素)、Shadow DOM(影子 DOM)和HTML templates(HTML模板)
如何使用 WebComponent?
-
使用 template 属性来创建模板, DOM 树中的 template 节点不会出现在布局树中,所以我们可以使用 template 来自定义一些基础的元素结构
-
创建一个 GeekBang 的类,在该类的构造函数中要完成三件事:
- 查找模板内容
- 创建影子 DOM
- 再将模板添加到影子 DOM 上
-
像正常使用 HTML 元素一样使用该元素
影子DOM的作用是什么?
- 影子 DOM 中的元素对于整个网页是不可见的;
- 影子 DOM 的 CSS 不会影响到整个网页的 CSSOM,影子 DOM 内部的 CSS 只对内部的元素起作用。