Polymer 入门(一)概念理解

前段时间,在做学校的一个SB导航(Demo),在做之前,我准备用Angular来做。但是Angular实际上太过于Heavy,而且也缺少一个集成度很高的UI库,而在查找资料的时候,我找到了Polymer(吐槽一下,这个主页居然还有V6通道)。然后Polymer的一些新的特性吸引了我,它有双向绑定,模板,等这些Angular具有的功能,同时还具有一个完全是Material Design的UI库。

官方是这么介绍Polymer的:

Polymer is a new type of library for the web, designed to leverage the existing browser infrastructure to provide the encapsulation and extendability currently only available in JS libraries.

Polymer旨在未来的Web设计,他充分利用了Shadow Dom,自定义元素,以及模型驱动的视图。目前Polymer通过js完成这些任务,但是未来的浏览器会自己(native)完成。

在我看来,Polymer是一个Angular的简化版,Angular可以使用的新奇特性,Polymer基本都可以更简单的完成(当然功能上也存在着一些瓶颈),而且Polymer内置了一个2个UI库,可以更方便的投入到实际运用中。

这里我就将为大家介绍一下Polymer,当然比起我在这里介绍,最好的方法还是去官方看文档。

Polymer一览:Polymer是如何工作的

这里我使用了官方的例子:

<!-- 自定义元素 -->
<polymer-element name="my-counter" attributes="counter">
  <template>
    <style> /*...*/ </style>
    <div id="label"><content></content></div>
    Value: <span id="counterVal">{{counter}}</span><br>
    <button on-tap="{{increment}}">Increment</button>
  </template>
  <script>
    Polymer({
      counter: 0, // Default value
      counterChanged: function() {
        this.$.counterVal.classList.add('highlight');
      },
      increment: function() {
        this.counter++;
      }
    });
  </script>
</polymer-element>

<!-- 使用元素 -->
<my-counter counter="10">Points</my-counter>

我们可以从以上的例子中,发现很多Polymer的特点。
例如:自定义元素,双向绑定({{}}这个记号就是双向绑定的标记),事件绑定,和自动的查找节点(this.$.conterVal找到了dom中id="conterVal"的dom node)。

概念理解

对于一些没有用过Angular的人来说,Polymer有些东西确实一开始很难理解,所以有必要在这里单独说下:

双向绑定 (Data Binding)

相对于Angular具有Scope而言,Polymer是没有单独的Scope的,而一个Custom Element内部就是一个Scope,也就是说,数据绑定只在一个自定义元素内部有用。那数据绑定究竟是什么呢?

如果学过一些简单的写界面的语言,我们可以经常看到这样的写法

//从视图中取数据
int inputData = Form.findWidgetById(inputId).text();
//把数据呈现给视图
Form.findWidgetById(widgetId).setText(myData);

我们可以看到,如果我们要和视图中的数据交互,我们需要完成这样的步骤

  1. 找到视图
  2. 处理视图的数据

将数据给视图,我们也需要完成同样的步骤。但是如果有了数据绑定,我们的代码就是这样的:

<input>{{myData}}</input>
<p>your data is {{myData}}</p>

这只是一个最简单的例子,它完成了单个页面内的绑定,你输入的数据将会即使的呈现。而绑定的双向体现在,无论哪一边发生了改变,另外一边也将会发生改变。

不仅可以这么绑定,还可以把数据绑定给样式,变量。如果你的变量来自于一个Ajax请求,当请求到达时,你的视图也会即时改变。

多说一句,现在的数据绑定是借助js脏检查实现的,但是在ECMAScript6里面已经有了Object.Observe()方法专门用于数据绑定。

一切皆元素

在Polymer的世界中,一切皆元素。这到了什么地步呢?如果你想在页面中发起一个Ajax请求,你再也不需要调用jQuery的某个ajax组件,而是在页面内添加一个新的元素。

理解一切皆元素是一个巨大的挑战。因为Polymer的设计模式和jQuery的设计模式是完全不一样的,对于一些从jQuery转过来的前端er可能会将jQuery的设计模式带到Polymer中来。jQuery的核心是操作Dom元素,但是Polymer不是的。Polymer的核心是自定义元素,是你自己对某个组件的封装。从整体上而言,你并不需要去操控Dom,因为在组件内部,Dom的组成,方法,事件都已经决定好了(况且最后根本都是Shadow Dom)。

所以我希望在学习Polymer的时候,可以彻底忘掉jQuery。二者各有各的长处,但在Polymer这里,使用jQuery是完全没有必要。

其他

还有一些必要的概念,比如Shadow Dom,读者可以自己去查找相关资料。

Table of Contents