【转】Polymer API开发指南 (一)(翻译)
原文转自:http://segmentfault.com/blog/windwhinny/1190000000592324
翻译的不好,轻拍
Polymer是google的一款前端开发框架,其基于Shadow DOM、Custom Elements、MDV等最新浏览器特性构建,代表了下一代Web框架的方向:一切皆组件、尽量减少代码量、尽量减少框架限制。
名词解释
- Attribute: 元素声明或者创建时需要的属性。
- Property: 属性、元素或者类向外提供的数据区域,例如js对象的属性。
- Polyfill: 指的是通过第三方脚本对老旧浏览器进行的修补,通过这些修补使之能够支持新浏览器的特性。
Web components标准主要由以下3个部分组成:
- Custom Elements
- Shadow DOM
- HTML Imports
元素声明
Polymer的核心是Custom Elements,定义一个Polymer元素和定义一个普通的Custom Elements是差不多的。主要的区别就是Polymer使用polymer-element
标签进行声明。
<polymer-element name="tag-name" constructor="TagName">
<template>
<!-- 在这里放置shadow DOM -->
</template>
<script>Polymer('tag-name');</script>
</polymer-element>
Attrubtes
Polymer在polymer-element
标签上预留了一些特殊的attribute。
Attribute | 必要 | 描述 |
name | 是 | Polymer元素名,名称中需要包含"-" |
attributes | 否 | 指定元素的Published properties |
extends | 否 | 指定元素继承其它元素 |
noscript | 否 | 不需要调用Polymer()的简单元素 |
constuctor | 否 | 放置在全局对象(如window )中的元素构造器名,允许用户通过new 来新建此元素.(如: var tagName = new TagName() ) |
默认 Attribute
你在polymer-elemnet
上设置的其他 attribute 将会自动添加到元素实例上。例如:
<polymer-element name="tag-name" class="active" mycustomattr>
<template>...</template>
<script>Polymer('tag-name');</script>
</polymer-element>
当一个tag-name
实例被创建的时候,它就会自带两个默认 attribute : class="active"
和mycustomattr
。
<tag-name class="active" mycustomattr></tag-name>
Attribute大小写
HTML解析器对 attribute 大小写敏感是没有必要的,但是Javascript却对大小写敏感。
书写时你可以忽略属性名的大小写,但是当你运行并查看元素的属性列表时,属性名永远都是小写的,Polymer会谨慎的将* property* 和 attribute 一一配对。例如:
<name-tag nameColor="blue" name="Blue Name"></name-tag>
在DOM中nameColor
是小写的,并且通常都会被忽略不处理。
下面例子也都会正常工作:
<name-tag NaMeCoLoR="blue" name="Blue Name"></name-tag>
<name-tag NAMECOLOR="red" name="Red Name"></name-tag>
<name-tag NAMEcolor="green" name="Green Name"></name-tag>
其它声明元素的方法
考虑到重构的需要,我们有时候不会将脚本放置在元素标签里,而是独立成一个文件。Polymer元素也可以通过外部脚本中调用Polymer('tag-name')
来创建。
<!-- 1. 在元素声明内部添加外部脚本 -->
<polymer-element name="tag-name">
<template>...</template>
<script src="path/to/tagname.js"></script>
</polymer-element>
<!-- 2. 在元素声明之前添加外部脚本 -->
<script src="path/to/tagname.js"></script>
<polymer-element name="tag-name">
<template>...</template>
</polymer-element>
<!-- 3. 没有脚本 -->
<polymer-element name="tag-name" constructor="TagName" noscript>
<template>
<!-- shadow DOM here -->
</template>
</polymer-element>
快速注册
元素也可以只通过JS来注册:
<script>
Polymer('name-tag', {nameColor: 'red'});
var el = document.createElement('div');
el.innerHTML = '\
<polymer-element name="name-tag" attributes="name">\
<template>\
Hello <span style="color:{{nameColor}}">{{name}}</span>\
</template>\
</polymer-element>';
//如果不将这个元素声明放入DOM内的话,custom elements的polyfill就找不到它。
document.body.appendChild(el);
</script>
<name-tag name="John"></name-tag>
需要注意的是,要将polymer-element
放入DOM中,这样custom element
的polyfill才能找到它。
添加公开的property和方法
如果你想要定义一些方法或者 property 时(可选),在Polymer()的第二个参数中传递包含定义信息的对象即可。
下面这个例子中,定义了一个property: message
, 一个使用到了ES5 getter特性的property: greeting
, 还有一个方法:foo
。
<polymer-element name="tag-name">
<template></template>
<script>
Polymer('tag-name', {
message: "Hello!",
get greeting() {
return this.message + ' there!';
},
foo: function() {...}
});
</script>
</polymer-element>
注释: this是这个Polymer元素在自己内部他本身的引用。例如:this.localName == 'tag-name'.
注意: 当元素的property是一个js对象或者数组时需要注意,由于prototype
的一些特性,你可能会在同一类元素的不同实体中,陷入shared state
问题。如果你想初始化一个property为对象或者数组的时候,不要在prototype
中赋值,而应该在created
回调中赋值。
// 正确
Polymer('x-foo', {
created: function() {
this.list = []; // Initialize and hint type to be array.
this.person = {}; // Initialize and hint type to an object.
}
});
// 错误
Polymer('x-foo', {
list: [], // Don't initialize array or objects on the prototype.
person: {}
});
添加私有或者静态property
如果需要私有对象的话,将Polymer()放置在匿名自调函数里即可。
<polymer-element name="tag-name">
<template>...</template>
<script>
(function() {
// 只会运行一次
var foo_ = new Foo();
// 每一个实例创建时都会运行
Polymer('tag-name', {
get foo() { return foo_; }
});
})();
</script>
</polymer-element>
支持全局变量
有时候你希望定义一个全局变量,并且在不同的元素中使用它。比如你会定义一个配置信息,然后在其它部件中引用这个配置。或者一个运动曲线用于处理不同的动画效果,或者一个变量用于保存当前登录用户的信息。
你可以使用MonoState Pattern来实现这个目标。当定义一个Polymer元素时,定义一个闭包,将需要的变量放入进去,然后在元素的prototype
上设置访问器,或者在构造器里把他们赋值到不同的实例上。
<polymer-element name="app-globals">
<script>
(function() {
var firstName = 'John';
var lastName = 'Smith';
Polymer('app-globals', {
ready: function() {
this.firstName = firstName;
this.lastName = lastName;
}
});
})();
</script>
</polymer-element>
然后像使用其他元素一样把它放置到另一个元素声明里,将需要的property绑定到实例上,这样就可以使用Polymer的数据绑定技术来访问它了。
<polymer-element name="my-component">
<template>
<app-globals id="globals"></app-globals>
<div id="firstname"></div>
<div id="lastname"></div>
</template>
<script>
Polymer('my-component', {
ready: function() { this.globals = this.$.globals; }
});
</script>
</polymer-element>
只要做一些轻微的调整,就可以在外部配置全局变量的值了。
<polymer-element name="app-globals">
<script>
(function() {
var values = {};
Polymer('app-globals', {
ready: function() {
for (var i = 0; i < this.attributes.length; ++i) {
var attr = this.attributes[i];
values[attr.nodeName] = attr.nodeValue;
}
}
});
})();
</script>
</polymer-element>
在主页中,专递 attribute 就可以配置全局变量了。
<app-globals firstName="Addy" lastName="Osmani"></app-globals>
元素生命周期方法
Polymer对于元素声明周期回调有着一流的支持,为了方便,回调函数都用了简短的名称。
所有这些回调都是可选的:
Polymer('tag-name', {
created: function() { ... },
ready: function() { ... },
attached: function () { ... },
domReady: function() { ... },
detached: function() { ... },
attributeChanged: function(attrName, oldVal, newVal) {
//var newVal = this.getAttribute(attrName);
console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
},
});
下面是custom elements和Polymer元素的生命周期方法的对照表:
Custom Elements | Polymer | 触发条件 |
createdCallback | created | 一个元素的实例被创建 |
- | ready | polymer-element 已经完全准备好。(例如:shadow DOM创建完成,事件已绑定等等) |
attachedCallback | attached | 当一个元素的实例被插入到DOM中 |
- | domReady | Called when the element’s initial set of children are guaranteed to exist. This is an appropriate time to poke at the element’s parent or light DOM children. Another use is when you have sibling custom elements (e.g. they’re .innerHTML‘d together, at the same time). Before element A can use B’s API/properties, element B needs to be upgraded. The domReady callback ensures both elements exist. |
detachedCallback | detached | 当实例从DOM中移除 |
attributeChangedCallback | attributeChanged | attribute被添加移除或者改变。注意: 要监听一个公开的property,应该使用 changed watchers |
polymer-ready 事件
Polymer通过异步的方式来处理自定义元素定义和升级。如果你在元素还没有升级的时候,就通过DOM来获取它,你只会得到一个HTMLUnknownElement
。Polymer元素有时还会使用外部元素,例如css,如果他们还没有完全加载完毕,就可能引起FOUC的问题。为了避免FOUC,Polymer只有在css等资源全部加载完毕之后才会注册元素。
通过polymer-ready事件就可以得知元素何时注册/升级完。
<head>
<link rel="import" href="path/to/x-foo.html">
</head>
<body>
<x-foo></x-foo>
<script>
window.addEventListener('polymer-ready', function(e) {
var xFoo = document.querySelector('x-foo');
xFoo.barProperty = 'baz';
});
</script>
</body>
【转】Polymer API开发指南 (一)(翻译)的更多相关文章
- 【转】Polymer API开发指南 (二)(翻译)
原文转自:http://segmentfault.com/blog/windwhinny/1190000000596258 公开 property 当你公开一个 Polymer 元素的 propert ...
- Polymer API开发指南 (二)(翻译)
公开 property 当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了.公开 property 会有如下的特性: 支持声明数据双向绑 ...
- 谷歌拼音输入法扩展API开发指南
为了帮助开发者在谷歌拼音输入法的基本输入功能基础上,开发和定义更丰富的扩展输入功能,谷歌拼音输入法提供了以Lua脚本编程语言为基础的输入法扩展API.利用输入法扩展API,开发者可以编写自定义的输入功 ...
- 百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
- 来自HeroKu的HTTP API 设计指南(中文版)
原文转自:http://get.jobdeer.com/343.get 来自HeroKu的HTTP API 设计指南(中文版) 翻译 by @Easy 简介 本指南中文翻译者为 @Easy ,他是国内 ...
- [置顶]
来自 HeroKu 的 HTTP API 设计指南(中文版)
转载:http://get.jobdeer.com/343.get 来自 HeroKu 的 HTTP API 设计指南(中文版) 翻译 by @Easy 简介 本指南中文翻译者为 @Easy ,他是国 ...
- Libgdx 开发指南——目录
本系列文档选译自libgdx github项目 wiki : https://github.com/libgdx/libgdx/wiki 由于关于Libgdx的中文文档非常稀缺,因此在这里对官方Wik ...
- 现代java开发指南系列
[翻译]现代java开发指南系列 [翻译]现代java开发指南 第一部分 [翻译]现代java开发指南 第二部分 [翻译]现代java开发指南 第三部分
- 第六代智能英特尔® 酷睿™ 处理器图形 API 开发人员指南
欢迎查看第六代智能英特尔® 酷睿™ 处理器图形 API 开发人员指南,该处理器可为开发人员和最终用户提供领先的 CPU 和图形性能增强.各种新特性和功能以及显著提高的性能. 本指南旨在帮助软件开发人员 ...
随机推荐
- struts2视频学习笔记 01-02
网易云课堂-<struts2> 课时1 Struts2: WebWork2基础上发展而来,MVC框架,无侵入式设计. 提供了拦截器,类型转换器,支持多种表现层技术(JSP, freeMar ...
- 获取图片颜色的rgb,以供css设计背景颜色
ColorPix
- 开发excel 自定义func
http://www.cnblogs.com/brooks-dotnet/archive/2011/01/16/1936871.html http://club.excelhome.net/threa ...
- ant非法字符:\65279 错误
ant非法字符:\65279 错误前段时间用ant把项目打包,遇到一个问题:编译java文件的时候,有些java文件报非法字符 \65279错误,在网上找和很多方法,也试了很多方法,换JDK,网上说的 ...
- sharepoint2010无法创建网站集
出现以上错误,查看IIS中有关Sharepoint的网站中的“身份验证”中ASP.Net模拟是否为禁用,如果为禁用,请启用即可.
- win7下python安装pyquery
安装pyquery之前首先要明确一点,easyinstall 是一款python包管理器,类似于node的npm,用于安装python的扩展包,它安装的包是以*.egg的方式. 要安装pq需要经历以下 ...
- DataGridView复选框实现全选功能,并取被选中的某行某列的值(三)
目标: 一.选中全选这个复选框,会选中第一列所有的复选框 拉过来一个CheckBox控件(CheckBox1)覆盖在第一列的标题上,文本值:全选 方法:双击上面拉的CheckBox控件,进入其事件 p ...
- [转载]Android View.onMeasure方法的理解
2013-12-18 10:56:28 转载自http://blog.sina.com.cn/s/blog_61fbf8d10100zzoy.html View在屏幕上显示出来要先经过measure( ...
- 算法导论-钢条切割 C# 递归实现
下班前看到有位兄弟写 钢条切割问题,尝试实现C#版, 还没有实现最优版,分享一下. int[] parr; private void button1_Click(object sender, Even ...
- [开发笔记]-Visual Studio 2012中为创建的类添加注释的模板
为类文件添加注释,可以让我们在写代码时能够方便的查看这个类文件是为了实现哪些功能而写的. 一:修改类文件模板 找到类模版的位置:C:\Program Files (x86)\Microsoft Vis ...