关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » UI前端 »Polymer 1.0 升级指南

    Polymer 1.0 升级指南

    2015-07-25 00:00:00 出处:ITJS
    分享

    在最近结束的 Google IO 2015,Google 发布了期待已久的 Polymer 1.0,并宣布可用于生产环境,使用 Polymer 库的人们还在使用开发预览版,本文将做为一个指南,指导将现在应用迁移到 Polymer最新版本。

    关于 v1.0 一些重要的注意事项:

    它不兼容 version 0.5,上一个版本和存活至今的最老版本。 新版主要关注性能和效率,库的总量大幅缩减。 从底层彻底重建之后,开发人员可以使用它更容易更快地设计自定义元素,更像是标准的 DOM 元素。 与上一个版本相比内部基准测试显示 v1.0 在 Chrome 上快 3 倍,在 Safari 上快 4 倍。

    安装最新版本 Polymer 的步骤与该文中的完全相同,假如想升级已安装的 Polymer,定位到 Polymer 的目录并在终端中运行下面的命令:

    $ bower update

    要知道非常重要的一点,这个操作会破坏现有的 Polymer 应用,就像之前提到的,两个不同版本的 Polymer 是互不兼容的。因此,建议在一个单独的目录下安装全新的 Polymer。为解释自 v0.5 版本以来的变化,我们引用我之前写在 SitePoint 上的文章里关于信用卡图表自定义元素的例子来展示两个版本间的不同。

    Polyfilling 不支持浏览器

    新版本的 Polymer 不再需要包含在 webcomponents.js 库里面的 shadow DOM 的 polyfill,取而代之的是使用一个更小的叫 webcomponents-lite.js 的库来 polyfill 旧的浏览器。

    0.5版本:

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

    1.0版本

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

    这个”轻量级”的版本较之前的内容增加大约 80kb,当遇到性能瓶颈的时候这些改变将变得非常有意义。

    定义自定义元素

    <polymer-element>;标签已被保存自定义元素规定的<dom-module>标签所替换。自定义的元素现在由<dom-module>标签的 id 属性标识。自定义元素的规则仍然不变。

    0.5版本:

    <polymer-element name="credit-card">
      ...
    </polymer-element>

    1.0版本:

    <dom-module id="credit-card">
      ...
    </dom-module>

    注册自定义元素

    在此之前,我们可以通过简单的调用 Polymer()构造函数注册自定义元素。假如<script>标签在<polymer-element>标签中,指定自定义元素名称是可选的。在这个版本中,自定义元素现在可以在源码中使用关键词 is 来注册。

    0.5版本:

    Polymer('credit-card', {});

    1.0版本:

    Polymer({
      is: 'credit-card'
    });

    is 的值必须与自定义元素的 <dom-module> 标签的 id 属性相匹配,这一点与以前的版本不同,它是不可选的。
    <script>标签可以被放在 <dom-module> 元素的内部或者外部,但 <dom-module> 元素的模板必须在调用 Polymer constructor 之前解析。

    自定义元素属性

    任何属于<polymer-element>标签的现在都应该根据数据类型定义为 properties 对象。

    版本0.5:

    <polymer-element name='credit-card' attributes='amount'>

    版本1.0:

    Polymer({
      is: 'credit-card',
      properties: {
        amount: {
          type: Number
        }
      }

    自定义元素样式

    现在元素样式定义在<template>标签外边。

    版本0.5:

    <polymer-element name="credit-card" attributes="amount">
      <template>
        <style>
          ...
        </style>
      </template>
    </polymer-element>

    版本1.0:

    <dom-module id="credit-card">
      <style>
        ...
      </style>
    
      <template>
        ...
      </template>
    </dom-module>

    外部样式表支持使用 HTML Imports。

    数据绑定

    Polymer 1.0 版本提供了二种类型的数据绑定:

    二对中括号创建一个单向绑定。数据流是向下的,宿主向子应用,并且绑定决不会修改宿主属性。 二对大括号创建一个自动绑定,数据流是单向或者双向的。取决于目标属性配置是否为双向绑定。

    在这个 release 版本中,绑定必须替换一个结点的所有文本内容,或者某个属性的所有值。所以是不支持字符串连结操作的。对于属性值,建议使用计算绑定来代替字符串连结。

    版本0.5:

    <input type="submit" value="Donate {{amount}}">

    版本1.0:

    <template>
      <input type="submit" value="[[computeValue(amount)]]">
    </template>
    Polymer({
      is: "inline-compute",
      computeValue: function(amount) {
        return 'Donate ' + amount;
      }
    });

    注意一个结点中绑定标示两侧不能包含任意空白符。

    新的 shady DOM

    Polymer v0.5 使用 shadow DOM 给开发人员提供一个更简单的元素接口,并通过隐藏子树后面的影子根来抽象复杂性。这是最基本形式的封装,它工作在浏览器中并提供 shadow DOM。

    对于浏览器来说,它是不能提供 shadow DOM 的,像本地 shadow DOM 那样实现一个多边形填充是困难的,通常这会比本地实现慢,还会需要更多的代码。正是这些原因, Polymer 团队决定拿走 shadow DOM 填充,并用本地 DOM,用较轻版本构建来支持更小的 shadow DOM。

    要注意的是 shady DOM 和 shadow DOM 是相互兼容的,这意味着 shady DOM 的 API 使用浏览器中有效的本地的shadow DOM,而在不支持的浏览器中就会回到 shady DOM。

    总结

    把你的应用升级到 Polymer v1.0 可能是一个痛苦缓慢过程,这取决于你的应用灵活性,但是这种升级会在更快的加载时间和更小的负载方面带来巨大的好处。官方迁移向导是有效的,在 Polymer 项目网站上涵盖了一大堆对内部 API 的改变,这些变更的层次很深,因此需要仔细检查。

    另外,Chuck Horton 已经建立了一个 Github 仓库,叫做 Road to Polymer 1.0,它提供了一个代码转换工具让你的代码从 v0.5 升级到 v1.0。假如你不想手动做一些更好的改变,它可以帮助你的代码迁移。

    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    正版 Windows 11产品密钥怎么查找/查看?

    还有3个月,微软将停止 Windows 10 的更新

    Windows 10 终止支持后,企业为何要立即升级?

    Windows 10 将于 2025年10 月终止技术支持,建议迁移到 Windows 11

    Windows 12 发布推迟,微软正全力筹备Windows 11 25H2更新

    Linux 退出 mail的命令是什么

    Linux 提醒 No space left on device,但我的空间看起来还有不少空余呢

    hiberfil.sys文件可以删除吗?了解该文件并手把手教你删除C盘的hiberfil.sys文件

    Window 10和 Windows 11哪个好?答案是:看你自己的需求

    盗版软件成公司里的“隐形炸弹”?老板们的“法务噩梦” 有救了!

    IT头条

    公安部:我国在售汽车搭载的“智驾”系统都不具备“自动驾驶”功能

    02:03

    液冷服务器概念股走强,博汇、润泽等液冷概念股票大涨

    01:17

    亚太地区的 AI 驱动型医疗保健:2025 年及以后的下一步是什么?

    16:30

    智能手机市场风云:iPhone领跑销量榜,华为缺席引争议

    15:43

    大数据算法和“老师傅”经验叠加 智慧化收储粮食尽显“科技范”

    15:17

    技术热点

    商业智能成CIO优先关注点 技术落地方显成效(1)

    用linux安装MySQL时产生问题破解

    JAVA中关于Map的九大问题

    windows 7旗舰版无法使用远程登录如何开启telnet服务

    Android View 事件分发机制详解

    MySQL用户变量的用法

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。