什么是Polymer?

来源：互联网发布：cad不能访问到网络锁编辑：程序博客网时间：2024/06/05 14:08

http://www.codesama.com/2015/07/04/polymer-learn1/

Polymer是google推出的一个以Web Components为概念的WEB框架,你可以为自己创建一个HTML ELEMENT,能够像网页原生控件一样,可以应用在你网页的任何一个地方. 下面是一个简单的 Polymer 控件在网页中的写法.

<!--html--><my-element>我是一个polymer element.</my-element><!--html-->// NOTE: 可以看到,我们在网页中插入了一个 `tagName`为 'my-element'的element,他能够像原生控件一样,插入在任何地方.

什么是 Web Components 呢?
- 你也许用过做过很多基于客户端的应用开发,在UI设计阶段,你也许享受过不少工具携带的酷炫控件库,需要某些控件,直接拖拽或者写在UI语言里,非常方便,并且不少控件还带了自己的一些扩展方法.
- 于是Web Components 这个概念横空出世,你可以引入许多现成的 UI 控件库,也可以自己创建属于你自己的控件库,在你想应用的时候,去引用就能使用,非常方便.但是也许你会问,这和市面上很多Web UI库(比如 semantic ui,amazeui等)有什么不同?
  - 普通的Web UI库,都是通过直接设置CSS来达到所要的效果,缺点很明显,比如一个UI库带了一个 XX Button, 你可能在页面中用到的时候,是通过:
```
1
```
```
<button class="xx-ui xx-button "></button>
```
  - 这样来为你的button做样式定义,缺点在于,如果你为你的button定义了一个全局样式,那么可能会和xx-ui的button样式起冲突,从而达不到你想要的效果,很大的局限了你的自由发挥.
  - 但是 Polymer 不同, Polymer 通过自定义element,好处之一在于,你所定义的custom element不能与原生HTML element重名,首先就避免了css中tagName样式的污染.
  - 好处2: Polymer 所定义的element中,可以包含原生HTML Tag而不受污染, 例如你在全局为一个button的tag做了自定义样式,而在custom element中所包含的button不受全局污染,该button的样式控制区域,只归custom element管.可以通过以下代码来理解:
```
1234567891011121314151617
```
```
<html>    <style>        button {            background-color: red; // 设置button的背景色为红色.        }    </style>    <button>我的背景色是红色</button>        <my-button>                    <button>我的背景色不改变</button>            <my-button>    <html>
```
  - 这里涉及到了两个概念,shadow dom 以及shady dom.
    shadow dom && shady dom.
  - 1.shadow dom 是支持Polymer不被全局css污染的背后技术,他是由浏览器直接提供的原生API,只可惜该特性仅有少部分浏览器已经支持了,大部分浏览器在未来也会支持.
  - 2.shady dom, 在 Polymer 0.8版本之前,也就是最初的0.5版本,整个 Polymer 是用的shadow dom来实现的element的scope保护,但在0.8版本之后,Polymer为他增加了一个shady dom 特性,该特性是模拟shadow dom,使他能在各种主流浏览器上运行,而你根本不需要关心shadow dom渲染的和shady dom渲染的有什么不同,你尽管使用就好.(内部实现是用给custom element的host>child增加了scope class,而该scope class的实现,你并不需要关心)

0 0

什么是Polymer?

什么是 Web Components 呢?

shadow dom && shady dom.