总字数 607
预计阅读时间 2 分钟
组件化封装是前端的发展趋势,现在的主流框架比如Vue、React也都实现了这个目标
浏览器也是支持原生组件的,目前在各种浏览器也已经普及,可以在开发当中使用
基本用法
1 | class UserInfo extends HTMLElement { |
这里的构造器内部执行的事情就是生成一个DOM树customElements.define
表示声明一个自定义组件
这样在页面中直接使用自定义标签<user-info></user-info>
就可以使用该组件了
组件模板
但是如果组件内DOM结构复杂,上面的写法还是有些过于繁琐了
于是我们可以在页面内声明一个模板
1 | <template id="userInfo"> |
1 | class UserInfo extends HTMLElement { |
shadow DOM
独立封装的一段html代码块,其中包含的html标签、CSS样式、js行为都可以隔离、隐藏起来
它就是为组件封装而生的特性,父子组件之间不会互相干扰
其实浏览器本身就有一些内置的shadow DOM
需要打开F12的设置当中的Show user agent shadow DOM
就可以看到诸如<input type="range" />
的内部结构了
可以把它看做浏览器封装的一个组件
如果要把我们的组件也封装为这样的一个结构(虽然可以看到组件中的结构,但是内外隔离,外部无法对内部的DOM进行操作)
可以使用如下的方式
1 | class UserInfo extends HTMLElement { |
此时在组件内部定义的样式就只应用在该组件内,不会对外部造成影响了
组件传参
接收传参的方式就是获取DOM上的属性
1 | var templateElem = document.getElementById('userInfo') |