本文主要是介绍什么是Polymer?，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
http://www.codesama.com/2015/07/04/polymer-learn1/
- Polymer是google推出的一个以
Web Components为概念的WEB框架,你可以为自己创建一个HTML ELEMENT,能够像网页原生控件一样,可以应用在你网页的任何一个地方. 下面是一个简单的 Polymer 控件在网页中的写法.
1 2 3 4 5 | <!--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管.可以通过以下代码来理解:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<html> <style> button { background-color: red; // 设置button的背景色为红色. } </style> <button>我的背景色是红色</button> <!--my-button中包含原生button--> <my-button> <!--::shadow--> <button>我的背景色不改变</button> <!--::shadow--> <my-button> <!--::shadow表示my-button中自定义的html代码,将会在后面的教程中讲到--> <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的实现,你并不需要关心)
-
这篇关于什么是Polymer?的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
