28 | WebComponent：像搭积木一样构建Web应用
李兵
该思维导图由 AI 生成，仅供参考
在上一篇文章中我们从技术演变的角度介绍了 PWA，这是一套集合了多种技术的理念，让浏览器渐进式适应设备端。今天我们要站在开发者和项目角度来聊聊 WebComponent，同样它也是一套技术的组合，能提供给开发者组件化开发的能力。
那什么是组件化呢？
其实组件化并没有一个明确的定义，不过这里我们可以使用 10 个字来形容什么是组件化，那就是：对内高内聚，对外低耦合。对内各个元素彼此紧密结合、相互依赖，对外和其他组件的联系最少且接口简单。
可以说，程序员对组件化开发有着天生的需求，因为一个稍微复杂点的项目，就涉及到多人协作开发的问题，每个人负责的组件需要尽可能独立完成自己的功能，其组件的内部状态不能影响到别人的组件，在需要和其他组件交互的地方得提前协商好接口。通过组件化可以降低整个系统的耦合度，同时也降低程序员之间沟通复杂度，让系统变得更加易于维护。
使用组件化能带来很多优势，所以很多语言天生就对组件化提供了很好的支持，比如 C/C++ 就可以很好地将功能封装成模块，无论是业务逻辑，还是基础功能，抑或是 UI，都能很好地将其组合在一起，实现组件内部的高度内聚、组件之间的低耦合。
大部分语言都能实现组件化，归根结底在于编程语言特性，大多数语言都有自己的函数级作用域、块级作用域和类，可以将内部的状态数据隐藏在作用域之下或者对象的内部，这样外部就无法访问了，然后通过约定好的接口和外部进行通信。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
WebComponent是一种技术组合，能够为开发者提供组件化开发能力。其核心理念是高内聚、低耦合，以降低系统耦合度、简化沟通复杂度、使系统更易维护。在前端开发中，全局属性和DOM的全局性阻碍了组件化开发，而WebComponent通过Custom elements、Shadow DOM和HTML templates技术实现了局部视图封装，隔离了CSS和DOM，实现了组件化开发的目标。影子DOM的实现使得元素对整个网页不可见，且其CSS不会影响整个网页的CSSOM，实现了内外部样式的隔离。未来，WebComponent将会采用渐进式迭代的方式向前推进，但仍有许多挑战需要克服。思考题是关于WebComponents和前端框架（React、Vue）之间的关系。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《浏览器工作原理与实践》，新⼈⾸单¥59
《浏览器工作原理与实践》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(26)
- 最新
- 精选
匡晨辉web component是通过浏览器引擎提供api接口进行操作，让后在dom，cssom生成过程中控制实现组件化的作用域/执行执行上下文的隔离； vue/react 是在没有浏览器引擎支持的情况下，通过采取一些取巧的手法（比如：js执行上下文的封装利用闭包；样式的封装利用文件hash值作为命名空间在css选择的时候多套一层选择条件（hash值），本质上还是全局的只是不同组件css选择的时候只能选择到组件相应的css样式，实现的隔离）2019-12-1878
wubinsheng原来小程序用的是webComponent，控制台满屏的“#shadow-root”2019-10-15149
SnailVue，React是从开发者层面解决了组件化的问题，提高了效率。WebComponent是从浏览器引擎实现层面解决了组件化的问题，从社区来看，前者的发展优势更明显2019-12-16131
redbuckwebComponent标准可以成为框架间的桥梁. 组件内部可以用vue/react或随便什么技术实现,只要最终实现约定接口即可. 这样的话,就可以引入用react开发的A组件,同时引入用vue开发的B组件,而他们都在一个Angular项目中.就像一个原生html标签一样被使用. 所以这也可以是微前端的一种实现方式2020-04-15416
mfist下面是我的理解，请老师纠正。 在没有webcomponent的时候，通过react和vue基于当前的前端特性去实现组件化，他们之间是互相影响和借鉴的，最终react和vue也会向webcomponent标准的方向演进。但是现在由于webcomponent的浏览器支持还不是太好，所以现阶段它们还是会并存的2019-10-0812
蓝配鸡才疏学浅， 以下是个人的理解： 两者互相补充， 互不影响 react提供了陈述式的方法编写网页， 让用户不需要去关心dom改变之类的细节 webComponent则是提供了封装2019-10-098
张峰web-component之于vue/react，类似于ES6789之于coffeeScript/typeScript，后者只是前者的临时替补，omi和angular都已经支持web-component2019-10-082- 张峰shadow dom 中的style使用rem，r是相对的html的font-size 这点很坑2019-10-0812
君自兰芳“在影子 DOM 定义的 JavaScript 函数依然可以被外部访问” 有个疑问，在影子 DOM 定义的变量或函数是属于全局作用域吗？2020-11-1211
Roywebcomponent很好的实现与第三方应用的组合使用。2020-04-291
收起评论