在前面的几节里面简单的介绍了一下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)的更多相关文章

  1. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  2. 前端组件化Polymer入门教程(5)——生命周期

    以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...

  3. 前端组件化Polymer入门教程(3)——快速入门

    本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...

  4. 前端组件化Polymer入门教程(2)——Hello world

    本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...

  5. 前端组件化Polymer入门教程(4)——自定义元素

    除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...

  6. 前端组件化Polymer入门教程(8)——事件

    可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...

  7. 前端组件化Polymer入门教程(7)——Local DOM

    DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...

  8. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  9. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

随机推荐

  1. 2.2.1synchronized方法的弊端

    缺陷:用关键字synchronized声明方法是有弊端的,譬如A线程调用同步方法执行一个长时间的任务,那么B线程则必须等待较长的时间, 解决方法:使用synchronized同步语句块 package ...

  2. Ng第一课:引言(Introduction)

    Machine Learning(机器学习)是研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能. 它是人工智能的核心,是使计算机具有智能的根本 ...

  3. Warning the user/local/mysql/data directory is not owned by the mysql user

    sudo chown -RL root:mysql /usr/local/mysql sudo chown -RL mysql:mysql /usr/local/mysql/data sudo /us ...

  4. 位图bitbucket

    问题:假设有500w条数据,数据是在2^32-1的范围内,数据重复,如何减少内存对数字进行统计呢? 如果用字典来标记数字是否已经统计过来,数字做为key, value仅为0 or1,那么这样需要消耗 ...

  5. C#-VS SQLServer数据库编程-摘

    ado.net 通用类对象.在本地内存暂存数据 托管类对象.让本地通用类对象连接数据库,让本地通用类对象和数据库同步 连接数据库 new connection(connectstring) comma ...

  6. How to fix "http error 403.14 - forbidden" in IIS7

    If you encounter the following error: "http error 403.14 - forbidden. The Web server is configu ...

  7. java基础-day6

    第06天 java基础语法 今日内容介绍 u Eclipse断点调试 u 基础语法的练习 第1章   Eclipse断点调试 1.1      Eclipse断点调试概述 Eclipse的断点调试可以 ...

  8. Scala_数据结构

    数据结构 容器(Collection) Scala提供了一套丰富的容器(collection)库,包括列表 (List).数组(Array).集合(Set).映射(Map)等 根据容器中元素的组织方式 ...

  9. POJ 1745 线性和差取余判断

    POJ 1745 线性和差取余判断 题目大意:每个数都必须取到,相加或相减去,问所有的方案最后的得数中有没有一个方案可以整除k 这个题目的难点在于dp数组的安排上面 其实也就是手动模仿了一下 比如 一 ...

  10. redis解决保存快照失败后redis无法写入的问题

    通过关闭配置项stop-writes-on-bgsave-error解决该问题. redis 127.0.0.1:6379> config set stop-writes-on-bgsave-e ...