前端组件化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 ...
随机推荐
- LoadRunner改脚本
加action,不支持嵌套大括号 Action(){int iCt = 0; iCt = lr_output_message("abcdefg"); iCt = funA(3,5) ...
- c简单的单向链表
ps:list链表 node节点 在链表中节点就是一个个的结构体 堆空间由于在申请内存时,地址是随机的,所以要用链表的方式将其连接起来,但是链表头的地址要知道. 每个节点包含两个部分:数据区和地址区 ...
- How to fix "FAILURE DURING CONVERSION TO COFF: FILE INVALID OR CORRUPT"
Error LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt appear ...
- HDU2159_二维完全背包问题
HDU2159_二维完全背包问题 输入有:经验,忍耐度,怪物种数,限制杀怪数 每一种怪物对应获得的经验值和消耗的耐久值 输出:剩下的最大忍耐度 限制:忍耐度,杀怪个数 在这里把忍耐度看成背包的容量,杀 ...
- 图解FTP服务器搭建(Windows Server 2008)
http://wenku.baidu.com/link?url=aUMoUYvSXKbHdbOHt4lUUCq0BhjnPRTM8jNb80jjwJ4_CM5LFq3lSm6f1ZlPNbFo6HEj ...
- 【javascript】您好, 您要的ECMAScript6速记套餐到了 (一)
[前言]本文“严重参考” 自阮一峰老师写的ES6文档,在此我郑重感谢他沉默无声的帮助 总结一下ES6为 javascript中的 对象/数组/函数 这JS三巨头所提供的更简洁优雅的书写方式,以及扩展的 ...
- [Ynoi2016]这是我自己的发明(莫队)
话说这道题数据是不是都是链啊,我不手动扩栈就全 \(RE\)... 不过 \(A\) 了这题还是很爽的,通过昨晚到今天早上的奋斗,终于肝出了这题 其实楼上说的也差不多了,就是把区间拆掉然后莫队瞎搞 弱 ...
- FileAttributeView出现空指针异常原因分析
问题? Java7新增了关于文件属性信息的一些新特性,通过java.nio.file.*包下面的类可以实现设置或者读取文件的元数据信息(比如最后修改时间,创建时间,文件大小,是否为目录等等).尤其 ...
- Spring中使用StandardServletMultipartResolver进行文件上传
从Spring3.1开始,Spring提供了两个MultipartResolver的实现用于处理multipart请求,分别是:CommonsMultipartResolver和StandardSer ...
- select2插件使用小记
插件官网:https://select2.github.io/examples.html 页面引入: // 页面顶部 <link rel="stylesheet" type= ...