建网站 主流软件,创建自己的免费网站,室内装修设计自学教材,企业网站建设费用明细现在的前端开发基本离不开 React、Vue 这两个框架的支撑#xff0c;而这两个框架下面又衍生出了许多的自定义组件库#xff1a;Element#xff08;Vue#xff09;Ant Design#xff08;React#xff09;这些组件库的出现#xff0c;让我们可以直接使用已经封装好的组件而这两个框架下面又衍生出了许多的自定义组件库ElementVueAnt DesignReact这些组件库的出现让我们可以直接使用已经封装好的组件而且在开源社区的帮助下出现了很多的模板项目 vue-element-admin、Ant Design Pro 能让我们快速的开始一个项目。虽然 React、Vue 为我们的组件开发提供了便利但是这两者在组件的开发思路上一个是自创的 JSX 语法一个是特有的单文件模板的语法两者的目标都是想提供一种组件的封装方法。毕竟都有其原创的东西在里面和我们刚开始接触的 Web 基础的 HTML、CSS、JS 的方式还是有些出入的。今天介绍的就是通过 HTML、CSS、JS 的方式来实现自定义的组件也是目前浏览器原生提供的方案Web Components。什么是 Web ComponentsWeb Components 本身不是一个单独的规范而是由一组DOM API 和 HTML 规范所组成用于创建可复用的自定义名字的 HTML 标签并且可以直接在你的 Web 应用中使用。代码的复用一直都是我们追求的目标在 JS 中可复用的代码我们可以封装成一个函数但是对于复杂的HTML包括相关的样式及交互逻辑我们一直都没有比较好的办法来进行复用。要么借助后端的模板引擎要么借助已有框架对 DOM API 的二次封装而 Web Components 的出现就是为了补足浏览器在这方面的能力。如何使用 Web ComponentsWeb Components 中包含的几个规范都已在 W3C 和 HTML 标准中进行了规范化主要由三部分组成Custom elements自定义元素一组 JavaScript API用来创建自定义的 HTML标签并允许标签创建或销毁时进行一些操作Shadow DOM影子DOM一组 JavaScript API用于将创建的 DOM Tree 插入到现有的元素中且 DOM Tree 不能被外部修改不用担心元素被其他地方影响HTML templatesHTML模板通过 template、slot 直接在 HTML 文件中编写模板然后通过 DOM API 获取。Custom elements自定义元素浏览器提供了一个方法customElements.define() 来进行自定义标签的定义。该方法接受三个参数自定义元素的名称一个 DOMString 标准的字符串为了防止自定义元素的冲突必须是一个带短横线连接的名称e.g. custom-tag。定义自定义元素的一些行为类似于 React、Vue 中的生命周期。扩展参数可选该参数类型为一个对象且需要包含 extends 属性用于指定创建的元素继承自哪一个内置元素e.g. { extends: p }。下面通过一些例子演示其用法完整代码放到了 JS Bin 上。创建一个新的 HTML 标签先看看如何创建一个全新的自定义元素。class HelloUser extends HTMLElement {constructor() {// 必须调用 super 方法super();// 创建一个 div 标签const $box document.createElement(p);let userName User Name;if (this.hasAttribute(name)) {// 如果存在 name 属性读取 name 属性的值userName this.getAttribute(name);}// 设置 div 标签的文本内容$box.innerText Hello ${userName};// 创建一个 shadow 节点创建的其他元素应附着在该节点上const shadow this.attachShadow({ mode: open });shadow.appendChild($box);}
}// 定义一个名为 hello-user / 的元素
customElements.define(hello-user, HelloUser);
hello-user nameShenfq/hello-user
这时候页面上就会生成一个 p 标签其文本内容为Hello Shenfq。这种形式的自定义元素被称为Autonomous custom elements是一个独立的元素可以在 HTML 中直接使用。扩展已有的 HTML 标签我们除了可以定义一个全新的 HTML 标签还可以对已有的 HTML 标签进行扩展例如我们需要封装一个与 ul 标签能力类似的组件就可以使用如下方式class SkillList extends HTMLUListElement {constructor() {// 必须调用 super 方法super();if (this.hasAttribute(skills) this.getAttribute(skills).includes(,)) {// 读取 skills 属性的值const skills this.getAttribute(skills).split(,);skills.forEach(skill {const item document.createElement(li);item.innerText skill;this.appendChild(item);})}}
}// 对 ul 标签进行扩展
customElements.define(skill-list, SkillList, { extends: ul });
ul isskill-list skillsjs,css,html/ul
对已有的标签进行扩展需要用到 customElements.define 方法的第三个参数且第二参数的类也需要继承需要扩展标签的对应的类。使用的时候只需要在标签加上 is 属性属性值为第一个参数定义的名称。生命周期自定义元素的生命周期比较简单一共只提供了四个回调方法connectedCallback当自定义元素被插入到页面的 DOM 文档时调用。disconnectedCallback当自定义元素从 DOM 文档中被删除时调用。adoptedCallback当自定义元素被移动时调用。attributeChangedCallback: 当自定义元素增加、删除、修改自身属性时调用。下面演示一下使用方法class HelloUser extends HTMLElement {constructor() {// 必须调用 super 方法super();// 创建一个 div 标签const $box document.createElement(p);let userName User Name;if (this.hasAttribute(name)) {// 如果存在 name 属性读取 name 属性的值userName this.getAttribute(name);}// 设置 div 标签的文本内容$box.innerText Hello ${userName};// 创建一个 shadow 节点创建的其他元素应附着在该节点上const shadow this.attachShadow({ mode: open });shadow.appendChild($box);}connectedCallback() {console.log(创建元素)// 5s 后移动元素到 iframesetTimeout(() {const iframe document.getElementsByTagName(iframe)[0]iframe.contentWindow.document.adoptNode(this)}, 5e3)}disconnectedCallback() {console.log(删除元素)}adoptedCallback() {console.log(移动元素)}
}
!-- 页面插入一个 iframe将自定义元素移入其中 --
iframe width0 height0/iframe
hello-user nameShenfq/hello-user
在元素被创建后等待 5s然后将自定义元素移动到 iframe 文档中这时候能看到控制台会同时出现 删除元素、移动元素 的 log。ConsoleShadow DOM影子DOM在前面介绍自定义元素的时候已经用到了 Shadow DOM。Shadow DOM 的作用是让内部的元素与外部隔离让自定义元素的结构、样式、行为不受到外部的影响。我们可以看到前面定义的 hello-user 标签在控制台的 Elements 内会显示一个 shadow-root 表明内部是一个 Shadow DOM。Shadow DOM其实 Web Components 没有提出之前浏览器内部就有使用 Shadow DOM 进行一些内部元素的封装例如 video 标签。我们需要现在控制台的配置中打开 Show user agent ashdow DOM 开关。设置然后在控制台的 Elements 内就能看到 video 标签内其实也有一个 shadow-root。video 标签创建 Shadow DOM我们可以在任意一个节点内部创建一个 Shadow DOM在获取元素实例后调用 Element.attachShadow() 方法就能将一个新的 shadow-root 附加到该元素上。该方法接受一个对象且只有一个 mode 属性值为 open 或 closed表示 Shadow DOM 内的节点是否能被外部获取。div idroot/div
script// 获取页面的const $root document.getElementById(root);const $p document.createElement(p);$p.innerText 创建一个 shadow 节点;const shadow $root.attachShadow({mode: open});shadow.appendChild($p);
/script
Shadow DOMmode 的差异前面提到了 mode 值为 open 或 closed主要差异就是是否可以使用 Element.shadowRoot 获取到 shadow-root 进行一些操作。div idroot/div
script// 获取页面的const $root document.getElementById(root);const $p document.createElement(p);$p.innerText 创建一个 shadow 节点;const shadow $root.attachShadow({mode: open});shadow.appendChild($p);console.log(is open, $div.shadowRoot);
/script
open modediv idroot/div
script// 获取页面的const $root document.getElementById(root);const $p document.createElement(p);$p.innerText 创建一个 shadow 节点;const shadow $root.attachShadow({mode: closed});shadow.appendChild($p);console.log(is closed, $div.shadowRoot);
/script
closed modeHTML templatesHTML模板前面的案例中有个很明显的缺陷那就是操作 DOM 还是得使用 DOM API相比起 Vue 得模板和 React 的 JSX 效率明显更低为了解决这个问题在 HTML 规范中引入了 tempate 和 slot 标签。使用模板模板简单来说就是一个普通的 HTML 标签可以理解成一个 div只是这个元素内的所以内容不会展示到界面上。template idhelloUserTplp classnameName/pa targetblank classblog##/a
/template
在 JS 中我们可以直接通过 DOM API 获取到该模板的实例获取到实例后一般不能直接对模板内的元素进行修改要调用 tpl.content.cloneNode 进行一次拷贝因为页面上的模板并不是一次性的可能其他的组件也要引用。// 通过 ID 获取标签
const tplElem document.getElementById(helloUserTpl);
const content tplElem.content.cloneNode(true);
我们在获取到拷贝的模板后就能对模板进行一些操作然后再插入到 Shadow DOM 中。hello-user nameShenfq bloghttp://blog.shenfq.com /scriptclass HelloUser extends HTMLElement {constructor() {// 必须调用 super 方法super();// 通过 ID 获取标签const tplElem document.getElementById(helloUserTpl);const content tplElem.content.cloneNode(true);if (this.hasAttribute(name)) {const $name content.querySelector(.name);$name.innerText this.getAttribute(name);}if (this.hasAttribute(blog)) {const $blog content.querySelector(.blog);$blog.innerText this.getAttribute(blog);$blog.setAttribute(href, this.getAttribute(blog));}// 创建一个 shadow 节点创建的其他元素应附着在该节点上const shadow this.attachShadow({ mode: closed });shadow.appendChild(content);}}// 定义一个名为 hello-user / 的元素customElements.define(hello-user, HelloUser);
/script
添加样式template 标签中可以直接插入 style 标签在模板内部定义样式。template idhelloUserTplstyle:host {display: flex;flex-direction: column;width: 200px;padding: 20px;background-color: #D4D4D4;border-radius: 3px;}.name {font-size: 20px;font-weight: 600;line-height: 1;margin: 0;margin-bottom: 5px;}.email {font-size: 12px;line-height: 1;margin: 0;margin-bottom: 15px;}/stylep classnameUser Name/pa targetblank classblog##/a
/template其中 :host 伪类用来定义 shadow-root的样式也就是包裹这个模板的标签的样式。占位元素占位元素就是在模板中的某个位置先占据一个位置然后在元素插入到界面上的时候在指定这个位置应该显示什么。template idhelloUserTplp classnameUser Name/pa targetblank classblog##/a!--占位符--slot namedesc/slot
/templatehello-user nameShenfq bloghttp://blog.shenfq.comp slotdesc欢迎关注公众号更了不起的前端/p
/hello-user
这里用的用法与 Vue 的 slot 用法一致不做过多的介绍。总结到这里 Web Components 的基本用法就介绍得差不多了相比于其他的支持组件化方案的框架使用 Web Components 有如下的优点浏览器原生支持不需要引入额外的第三方库真正的内部私有化的 CSS不会产生样式的冲突无需经过编译操作即可实现的组件化方案且与外部 DOM 隔离Web Components 的主要缺点就是标准可能还不太稳定例如文章中没有提到的模板的模块化方案就已经被废除现在还没有正式的方案引入模板文件。而且原生的 API 虽然能用但是就是不好用要不然也不会出现 jQuery 这样的库来操作 DOM。好在现在也有很多基于 Web Components 实现的框架后面还会开篇文章专门讲一讲使用 Web Components 的框架 lit-html、lit-element。好啦今天的文章就到这里了希望大家能有所收获。最近组建了一个江西人的前端交流群如果你也是江西人可以加我微信ruochuan12 拉你进群。常驻推荐阅读若川知乎高赞有哪些必看的 JS库我在阿里招前端我该怎么帮你现在还可以加模拟面试群如何拿下阿里巴巴 P6 的前端 Offer如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点该如何做出如何从初级到专家(P4-P7)打破成长瓶颈和有效突破若川知乎问答2年前端经验做的项目没什么技术含量怎么办常驻末尾你好我是若川江西人~(点击蓝字了解我)历时一年只写了一个学习源码整体架构系列 有哪些必看的JS库jQuery、underscore、lodash、sentry、vuex、axios、koa、redux关注若川视野回复pdf 领取优质前端书籍pdf回复1可加群长期交流学习我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以 分享、点赞、在看 呀^_^另外欢迎留言交流小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读也可以星标我的公众号便于查找
