本文作者为奇舞团前端开发工程师
引言
前端开发者,现在在进行项目的开发时,一般很少使用原生的js代码,往往都会依靠Vue,React等框架进行开发,而不同的框架都有自己不同的开发规则,但是目前所使用的主流框架,都是遵循组件化开发的模式,即把不同功能的代码,拆分成不同的组件,以此来达到高内聚,低耦合,减少代码量等目的。目前主流的框架,均为是有公司或者公司开源。自己制定了一套完整的开发规范。谷歌在2011年的时候就已经提出了组件化开发的概念,即Web Component ,这个方案现在是被纳入了w3c规范之中。
如何构建
构建一个Web Component,我们需要按照以下三个步骤
1.定义模板
<template>
<div>web component</div>
<button>按钮</button>
</template>
我们在<template>
标签内部,编辑我们组件的结构样式,这里可以类比vue的模板写法。
2.组件逻辑编写
class MyWebComponent extends HTMLElement {
constructor() {
super();
// 深度克隆一份template
const content = template.content.cloneNode(