web components使用记录

栏目: 前端 · 发布时间: 4年前

内容简介：效果：（浏览器不打开完整的component-num-input.js：

Web Components 原生的组件模式，主要有 customElement ， shadowDom ， template 等，本次主要用 customElement 注册自定义元素组件， shadowDom 存放组件内容

说明：

目前我知道的渲染后使用 web components 的框架有 腾讯omi , 谷歌polymer 两个；omi看了一下很简单，使用jsx语法或不使用构建工具的话用h渲染函数也可以，所以自己手写试试。
本次试用学到的东西：
1. web components使用 es6 class 定义组件！！继承( extends HTMLElement 或某个已有元素如 HTMLButtonElement )， customElement.define(tagName, className) 注册组件
2. 组件内样式独立（scoped）； shadow-dom 是某些原生元素的实现(如video等)，可以简化页面结构
3. 其他：如果兼容性好的话真是不错的选择（也有pollyfill），毕竟原生还是好

效果：（浏览器不打开 shadow-dom 显示的话时看不到 web components 里面的东西的哦，详情百度一下）

1、HTML：

<body>
  <hello-web-components></hello-web-components>
  <num-input
    data-value="1"
    data-price="9.99"
    data-out=""
  ></num-input>
  <script src="./component-hello.js"></script>
  <script src="./component-num-input.js"></script>
</body>
复制代码

2、组件：

a. 构造器：初始化运行的代码都放这里，包括组件样式，事件的绑定，组件内元素的生成等

constructor() {
    super();
    // this.dataset
    
    // 添加shadowDom
    let shadowRoot = this.attachShadow({mode: 'open'});
    let styles = `
      hello-web-components {color: red;}
      h3 {font-weight: normal;}
      .num-input-content {margin: 10px 0;}
      .num-input {text-align: center;}
    `;
    shadowRoot.innerHTML = `
      <style>${styles}</style>
      <div class="num-input-content">
        <button class="decrease">-</button>
        <input type="text" class="num-input" value="${this.dataset.value}"/>
        <button class="increase">+</button>
        <span>价格：<b class="price">${this.dataset.price}</b>元</span>
      </div>
    `;
 
    this.numInput = this.shadowRoot.querySelector('.num-input');  // 数量
    this.price = this.shadowRoot.querySelector('.price'); // 价格
 
    // 获取shadowDom下的元素
    let decrease = this.shadowRoot.querySelector('.decrease');
    let increase = this.shadowRoot.querySelector('.increase');
 
    // 绑定事件
    // 其实这里可以跟react一样，函数使用箭头函数声明，就不要在构造函数里面bind this了
    decrease.addEventListener('click', this.decrease.bind(this), false);
    increase.addEventListener('click', this.increase.bind(this), false);
  }
复制代码

b. 事件函数：与constructor同级，位于组件类的根

// -
  decrease() {
    this.dataset.value--;
    this.update();
  }
  // +
  increase() {
    this.dataset.value++;
    this.update();
  }
  // update
  update() {
    // 更新数值
    this.numInput.setAttribute('value', this.dataset.value);
    let allPrice = this.dataset.value*this.dataset.price;
    this.price.innerText = allPrice;
 
    // 输出结果到:host元素
    this.dataset.out = JSON.stringify({
      value: this.dataset.value,
      price: allPrice
    });
  }
复制代码

3、注册组件：

// 注册 <num-input></num-input> 元素
customElements.define('num-input', NumInput)
复制代码

完整的component-num-input.js：

// component-num-input.js
class NumInput extends HTMLElement {
  constructor() {
    super();
    // this.dataset
    
    // 添加shadowDom
    let shadowRoot = this.attachShadow({mode: 'open'});
    let styles = `
      hello-web-components {color: red;}
      h3 {font-weight: normal;}
      .num-input-content {margin: 10px 0;}
      .num-input {text-align: center;}
    `;
    shadowRoot.innerHTML = `
      <style>${styles}</style>
      <div class="num-input-content">
        <button class="decrease">-</button>
        <input type="text" class="num-input" value="${this.dataset.value}"/>
        <button class="increase">+</button>
        <span>价格：<b class="price">${this.dataset.price}</b>元</span>
      </div>
    `;
 
    this.numInput = this.shadowRoot.querySelector('.num-input');  // 数量
    this.price = this.shadowRoot.querySelector('.price'); // 价格
 
    // 获取shadowDom下的元素
    let decrease = this.shadowRoot.querySelector('.decrease');
    let increase = this.shadowRoot.querySelector('.increase');
 
    // 绑定事件
    decrease.addEventListener('click', this.decrease.bind(this), false);
    increase.addEventListener('click', this.increase.bind(this), false);
  }
  // -
  decrease() {
    this.dataset.value--;
    this.update();
  }
  // +
  increase() {
    this.dataset.value++;
    this.update();
  }
  // update
  update() {
    // 更新数值
    this.numInput.setAttribute('value', this.dataset.value);
    let allPrice = this.dataset.value*this.dataset.price;
    this.price.innerText = allPrice;
 
    // 输出结果到:host元素
    this.dataset.out = JSON.stringify({
      value: this.dataset.value,
      price: allPrice
    });
  }
}
 
// 注册 <num-input></num-input> 元素
customElements.define('num-input', NumInput)
复制代码

到此，结束！欲知后事如何，请听下回分解>_>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Making Things See

Greg Borenstein / Make / 2012-2-3 / USD 39.99

Welcome to the Vision Revolution. With Microsoft's Kinect leading the way, you can now use 3D computer vision technology to build digital 3D models of people and objects that you can manipulate with g......一起来看看《Making Things See》这本书的介绍吧!

码农工具