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
收起评论