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 只对内部的元素起作用。
  • 相关阅读:
    Photoshop
    你会为了钱出售自己的个人资料吗?
    [ElasticSearch] 空间搜索 (一)
    hdu1584 A strange lift (电梯最短路径问题)
    Android API Guides---OpenGL ES
    Qt 推断一个IP地址是否有效
    bzoj1670【Usaco2006 Oct】Building the Moat 护城河的挖掘
    集成学习1-Boosting
    微信开发模式之自己定义菜单实现
    人件札记:开放式的办公室环境
  • 原文地址:https://www.cnblogs.com/zpsakura/p/14056899.html
Copyright © 2011-2022 走看看