webcomponents可以删除吗_电子市场可以删除吗_stormmedia可以删除吗

各种网站通常应该一些相似的模块，比如日历、调色板等等，这种模块就被称为“组件”（component）。Web Component就是网页组件式开发的技术完善。

采用模块进行网站研发，有很多优点。

（1）管理和使用比较易于。加载或卸载插件，只要添加或卸载一行代码就可以了。

<link rel="import" href="my-dialog.htm">
<my-dialog heading="A Dialog">Lorem ipsum</my-dialog>

上面代码读取了一个对话框组件。

（2）定制更加易于。组件通常留出接口，供使用者设置常用属性，比如下面代码的heading属性，就是用来设定对话框的标题。

（3）组件是模块化编程思想的展现，非常有利于代码的重用。标准格式的组件，可以跨系统、跨框架使用，构建、部署和与其它UI元素互动都有统一做法。

（4）组件提供了HTML、CSS、JavaScript封装的方式，实现了与同一页面上其它代码的隔离。

未来的网站开发，可以像搭积木一样，把组件合在一起，就构成了一个网站。这是比较诱人的。

Web Components不是单一的完善，而是一系列的科技构成，包括Template、Custom Element、Shadow DOM、HTML Import四种技术规范。使用时，并不一定这四者都要用到。其中，Custom Element和Shadow DOM最重要，Template和HTML Import只起到辅助作用。

template标签表示网站中那些重复发生的个别的代码模板。它存在于DOM之中，但是在页面中不可见。

下面的代码用来检测，浏览器是否支持template标签。

function supportsTemplate() {
  return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
  // 支持
} else {
  // 不支持
}

下面是一个模板的举例。

<template id="profileTemplate">
  <div class="profile">
    <img src="" class="profile__img">
    <div class="profile__name"></div>
    <div class="profile__social"></div>
  </div>
</template>

使用的之后，需要用JavaScript在模版中插入内容，然后将其插入DOM。

var template = document.querySelector('#profileTemplate');
template.content.querySelector('.profile__img').src = 'profile.jpg';
template.content.querySelector('.profile__name').textContent = 'Barack Obama';
template.content.querySelector('.profile__social').textContent = 'Follow me on Twitter';
document.body.appendChild(template.content);

上面的代码是将模版直接插入DOM，更好的做法是克隆template节点，然后将克隆的节点插入DOM。这样做可以多次使用模板。

var clone = document.importNode(template.content, true);
document.body.appendChild(clone);

接受template插入的元素，叫做宿主元素（host）。在template之中，可以对宿主元素修改风格。

<template>
<style>
  :host {
    background: #f8f8f8;
  }
  :host(:hover) {
    background: #ccc;
  }
</style>
</template>

document.importNode方法用于克隆外部文档的DOM节点。

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

上面举例是将iframe窗口之中的结点oldNode，克隆进入当前文档。

注意，克隆节点然后，还必须用appendChild方法将其加入当前文档，否则不会显示。换个视角说，这意味着插入外部文档节点之前，必须用document.importNode方法先将这个节点准备好。

document.importNode方法接受两个参数，第一个参数是内部文档的DOM节点，第二个参数是一个布尔值，表示是否连同子节点一起克隆，默认为false。大多数情况下，必须显式地将第二个参数设为true。

HTML预定义的网页元素，有时并不符合我们的必须，这时可以自定义网页元素，这就让做Custom Element。它是Web component技术的核心。举例来说，你可以自定义一个叫做super-button的网站元素。

<super-button></super-button>

注意，自定义网页元素的标签名应该带有连字符（-），一个或多个都可。这是因为浏览器内置的的HTML元素标签名，都不带有连字符，这样可以做到有效区分。

下面的代码用于检测浏览器是否支持自定义元素。

if ('registerElement' in document) {
  // 支持
} else {
  // 不支持
}

使用自定义元素前，必须用document对象的registerElement方法登记该元素。该方式返回一个自定义元素的构造函数。

var SuperButton = document.registerElement('super-button');
document.body.appendChild(new SuperButton());

上面代码生成自定义网页元素的构造函数，然后通过构造函数生成一个实例，将其插入网页。

可以看到，document.registerElement方法的第一个参数是一个字符串，表示自定义的网站元素标签名。该方式还可以接受第二个参数，表示自定义网页元素的原型对象。

var MyElement = document.registerElement('user-profile', {
  prototype: Object.create(HTMLElement.prototype)
});

上面代码登录了自定义元素user-profile。第二个参数指定该元素的原型为HTMLElement.prototype（浏览器内部所有Element节点的原型）。

但是，如果写成下面这种，自定义网页元素就跟普通元素没有太大差别。自定义元素的真正优势在于，可以自定义它的API。

var buttonProto = Object.create(HTMLElement.prototype);
buttonProto.print = function() {
  console.log('Super Button!');
}
var SuperButton = document.registerElement('super-button', {
  prototype: buttonProto
});
var supperButton = document.querySelector('super-button');
supperButton.print();

上面代码在原型对象上定义了一个print方法webcomponents可以删除吗，然后将其指定为super-button元素的原型。因此，所有supper-button实例都可以调用print这个步骤。

如果想让自定义元素继承某种特定的网页元素，就要指定extends属性。比如，想让自定义元素继承h1元素，需要写成以下这种。

var MyElement = document.registerElement('another-heading', {
  prototype: Object.create(HTMLElement.prototype),
  extends: 'h1'
});

另一个是自定义按钮（button）元素的举例。

var MyButton = document.registerElement('super-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

如果要继承一个自定义元素（比如x-foo-extended继承x-foo），也是采用extends属性。

var XFooExtended = document.registerElement('x-foo-extended', {
  prototype: Object.create(HTMLElement.prototype),
  extends: 'x-foo'
});

定义了自定义元素之后，使用的过后，有两种方式。一种是直接使用，另一种是间接使用，指定为某个现有元素是自定义元素的示例。

<!-- 直接使用 -->
<supper-button></supper-button>
<!-- 间接使用 -->
<button is="supper-button"></button>

总之，如果A元素继承了B元素。那么，B元素的is属性，可以指定B元素是A元素的一个实例。

自定义元素的超强之处，就是可以在它里面定义新的属性和技巧。

var XFooProto = Object.create(HTMLElement.prototype);
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

上面代码登录了一个x-foo标签，并且指明原型继承HTMLElement.prototype。现在，我们就可以在原型里面，添加新的属性和技巧。

// 添加属性
Object.defineProperty(XFooProto, "bar", {value: 5});
// 添加方法
XFooProto.foo = function() {
  console.log('foo() called');
};
// 另一种写法
var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype, {
    bar: {
      get: function() { return 5; }
    },
    foo: {
      value: function() {
        console.log('foo() called');
      }
    }
  })
});

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/sanxing/article-120723-1.html