前端组件化Polymer深入篇(1)
在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下。
new和createElement有区别吗?
<script>
var SayHello = Polymer({
is:'say-Hello'
})
var el1 = document.createElement('say-Hello');
console.log(el1);
var el2 = new SayHello();
console.log(el2);
</script>

看起来好像没有差别,但还是有些差别的,new的方式可以传递参数。
<script>
var SayHello = Polymer({
is:'say-Hello',
factoryImpl:function(){
console.log(arguments);
}
})
var el = new SayHello('css','js','html');
console.log(el);
</script>

注:factoryImpl:只有使用new ElementClass()方式创建组件时会被调用。更多关于函数的调用时机可以看前端组件化Polymer入门教程(5)——生命周期
属性值还可以通过函数return返回。
例1
<say-Hello></say-Hello>
<dom-module id="say-Hello">
<template>
<h1>{{say}}</h1>
</template>
</dom-module>
<script>
Polymer({
is:'say-Hello',
properties:{
say:{
type:String,
value:function(){
return '国庆七天乐!';
}
}
}
})
</script>

例2
<say-Hello></say-Hello>
<dom-module id="say-Hello">
<template>
<h1>{{say.title}}</h1>
</template>
</dom-module>
<script>
Polymer({
is:'say-Hello',
properties:{
say:{
type:Object,
value:function(){
return {"title":"这是一段标题"};
}
}
}
})
</script>

异步方法async
<say-Hello></say-Hello>
<dom-module id="say-Hello">
<template>
<h1>{{say}}</h1>
</template>
</dom-module>
<script>
Polymer({
is:'say-Hello',
properties:{
say:{
type:String,
value:'hello',
observer:'attrChange'
}
},
listeners:{
'click':'setAttr'
},
setAttr:function(){
this.async(function(){
console.log('async ' + this.say);
},300);
this.say = 'attr';
},
attrChange:function(){
console.log('属性值已改成' + this.say);
}
})
</script>
this.async和setTimeout使用差不多。

this.push(name,value)和push(value)的区别
<x-custom></x-custom>
<dom-module id="x-custom">
<template>
<ul>
<template is="dom-repeat" items="{{users}}
<li>{{item.userName}}</li>
</template>
</ul>
</template>
</dom-module>
<script>
Polymer({
is: 'x-custom',
ready: function() {
this.users = [
{userName:'老王'}
];
},
listeners:{
'click':'addUser'
},
addUser:function(){
this.push('users',{userName:'老李'})
this.users.push({userName:'老于'});
console.log(this.users);
}
});
</script>

区别在于一个会更新视图,一个不会更新。
计算功能
可以通过computed来设置计算功能
<x-custom first="国庆" last="快乐"></x-custom>
<dom-module id="x-custom">
<template>
My name is <span>{{fullName}}</span>
</template>
<script>
Polymer({
is: 'x-custom',
properties: {
first: String,
last: String,
fullName: {
type: String,
computed: 'computeFullName(first, last)'
}
},
computeFullName: function(first, last) {
return first + ' ' + last;
},
listeners:{
'click':'changeFullName'
},
changeFullName:function(){
this.first = 'Hello';
this.last = 'World';
}
});
</script>
</dom-module>
注意只有当first和last都改变的时候才会执行computed里面的方法。

前端组件化Polymer深入篇(1)的更多相关文章
- 前端组件化Polymer入门教程(1)——初识&&安装
前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...
- 前端组件化Polymer入门教程(5)——生命周期
以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...
- 前端组件化Polymer入门教程(3)——快速入门
本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...
- 前端组件化Polymer入门教程(2)——Hello world
本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- 前端组件化Polymer入门教程(8)——事件
可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...
- 前端组件化Polymer入门教程(7)——Local DOM
DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...
- 前端组件化Polymer入门教程(6)——监听属性值变化
监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
随机推荐
- DS8800后端的光纤通道交换式互连方式
DS8800 使用SAS 硬盘.使用了FC 到SAS 转换,光纤通道交换技术被用于DS8800 后端. FC 技术是普遍用于在一个光纤通道仲裁环路(Fibre Channel Arbitrated L ...
- Ng第二课:单变量线性回归(Linear Regression with One Variable)
二.单变量线性回归(Linear Regression with One Variable) 2.1 模型表示 2.2 代价函数 2.3 代价函数的直观理解 2.4 梯度下降 2.5 梯度下 ...
- 老树新芽,在ES6下使用Express
要让Express在ES6下跑起来就不得不用转码器Babel了.首先新建一个在某目录下新建一个项目.然后跳转到这个目录下开始下面的操作. 简单走起 安装babel-cli $ npm install ...
- window+R
好记性不如烂笔头, window+R:打开运行 等同于:所有程序-->附件-->运行
- JVM的參數
博客:https://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html#CMSInitiatingOccupancyFraction_v ...
- 6.Django扩展
富文本编辑器 借助富文本编辑器,管理员能够编辑出来一个包含html的页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于前期开发人员 此处以tinymce为例,其它富文本编辑器的使用可以自行学 ...
- https://www.cnblogs.com/hnxxcxg/p/6085149.html
DELPHI微信支付代码 不管是微信支付还是支付宝支付, 3个最棘手的问题是:1,如何生成签名2,支付请求如何提交3, 如何验证签名 下面就围绕这二个问题来讲. 我使用的是XE3. 先看微信支付: ...
- [eetcode 10]Regular Expression Matching
1 题目: Implement regular expression matching with support for '.' and '*'. '.' Matches any single cha ...
- SQL关闭自增长列标识:SET IDENTITY_INSERT
关闭自增长列添加记录,然后再恢复自增长功能 SET IDENTITY_INSERT 表名 ON; inert ,); SET IDENTITY_INSERT 表名 OFF
- wpf Im