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

    上一篇返回首页 下一篇

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

    别人在看

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

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

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

    帝国CMS7.5编辑器上传图片取消宽高的三种方法

    帝国cms如何自动生成缩略图的实现方法

    Windows 12即将到来,将彻底改变人机交互

    帝国CMS 7.5忘记登陆账号密码怎么办?可以phpmyadmin中重置管理员密码

    帝国CMS 7.5 后台编辑器换行,修改回车键br换行为p标签

    Windows 11 版本与 Windows 10比较,新功能一览

    Windows 11激活产品密钥收集及专业版激活方法

    IT头条

    无线路由大厂 TP-Link突然大裁员:补偿N+3

    02:39

    Meta 千万美金招募AI高级人才

    00:22

    更容易爆炸?罗马仕充电宝被北京多所高校禁用,公司紧急回应

    17:19

    天衍”量子计算云平台,“超算+量算” 告别“算力孤岛时代”

    18:18

    华为Pura80系列新机预热,余承东力赞其复杂光线下的视频拍摄实力

    01:28

    技术热点

    MySQL基本调度策略浅析

    MySQL使用INSERT插入多条记录

    SQL Server高可用的常见问题

    3D立体图片展示幻灯片JS特效

    windows 7上网看视频出现绿屏的原因及解决方法

    windows 7 64位系统的HOSTS文件在哪里?想用它加快域名解析

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

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