个人音乐网站开发,优秀界面设计作品,做cps要做什么类型的网站,苏州建设交通职业技术学院官网目前流行的各类前端框架#xff0c;不管是react, angular还是vue#xff0c;都有一个共同点#xff0c;那就是支持组件化开发#xff0c;但事实上随着浏览器的发展#xff0c;现在浏览器也原生支持组件式开发#xff0c;本文将通过介绍Web Components 的三个主要概念不管是react, angular还是vue都有一个共同点那就是支持组件化开发但事实上随着浏览器的发展现在浏览器也原生支持组件式开发本文将通过介绍Web Components 的三个主要概念带读者无障碍入门Web Components 1.Custom Elements自定义组件 顾名思义Web Component 提供了一套模式让我们自定义组件采用自定义类的方式当我们需要自定义一个组件我们需要声明一个类并继承自原生的DOM 类下面先给出一个示例 class MyCustomElement extends HTMLElement {constructor() {super();}connectedCallback() {console.log(自定义元素添加至页面。);}disconnectedCallback() {console.log(自定义元素从页面中移除。);}adoptedCallback() {console.log(自定义元素移动至新页面。);}attributeChangedCallback(name, oldValue, newValue) {console.log(属性 ${name} 已变更。);} }customElements.define(my-custom-element, MyCustomElement);如上面的代码所示我们定义了一个最简单的类这个类继承自HTMLElement它有四个发方法分别代表组件的四个生命周期接着我们需要调用customElements.define这个方法来注册一个自定义组件这个方法包含三个参数第一个参数为自定义组件的名字第二个参数我们需要传入刚刚定义的类第三个参数是一个可选参数后文会提及这里可以先忽略这样我们就定义个一个最简单的组件这个组件没有任何功能没有任何形态但是会有生命周期我们可以像下面这样调用它 my-custom-element/my-custom-element 页面渲染之后我们可以看到控制台打印出下面的文本 接下来简单讲讲四个生命周期第124这三个生命周期比较好理解分别代表组件被添加到页面从页面移除以及组件参数的变化对于组件参数下文会提及这里先有个概念就可以了第三个生命周期adoptedCallback 相对来说比较难理解移动到新页面的意思是从一个html文档移动到另一个html文档一般情况下如果同一个组件从普通页面移动到iframe里面会触发这个事件有兴趣的小伙伴可以自己尝试一下。自此我们简单的了解了如何创建一个最简单的自定义组件接下来我们来了解一下Web Components 的核心Shadow DOM。 2.Shadow DOM影子dom Shadow DOM 这个名字直译过来就是影子DOM大部分人看到这个名字可能会联想到react或者vue的虚拟dom但这两者基本上不是一个东西虚拟dom是用js对dom结构做一个映射用js对象来表示dom结构用来提升性能的一个东西而影子dom反而可以理解为一个实实在在的dom但提供了样式dom结构隔离等功能的东西为了方便理解我们来看看下面的html代码 !DOCTYPE htmlhtmlheadmeta charsetutf-8/titleweb components/title/headbodyinput typerange/input//body /html 我们可以看到下面的页面 有没有考虑过一个问题同样是input控件为什么可以展现出不同的功能和样式当然肯定有人会说是浏览器根据标签传入的参数渲染的结果这么说也没毛病但其实我们可以仔细窥探一下这里面的实现原理首先我们打开一下浏览器的一下开关路径为 设置/performance/Elements, 把下面这个开关打开 打开之后我们会发现dom结构发生了很大的变化我们看到了一些原本被隐藏起来的东西 shadow-root 底下的dom结构明明白白的告诉你这个组件是怎么被构建的包括样式结构等等可以这么理解这部分就是原生组件的shadow dom,而Web Components把这部分功能开放出来我们也可以利用shadow dom来构建自己的自定义组件当然构建自定义组件不一定需要用到shadow dom, 只是用上它能让组件更好的内聚避免被其它组件影响shadow dom 提供了一个隔离机制可以使得组件内部的dom结构和style都仅作用于组件内部并且不受外部的影响外部也无法访问到组件内部的东西从而避免全局样式之间的互相影响不同组件之间你甚至可以使用相同类名而不用添加hash之类的东西用于区分 接下来我们开看看如何用shadow dom 创建一个简单的组件我们在第一个组件里面添加一些内容 //components/MyCustomElement.jsclass MyCustomElement extends HTMLElement {constructor() {super();}connectedCallback() {console.log(自定义元素添加至页面。);const shadow this.attachShadow({ mode: open });const sheet new CSSStyleSheet();sheet.replaceSync(.wrapper {color:red;});const wrapper document.createElement(span);wrapper.innerHTML this.getAttribute(content);wrapper.setAttribute(class, wrapper);shadow.adoptedStyleSheets [sheet];shadow.appendChild(wrapper);const style document.createElement(style);style.textContent .wrapper{color:red;};}customElements.define(my-custom-element, MyCustomElement);!-- index.html --my-custom-element contentwrapper1/my-custom-element 我们选择在connectedCallback 添加了一些代码目的是在自定义组件添加至页面之后我们通过shadow dom 给它内部添加一个span并指定样式下面我们简单解释一下代码 shadow dom不能脱离宿主单独存在所以我们在一开始通过调用attachShadow 方法给当前组件附加影子dom这个方法支持传入一个mode参数这个参数可以设置为“open”或者“closed”, open代表开放shadow dom, 虽然我们无法直接访问到shadow dom里面的元素但还是可以通过特定途径访问得到closed则代表对外部彻底关闭一个前提这些都是基于君子协议并非可以真正封闭组件通过浏览器插件等方式依旧可以访问到内部的内容这并不是一个严格的安全措施 添加样式的代码比较简单就不进行解释接下来我们通过getAttribute方法来获取组件的content属性并将它作为span的内容我们可以看到渲染出了文字并添加了样式 现在我们在html上添加一些对比内容来展示一下shadow dom对于样式跟dom的隔离效果 !-- index.html -- !DOCTYPE htmlhtmlheadmeta charsetutf-8/titleweb components/titlelink hrefindex.css relstylesheet//headbodyh1web components/h1my-custom-element contentwrapper1 idmyCustomElement/my-custom-elementspan classwrapperwrapper2/spanbutton idtestget dom from shadow dom/buttonscript src./components/MyCustomElement.js defer/scriptscript srcindex.js/script/body /html /* index.css */ .wrapper{color:blue; } //index.js window.onload () {document.getElementById(test).addEventListener(click,() {var wrapper document.querySelectorAll(.wrapper);if (wrapper) {console.log(1);console.log(wrapper);console.log(wrapper[0].innerHTML)}//通过宿主的shadowRoot来获取内部domwrapper document.getElementById(myCustomElement).shadowRoot.querySelectorAll(.wrapper);if (wrapper) {console.log(2);console.log(wrapper);console.log(wrapper[0].innerHTML)}},false); }; 运行代码之后我们看到是下图的效果 红色的是组件内部定义的颜色蓝色是组件外定义的全局样式两者之间没有相互影响样式之间做到了互相隔离事实上不管我们以上么样的方式引入样式组件的样式都不会影响到其他的组件。我们再尝试点击按钮我们可以看到打印了下面的结果 我们发现如果用普通的查询手段我们是无法查询到自定义组件内部的dom节点的但我们可以通过宿主的shadowRoot来获取内部的dom但这是有一个前提的就是前文提到的我们把mode参数设置成了open, 如果我们把mode修改成closed, 输出则会变成这样我们无法访问到shadowRoot shadowRoot 返回了null因此我们的代码报错了 。 接下来我们把第一段里面的坑填回去我们现在已经知道我们可以通过Web Components来创建自定义组件了但这对于日常的开发是远远不够的我们有时候会有这样的需求我们需要基于原有的组件进行二次开发也就是说我们想继承原生组件的功能但我们想新增一些功能上去这样改怎么做呢答案是回到customElements.define我们添加第三个参数把需要继承的原生组件名字赋值给extends类似下面就是自定义一个继承自textarea的组件 customElements.define(my-text-area, MyTextArea, { extends: textarea }); 下面我们举个简单的例子实现一个很常见的需求我们将实现一个自定义的textarea, 下方显示能接受的最大字数和当前字数 //components/MyTextArea.js class MyTextArea extends HTMLTextAreaElement {constructor() {super();}connectedCallback() {console.log(自定义元素添加至页面2。);var div document.createElement(div);div.innerText 0/${this.getAttribute(maxlength)};this.parentNode.insertBefore(div, this.nextSibling);this.addEventListener(input,(e) {div.innerText ${e.currentTarget.value.length}/${this.getAttribute(maxlength)};},false);} }customElements.define(my-text-area, MyTextArea, { extends: textarea }); !-- index.html -- !DOCTYPE htmlhtmlheadmeta charsetutf-8/titleweb components/titlelink hrefindex.css relstylesheet//headbodyh1web components/h1textarea ismy-text-area maxlength20/textareatextarea ismy-text-area maxlength50/textareascript src./components/MyTextArea.js defer/scriptscript srcindex.js/script/body /html 通过上述代码我们可以看到运行的效果如下 我们通过继承textarea组件可以获取原生组件的所有功能并能在这个功能的基础上扩展出自己的功能上面我们做的事情很简单在自定义组件被加载之后我们通getAttribute函数获取当前传入的maxlength来获取允许输入的最大值然后监听input事件实时获取当前的字数实现过程比较简单这里就不再赘述了 3.Template and Slot模板与插槽 其实到了这里我们已经基本上能够利用上述的功能来实现我们业务需求了但还不够灵活例如我们日常开发过程中经常会有这样的需求在自定义组件下面给他添加子组件就像普通的div一样可以层层嵌套类似这样 my-elementdivdivlets have some differences/div/div /my-element 基于但不仅仅基于这种需求我们引入另外两个概念 3.1 Template(模板) 模板顾名思义我们可以在html文件里面定义一系列可重用的模板这些模板除非最终被使用否则不会渲染到页面中来我们看看下面的代码 !-- index.html -- !DOCTYPE htmltemplate idmy-paragraphpmy paragrapy/p /templatehtmlheadmeta charsetutf-8/titleweb components/title/headbodyh1web components/h1my-slot-element/my-slot-elementscript src./components/MySlotElement.js defer/script/body /html //components/MySlotElement.jsclass MySlotElement extends HTMLElement {constructor() {super();}connectedCallback() {console.log(自定义元素添加至页面3。);let template document.getElementById(my-paragraph);let templateContent template.content;const shadowRoot this.attachShadow({ mode: open });shadowRoot.appendChild(templateContent.cloneNode(true));} }customElements.define(my-slot-element, MySlotElement);上述代码实现的效果如下 上述的代码通过id获取到当前的template通过template.content我们可以获取到当前模板的内容然后我们我么们通过cloneNode方法把template的内容复制一份添加到影子DOM里面注意我们传入了一个参数true表示递归复制此节点下的所有子孙节点 当然如果只是仅仅实现这样一个html代码重用的效果template可能显得不是很有必要毕竟我们有很多的方法来实现代码的重用之所以把它拎出来讲是因为template实现了插槽slot的功能 3.2 Slot(插槽) Slot给template模板提供了自定义扩展的功能我们可以在特定的位置先埋下插槽在后续使用模板的过程中我们可以把特定的代码插入到对应的插槽当中我们来对上面的代码做一些扩展我们修改一下template的定义实现插槽的功能 !DOCTYPE htmltemplate idmy-paragraphpmy paragrapy/pslot namemy-textmy defalut text/slot /templatehtmlheadmeta charsetutf-8/titleweb components/titlelink hrefindex.css relstylesheet//headbodyh1web components/h1my-slot-elementdiv slotmy-textdivlets have some differences/div/div/my-slot-elementscript src./components/MySlotElement.js defer/script/body /html 实现的效果如下 我们在template里面预先埋入了一个叫my-text的插槽然后我们在自定义组件的子节点编写了自定义的内容并且指定了slot的名称我们发现渲染之后子节点被渲染到于P标签同一个层级的dom结构中注意如果我们在template中删除slot标签自定义组件的子节点是不会被渲染出来的而如果我们没有传入自定义内容到指定的slot中slot中的默认内容将会被展示这里由于篇幅原因就不展示了有兴趣的话可以自行测试 看到这里写过vue的小伙伴应该会觉得很熟悉这个写法几乎如出一辙事实上vue设计slot的时候是借鉴了Web Components的slot的没错Web Component出来的时间比vue早 4.兼容性 接下来就是喜闻乐见的兼容性程度了这关乎这个技术能否直接应用到生产当中截至到本篇文章发布目前浏览器对主要的特性支持如下 除了个别api没被支持之外大部分的api都已经被主流的浏览器所支持,当然了哪里有不兼容哪里就会有polyfills 例如polyfills可以对大部分不兼容的api提供支持各位可以自行探索 以上希望各位封装组件愉快有什么疑问见解或者想交流的都可以评论区见