Polymer 入门（一）概念理解

date
Sep 2, 2014
slug
polymer-1
status
Published
tags
Computer
summary
type
Post
前段时间，在做学校的一个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. 找到视图
  1. 处理视图的数据
将数据给视图，我们也需要完成同样的步骤。但是如果有了数据绑定，我们的代码就是这样的：
<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，读者可以自己去查找相关资料。

© 连城究 2021