没有合适的资源?快使用搜索试试~ 我知道了~
28-WebComponent:像搭积木一样构建Web应用_For_vip_user_0011
需积分: 0 0 下载量 124 浏览量
2022-08-04
15:09:34
上传
评论
收藏 532KB PDF 举报
温馨提示
试读
6页
1. 查找模板内容 2. 创建影DOM 3. 再将模板添加到影DOM上 1. 影DOM中的元素对于整个是不可的 2. 影DOM的CSS不会影响到整个的
资源详情
资源评论
资源推荐
28-WebComponent:像搭积⽊⼀样构建Web应⽤28-WebComponent:像搭积⽊⼀样构建Web应⽤
在上⼀篇⽂章中我们从技术演变的⻆度介绍了PWA,这是⼀套集合了多种技术的理念,让浏览器渐进式适应
设备端。今天我们要站在开发者和项⽬⻆度来聊聊WebComponent,同样它也是⼀套技术的组合,能提供
给开发者组件化开发的能⼒。
那什么是组件化呢?
其实组件化并没有⼀个明确的定义,不过这⾥我们可以使⽤10个字来形容什么是组件化,那就是:对内⾼内对内⾼内
聚,对外低耦合聚,对外低耦合。对内各个元素彼此紧密结合、相互依赖,对外和其他组件的联系最少且接⼝简单。
可以说,程序员对组件化开发有着天⽣的需求,因为⼀个稍微复杂点的项⽬,就涉及到多⼈协作开发的问
题,每个⼈负责的组件需要尽可能独⽴完成⾃⼰的功能,其组件的内部状态不能影响到别⼈的组件,在需要
和其他组件交互的地⽅得提前协商好接⼝。通过组件化可以降低整个系统的耦合度,同时也降低程序员之间
沟通复杂度,让系统变得更加易于维护。
使⽤组件化能带来很多优势,所以很多语⾔天⽣就对组件化提供了很好的⽀持,⽐如C/C++就可以很好地将
功能封装成模块,⽆论是业务逻辑,还是基础功能,抑或是UI,都能很好地将其组合在⼀起,实现组件内部
的⾼度内聚、组件之间的低耦合。
⼤部分语⾔都能实现组件化,归根结底在于编程语⾔特性,⼤多数语⾔都有⾃⼰的函数级作⽤域、块级作⽤
域和类,可以将内部的状态数据隐藏在作⽤域之下或者对象的内部,这样外部就⽆法访问了,然后通过约定
好的接⼝和外部进⾏通信。
JavaScript虽然有不少缺点,但是作为⼀⻔编程语⾔,它也能很好地实现组件化,毕竟有⾃⼰的函数级作⽤
域和块级作⽤域,所以封装内部状态数据并提供接⼝给外部都是没有问题的。
既然JavaScript可以很好地实现组件化,那么我们所谈论的WebComponent到底⼜是什么呢?
阻碍前端组件化的因素阻碍前端组件化的因素
在前端虽然HTML、CSS和JavaScript是强⼤的开发语⾔,但是在⼤型项⽬中维护起来会⽐较困难,如果在
⻚⾯中嵌⼊第三⽅内容时,还需要确保第三⽅的内容样式不会影响到当前内容,同样也要确保当前的DOM
不会影响到第三⽅的内容。
所以要聊WebComponent,得先看看HTML和CSS是如何阻碍前端组件化的,这⾥我们就通过下⾯这样⼀个
简单的例⼦来分析下:
<style>
p{
background-color:brown;
color:cornsilk
}
</style>
<p>time.geekbang.org</p>
yiyi分析亲密关系
- 粉丝: 25
- 资源: 321
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0