zoukankan      html  css  js  c++  java
  • WebComponent:像搭积木一样构建Web应用

    什么是组件化?

    对内高内聚,对外低耦合。

    对内各个元素彼此紧密结合、相互依赖,对外和其他组件的联系最少且接口简单。

    阻碍前端组件化的因素有哪些?
    • 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 只对内部的元素起作用。
  • 相关阅读:
    C# LUA 闭包
    string与stringBuilder的效率与内存占用实测
    U3D assetbundle打包
    U3D assetbundle加载
    U3D临时文件GICache巨大
    Unity 协程Coroutine综合测试
    U3D协程Coroutine之WWW与Update()的并行测试
    U3D5.3.5f Monodevelop 仅支持到.NET 3.5
    安卓android杀不死进程,保护,双进程守护,驻留,Marsdaemon,保活
    html 音乐 QQ播放器 外链 代码 播放器 外链 代码
  • 原文地址:https://www.cnblogs.com/zpsakura/p/14056899.html
Copyright © 2011-2022 走看看