webComponents

组件是前端的发展方向，Web Components即浏览器的原生组件，相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。

实现这样一个效果

 简单示例demo如下：

　引入myInfo.js

class myInfo extends HTMLElement {
  constructor() {
    super()
    const content = document.getElementById('my-info')
    const item = content.content.cloneNode(true)
    const imgObj = item.querySelector('.img')
    const nameObj = item.querySelector('.name')
    const emailObj = item.querySelector('.email')
    imgObj.src=this.getAttribute('src')
    nameObj.innerText = this.getAttribute('name')
    emailObj.innerText = this.getAttribute('email')
    this.appendChild(item)
  }
}

// 定义组件名称
window.customElements.define('my-info', myInfo)

本示例是简单演示，更多细节还请继续深入