Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

初探 Polymer 1.0 之 Hello World

  最近在做 Chrome Only 的内部项目,于是大胆地开始尝试起 Polymer 来。Polymer 虽然自己有提供一套兼容方案,但我一直都很讨厌那满是黑魔法的 Shadow DOM 兼容实现。所以只有当需求是 Chrome Only 时才会考虑使用 Shadow DOM 相关的框架。
  首先,我领悟到的 Polymer 的一个基本理念是「所有东西都是组件,这些组件以 html 文件的形式封装,通过 LINK 元素来引入」。不知为什么,我觉得把 HTML、JS、CSS 全写在一个 html 文件里面的做法很好(虽然在六七年前我也是这么干的),这就是传说中的返璞归真么?
  光说不写代码就是扯蛋,于是我写个 Hello World 吧?首先,安装它(这里直接用了 bower,别问我 bower 是什么) bower install polymer#~1.0.0   写一个 hello.html,它定义了一个组件(后面再解释具体的含义) <link rel="import" href="bower_components/polymer/polymer.html" />
<dom-module id="demo-hello">
  <style>
    :host { color: red; }
  </style>
  <template>
    Hello World
  </template>
  <script>
    Polymer({ is: 'demo-hello' });
  </script>
</dom-module>
  然后有一个 demo.html 这个普通页面来引用这个组件 <link rel="import" href="hello.html" />
<demo-hello></demo-hello>
  执行的结果就是

  demo.html 应该不需要什么说明了吧?里面就是一个自定义标签和一个 HTML 引用,它们都是 Web Components 自带的特性,是规范内的,即使没有 Polymer 也能用。
  那么 Polymer 到底做了什么呢?重点在 hello.html 里面,因为在那边我们才引入了 polymer.html。实际上 polymer.html 里面定义了一些比较「底层」的组件。比如 dom-module 就是其中之一,它是用于定义组件(或者说模块?)的。定义一个组件的标准风格就是使用一个 dom-module,在里面放入 style、template、script 这三个元素(就是定义这个组件的 CSS、HTML、JS 三个部分)。但一些奇怪的限制是每个 dom-module 必须有 id,并且和 Polymer({ is: 'ID' }) 中的 ID 对应起来。因为一个 html 文件里可以定义多个组件,而 script 执行无法确定对应到哪个组件上,需要通过一个 id 来关联。这个 id 也是这个组件的标签名,上面我们定义了 id 为 demo-hello 的 dom-module,所以我们可以在 demo.html 中使用这个元素。
  虽然我觉得这套使用 ID 的定义方式非常奇怪,但我相信其中一定是有苦衷的,只是我现在还不理解而已。
  以上就是 Polymer 的最简例子(感觉比官方的 Tutorial 还简单)。另外还有一个坑,目前的 Polymer 默认不会使用 Shadow DOM 来实现,而是使用黑魔法兼容的方式来实现,如果要让它使用 Shadow DOM 必须在引入 polymer.html 前做一些配置。 <script>
var Polymer = Polymer || {}; 
Polymer.dom = 'shadow';
</script>
  这么重要的东西居然在官方文档的某个奇怪的角落定义我也是醉了。
  以上就是入门级的入门(我自己也是刚入门,如果有说错的地方请纠正之)。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^