免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › Web开发 › 使用 Polymer 构建你的前端应用
最近访问板块 发新帖
查看: 4319 | 回复: 1
打印 上一主题 下一主题

[JavaScript] 使用 Polymer 构建你的前端应用 [复制链接]

Coding扣钉

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2015-03-03 11:53 |只看该作者 |倒序浏览
使用 Polymer 构建你的前端应用

初识
Polyme 是 Google I/O 201 发布的一个新的  Web UI  框架。 Polymer 的核心原则是  Everything is an element 。它是一款实用、基于事件驱动、封装性和互操作性强的  Web UI  开发框架。

在了解 Polymer 之前，如果你没有了解过  Web Components ，推荐去了解下  Web Components 规范。可以通过 Web Components Wiki  了解，Polymer 用到的有  Shadom Dom ,  Custom Element  , HTML Imports 等 Web Components 技术。


安装 Polymer

Polyme 提供几种方式安装源码。

Bower 安装，推荐使用此方法安装。如果您对 bower 不熟悉，可以自行 Google 了解。如果已经安 bower ，可以使用命令直接安装： bower install --save Polymer/polymer
直接下载 zip 包， zip下载地址 。
GitHub Polymer 源码，Polymer链接。

构建自己的 Polymer 应用

创建一个 Polymer 元素
Polyer 支持创建自定义元素，在外部看来就像其他的 DOM 元素，但是在内部，提供便利的数据绑定和其他丰富的功能，使用更加少的代码，构建复杂的应用。
创建一个新的 Polye 元素，需要：

1. 引入 Polymer  核心组件， polymer.html
2. 使用 <polymer-element> 声明自定义元素

下面例子，将创建一个名字为  my-element  的元素：
  1. <link rel="import" href="../bower_components/polymer/polymer.html">
  2. <polymer-element name="my-element">
  3.     <template>
  4.         <span>This is element content</span>
  5.     </template>
  6.     <script>
  7.       Polymer({ ready: function() {
  8.         //...
  9.       }})
  10.     </script>
  11. </polymer-element>
复制代码
Polyme 元素主要由俩部分构成, <template> 和 <script> ,其中 <template> 是 Polymer 元素的 HTML 模板， <script> 是模板对应的  javascript 代码。
注意到 <script> 标签中的 Polymer 构造方法， Polymer 构造方法是一个对 document.registerElement 的包装，并且提供一些特殊的功能，比如数据绑定和事件映射， Polymer 构造方法接受一个对象参数，定义该元素的 prototype 。
有些  Polymer 元素并不需要  javascript  代码，可以使用 noscript 属性声明：
  1. <polymer-element name="my-element" noscript>
  2. ...
  3. </polymer-element>
复制代码
你可以在这里查看 Polymer 的 API 。

使用自定义的 Polymer 元素
定义好自己的  Polymer 元素之后，就可以通过 import 的方式引入它（通过 import 引入的文件，即使引入多次，浏览器也只会请求一次。）。在  HTML 代码中引入自定义的元素并且使用它。首先需要引入  webcomponents.js 依赖。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="webcomponents.js"></script>
  5. <link rel="import" href="/elements/my-element/my-element.html">
  6. </head>
  7. <body>
  8. <my-element></my-element>
  9. </body>
  10. </html>
复制代码
遵循 Everything is an element 的原则，在 HTML 页面中，我们会很少看到需要写一些  javascript 代码，这样就使得 HTML 文件代码看起来很清爽。

虽然上面例子看起来只有短短几行简单的代码，但是`Polymer`支持创建丰富的可复用的组件，其中`Polymer`官网就提供许多供使用和学习的基础组件 core-elements 和 paper-elements。

更多功能

Shadow DOM

在 Polymer 可以使用 Shadow DOM 从模板中分离视图内容，创建一个使用 Shadow DOM 的 template 十分简单，使用  <content></content> 来选择需要替换的元素即可。
  1. <polymer-element name="my-element" noscript>
  2. <template>
  3. <span>This is content: </span>
  4. <content select="q"></content>
  5. </template>
  6. </polymer-element>
复制代码
使用的时候，只需要在`Polymer`标签内部嵌入 Light DOM 。
  1. <my-element>
  2. <q>Hello World</q> <!--Light DOM-->
  3. </my-element>
复制代码
布局属性
Polymer 使用 CSS Flexbo 定义了一系列基础布局样式。具体可以点击这里查看。
只需要简单的在标签上引入布局属性就可以轻松使用。
  1. <div horizontal layout>
  2. <div>A</div>
  3. <div>B</div>
  4. <div>C</div>
复制代码
模板表达式
Polymer 支持在模板中使用 {{}} 执行 javascript 表达式，基础支持有：

  • 标示符和路径。比如： foo  、 match.set.game
  • 数组访问。比如： array
  • 非逻辑。比如： !
  • 一元表达式。比如： +i , -a
  • 二进制操作。比如： + , - , * , / , %
  • 比较操作。比如： == , < , > , <= , >= , != , === , !==
  • 逻辑比较。比如: foo && bar , foo || bar
  • 三元表达式。比如： a ? b : c  
  • 分组。比如：`(a + b) * (c + d)`
  • 字符值 （数字、字符，null,undefined） 。
  • 数组和对象。如： [foo, 1] , {id: 1, foo: bar}         
  • 函数。如： reverse(my_list)


Polymer 还支持以下表达式：

  
  • 计算表达式。可以直接使用类似  {{a + b}} 的方式，也可以使用如下方式处理比较复杂的计算：
  1. <link rel="import" href="../bower_components/polymer/polymer.html">
  2. <polymer-element name="my-element" >
  3. <template>
  4. <span>The result is {{result}}</span>
  5. </template>
  6. <script>
  7. Polymer({
  8. computed: {
  9. result: '1 + 100'
  10. }
  11. })
  12. </script>
  13. </polymer-element>
复制代码
  • 表达式  Scope  详见  (请到 blog.coding.net 阅读原文)
  •   Filter  表达式。使用 {{expression | filterName }} 执行 Filter表达式，跟  Angular 的 Filter 有些类似。详见 (请到 blog.coding.net 阅读原文)



    数据绑定
    Polymer  提供多种数据绑定方法。

    • 单模板实例。使用 bind 属性绑定一个对象到模板实例,详见 。 (请到 blog.coding.net 阅读原文)
    1. <template>
    2. <template bind="{{person}}">
    3. He's name is {{name}}.
    4. </template>
    5. </template>
    复制代码
    还可以使用 as 为对象创建一个命名空间：
    1. <template>
    2. <template bind="{{person as p}}">
    3. He's name is {{p.name}}.
    4. </template>
    5. </template>
    复制代码
    模板迭代。使用`repeat`属性迭代， 详见 (请到 blog.coding.net 阅读原文) ：
    1. <template>
    2. <template repeat="{{user in users}}">
    3. {{user.name}}
    4. </template>
    5. </template>
    复制代码
    • 条件绑定

    使用 if 属性有条件的绑定模板实例：
    1. <template>
    2. <template if="{{conditional}}">
    3. The conditional is true
    4. </template>
    5. </template>
    复制代码
    Polymer 不仅提供以上的方式绑定数据，而且提供了很多其他的方法，使得模板之间的复用十分便利。更多关于数据绑定可以查看官网 API

    总结
    Polymer 拥有许多基础模板和很强的组件模型。作为一款还在成长中的 Web UI 框架，其很多设计思想值得学习和思考。

    ---

    Coding 是个云端开发协作平台，极简的一站式开发服务包括了项目协作，代码托管，质量检测，演示部署，代码在线阅读等功能。Coding 官方博客 ( blog.coding.net)，是团队小伙伴在开发过程中的学习与分享，如需转载，请注明出处与作者哦 !
下载地址, Google, element, 操作性, 技术
5477608

论坛徽章:
1
2015小元宵徽章 日期:2015-03-06 15:58:18
2楼 [报告]
发表于 2015-03-05 11:53 |只看该作者
提示: 作者被禁止或删除 内容自动屏蔽
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP