|
Web Components是W3C定义的新标准，目前还处于草案阶段，但各大浏览器已经开始支持。它给了前端开发者扩展浏览器标签的能力，可以自由的定制组件，更好的进行模块化开发，彻底解放了前端开发者的生产力。 头条推荐Web Components - 面向未来的组件标准开发者在需求无法满足的情况下通过现有技术创造了各种组件，虽然短期满足了需求但是由于严重缺乏标准，导致同一个组件有成千上万的相似实现但无法重用，很大程度上制约了组件的价值，Web Components则在组件标准化方面向前迈了一大步。……>>详细 1 Web Components入门教程今天 ,Web 组件已经从本质上改变了HTML。初次接触时，它看起来像一个全新的技术。Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力，可以自由的进行定制组件。面对新的技术，你可能会觉得无从下手。那这篇文章将为你揭开Web组件神秘的面纱。如果你已经熟知HTML标签和DOM编程，已经拥有了大量可用 的Web组件，那么你已经是Web组件专家了。 Web组件的现状随着各式各样的用户需求，浏览器的原生组件已经无法满足需求。Web组件也就变得越来越重要。 我们将以自定义一个传统三方插件为例来介绍Web组件。 首先，需要引用插件的CSS和JavaScript资源： 2 谷歌：web组件才是web开发的未来？
对于众多Chrome开发者而言，web组件显然是一个距离Chrome核心最近的主题。举个例子，在本周的一次炉边会议上，许多业界人士都认为web组件是Chrome最主要的功能之一。 目前，许多谷歌工程师正在努力开发Project Polymer，这些工程师的目标，是编写出一个网页应用框架，程序员不仅可以在这个框架上构建web组件，而且可以利用web组件，在浏览器上构建出目前技术无法实现的一些功能。 在本届谷歌I/O大会上，web组件技术已经出露端倪，比如WebGL，还有其他一些已经建立的网页开发技术。非常明显，谷歌相信，web组件技术正潜在地改变着程序员编写未来网web应用的方式。 3 什么是Shadow Dom？如果你做过网站，那么很可能你已经用过一些JavaScript类库。既然如此，你可能会对这些不知名的类库作者心存感激。 这些作者——web开发领域的勇士们——都面对着同样的一个问题——封装。他们会花大量的精力在面向对象的经典问题之一上面，即如何封装自己的代码，以便与类库使用者的代码分离。 除了SVG，现在的Web平台只提供了一种原生的方法去隔离代码块，这并不优雅。没错，我说的就是iframe。对大部分需要封装的场景来说，frames太重而且限制太多。 如果我需要把每个自定义的按钮都放到iframe里，你是什么感觉，会不会疯掉？ 4 使用Shadow DOM创建Web组件本文概述Web Components（组件）标准是一系列最新推出的标准，它可以被用来创建可被复用的Web部件，当页面中所使用的Web部件被更新为新版本时不必修改 页面中其他任何代码。这里所说的部件，是一种可实现与用户之间的交互的可视化组件，开发者可以使用HTML代码与JavaScript脚本代码来开发这些 部件。Web Componnts标准定义如何开发这些部件。 目前为止，由于一些基本问题，导致使用HTML代码与JavaScript脚本代码开发出来的部件很难被应用在页面中，这些问题包括：一个部 件内的DOM树并没有被封装，这意味着你的样式表中的样式可能被意外地被应用到部件中，你的JavaScript脚本代码可能会修改部件中的某个部分，你 定义的ID可能会与部件内部所使用的ID相同等等。 最糟糕的是，由于部件没有被封装，如果你更新了部件，更改了其中的内部细节，你的页面上的样式表及JavaScript脚本代码可能会导致意想不到的结果。 一个Web组件通常由四个部分组成：模板、Shadow DOM、自定义元素与打包，其中Shadow DOM解决了组件在页面中的封装问题。可以结合使用这四个部分，也可以单独使用其中的一两个部分。本文介绍如何使用Shadom DOM。目前为止只有Chrome 25浏览器支持Shadow DOM,且使用时必须书写webkit前缀。 5 Google Polymer以及Web UI框架的未来虽然今年的Google I/O也已结束，但会上揭晓的新技术、新工具仍然让开发者兴奋不已。其中Web开发方面尤以Ploymer和Web Components为重。 Polymer 由加盟Google的原Palm webOS开发团队打造，是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。Web Components则提供了一种更彻底的解耦方式，更加方便了UI的开发和模块化，可以说是Polymer的基础之一。 开发者Axel Rauschmayer在自己的博客上详解了Polymer的设计理念与组成架构，深得Polymer开发者sjmiles（Scott J. Miles）的认同。CSDN编译如下： 在刚刚结束的Google I/O 2013中，Google发布了一个新的Web UI框架——Polymer，似乎为所有Web UI框架指明了发展方向。 7 Web Components实例：移动UI组件库GMU介绍GMU（Global Mobile UI）是百度前端通用组开发的移动端组件库，具有代码体积小、简单、易用等特点，组件内部处理了很多移动端的bug，覆盖机型广，能大大减少开发交互型组件的工作量，非常适合移动端网站项目。 特点：
|
|
|
