关闭 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。假如你不想手动做一些更好的改变,它可以帮助你的代码迁移。

    上一篇返回首页 下一篇

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

    别人在看

    Destoon 模板存放规则及语法参考

    Destoon系统常量与变量

    Destoon系统目录文件结构说明

    Destoon 系统安装指南

    Destoon会员公司主页模板风格添加方法

    Destoon 二次开发入门

    Microsoft 将于 2026 年 10 月终止对 Windows 11 SE 的支持

    Windows 11 存储感知如何设置?了解Windows 11 存储感知开启的好处

    Windows 11 24H2 更新灾难:系统升级了,SSD固态盘不见了...

    小米路由器买哪款?Miwifi热门路由器型号对比分析

    IT头条

    Synology 对 Office 套件进行重大 AI 更新,增强私有云的生产力和安全性

    01:43

    StorONE 的高效平台将 Storage Guardian 数据中心占用空间减少 80%

    11:03

    年赚千亿的印度能源巨头Nayara 云服务瘫痪,被微软卡了一下脖子

    12:54

    国产6nm GPU新突破!砺算科技官宣:自研TrueGPU架构7月26日发布

    01:57

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

    02:03

    技术热点

    如何删除自带的不常用应用为windows 7减负

    MySQL中多表删除方法

    改进的二值图像像素标记算法及程序实现

    windows 7 32位系统下手动修改磁盘属性例如M盘修改为F盘

    windows 7中怎么样在家庭组互传文件

    Linux应用集成MySQL数据库访问技巧

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

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