什么是Polymer?

最新推荐文章于 2020-08-06 11:11:38 发布

SalmonellaVaccine

最新推荐文章于 2020-08-06 11:11:38 发布

阅读量937

点赞数

分类专栏： Polymer

Polymer 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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管.可以通过以下代码来理解:

<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的实现,你并不需要关心)