首先需要说明的是这不是一篇 Web Components 的科普文章,如果对此了解不多推荐先读《A Guide to Web Components》。 有句古话-“授人以鱼,不如授人以渔”,如果把组件比作“鱼”的话,对于前端开发者而言,W3C组织制定的HTML标准以及浏览器厂商的实现都是“鱼”而 不是“渔”,开发者在需求无法满足的情况下通过现有技术创造了各种组件,虽然短期满足了需求但是由于严重缺乏标准,导致同一个组件有成千上万的相似实现但 它们却无法相互重用,这很大程度上制约了组件化的最大价值-重用,Web Components则在组件标准化方面向前迈了一大步。

Web Components 的出现给组件标准化带来了很好的契机:

  • WEB组件目前仍然依靠各种类似"Hack"的方式来模拟,模拟方式也各有不同,很难统一和标准化,而 Web Components 则直接提供了标准化的组件定义方式,这是组件标准化的基石,使得未来的组件能够统一创建、方法调用、事件监听、属性访问等。
  • 基于标准化的组件定义方式,我们便可以像W3C等标准组织一样来定义组件标准,无需再依赖、等待“内置”组件,这也使得我们获得了“渔”的能力。

可选的类库

  • Polymer       http://docs.polymerchina.org/1.0/
  • X-Tag           http://x-tag.github.io/
  • Mozilla Brick  http://brick.mozilla.io/
  • ReactJS        http://facebook.github.io/react/
  • Bosonic        http://bosonic.github.io/

可选的Web Components类库的更多相关文章

  1. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  2. 一个使用 Web Components 的音乐播放器: MelodyPlayer

    先上效果预览: Web Components 首先,什么是 Web Components ? MDN 给出的定义是: Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的 ...

  3. 前端未来趋势之原生API:Web Components

    声明:未经允许,不得转载. Web Components 现世很久了,所以你可能听说过,甚至学习过,非常了解了.但是没关系,可以再重温一下,温故知新. 浏览器原生能力越来越强. js 曾经的 JQue ...

  4. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  5. Web Components初探

    本文来自 mweb.baidu.com 做最好的无线WEB研发团队 是随着 Web 应用不断丰富,过度分离的设计也会带来可重用性上的问题.于是各家显神通,各种 UI 组件工具库层出不穷,煞有八仙过海之 ...

  6. 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  7. Polymer——Web Components的未来

    什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框 ...

  8. The state of Web Components

    Web Components have been on developers’ radars for quite some time now. They were first introduced b ...

  9. Web Components

    Web Components是不是Web的未来   今天 ,Web 组件已经从本质上改变了HTML.初次接触时,它看起来像一个全新的技术.Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以 ...

随机推荐

  1. 转载 javascript中的正则表达式总结 二

    学习正则表达式 今年的第一篇javascript文章就是这个正则表达式了,之前的文章是转载别人的,不算自己的东西,可以忽略不计,最近突然想把转载别人的东西 统统删掉,因为转载过的文章,我根本没有从中获 ...

  2. ERP仓库管理系统(九)

    需求分析: 1.设计库房表,至少包括两个字段,库房名称,库房所属公司的ID(在客户资质审批表中找到对应公司的ID) 2.设计增.删.改.查一套程序,其中的删除要做限制,只要有库存数据存在则不允许删除对 ...

  3. iOS APP上线流程

    前言:作为一名IOS开发者,把开发出来的App上传到App Store是必须的.下面就来详细介绍下具体流程. 1.打开苹果开发者中心:https://developer.apple.com 打开后点击 ...

  4. 【转】React.js 概览

    原文转自:http://segmentfault.com/blog/jiyinyiyong/1190000000693651 这里关于 React 的收集的消息的一个提纲, 具体内容看下边的链接,微博 ...

  5. MySQL 全文搜索支持

    MySQL 全文搜索支持 从MySQL 4.0以上 myisam引擎就支持了full text search 全文搜索,在一般的小网站或者blog上可以使用这个特性支持搜索. 那么怎么使用了,简单看看 ...

  6. 《JavaScript Ninja》之挥舞函数

    挥舞函数 匿名函数为什么如此重要 通常使用匿名函数的情况是,创建一个供以后使用的函数.例如,将匿名函数保存在一个变量里,将其作为一个对象的方法,或者是将匿名函数作为一个回调.-->在这些情况下, ...

  7. ReentrantLock获取锁方式解读(转)

    原文地址:http://www.zhihu.com/question/36771163 (一) lock()方法获取锁.如果该锁没有被另一个线程保持,则获取该锁并立即返回,将锁的保持计数设置为 1.如 ...

  8. Windows 10下Chrome不能启动的问题

    不能启动了 Chrome突然不能启动了,点击图标也没反应,打开任务管理器,发现点击图标后,Google Ghrome短暂地出现,随即消失. 如何解决? 解决方案 打开安装目录: C:\Program ...

  9. Think Python - Chapter 03 - Functions

    3.1 Function callsIn the context of programming, a function is a named sequence of statements that p ...

  10. JAVA 遍历文件夹下的所有文件

    JAVA 遍历文件夹下的所有文件(递归调用和非递归调用) 1.不使用递归的方法调用. public void traverseFolder1(String path) { int fileNum = ...