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

按触发的顺序:

created:当组件被 new 时调用,最早被触发,此时还不能访问组件的属性,但不知道为什么直接通过HTML的方式也会执行,可能是内部实例化了。

ready:当组件内部依赖的子组件或者原生dom组件加载成功会调用,使你的组件一次性配置后局部DOM初始化。

factoryImpl:只有使用new ElementClass()方式创建组件时会被调用,发生在ready后

attached:组件被添加到父组件中时触发(显示在页面中时),只会触发一次。

attributeChanged:组件被父组件设置属性时触发,只有使用setAttribute()方式设置属性才会触发,当一个元素的属性更改时调用。

detached:当被父组件removeChild的时候触发。

参考:开坑,写点Polymer 1.0 教程第4篇——组件的生命周期

created和ready

template.html

<dom-module id="my-element"></dom-module>
<script>
Polymer({
is: 'my-element',
created: function() {
console.log('created');
}
});
</script>

index.html

<my-element><my-element/>

执行了两下,还没搞懂。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 这是一个基础版的兼容库 -->
<script src="webcomponents-lite.min.js"></script>
<!-- 将rel修改为import可以引入另外一个HTML,它将会被执行 -->
<!-- <link rel="import" href="./template/template.html"> -->
<link rel="import" href="polymer-1.7.0/polymer.html">
</head>
<body>
<my-hello></my-hello>
<script>
Polymer({
is:'my-hello',
properties:{
msg:{
type:String,
value:'why?'
}
},
ready:function(){
console.log(this.msg + ' ready');
},
created:function(){
console.log(this.msg + ' created');
}
})
</script>
</body>
</html>

确实在created阶段是访问不了属性的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 这是一个基础版的兼容库 -->
<script src="webcomponents-lite.min.js"></script>
<!-- 将rel修改为import可以引入另外一个HTML,它将会被执行 -->
<!-- <link rel="import" href="./template/template.html"> -->
<link rel="import" href="polymer-1.7.0/polymer.html">
</head>
<body>
<my-hello>
<div>什么啊?</div>
</my-hello>
<script>
var hello = Polymer({
is:'my-hello',
properties:{
msg:{
type:String,
value:'why?'
}
},
// 组件加载完毕会执行
ready:function(){
console.log(this.msg + ' ready');
},
// 自定义元素被创建会执行
created:function(){
console.log(this.msg + ' created');
},
factoryImpl:function(){
console.log(this.msg + ' factoryImpl');
},
// 组件显示在页面的时候会执行
attached:function(){
console.log(this.msg + ' attached'); // factoryImpl会被执行
new hello(); // 设置属性 会执行attributeChanged方法
this.setAttribute('msg',this.msg); // 删除组件 会执行detached方法
console.log('removeChild');
document.body.removeChild(this);
},
attributeChanged:function(){
console.log(this.msg + ' attributeChanged');
},
detached:function(){
console.log(this.msg + ' detached');
}
})
</script>
</body>
</html>

结果如下:

这里可以看出一些问题来,就是说你直接通过手动的方式添加组件,那么Polymer内部会帮你创建,如果你手动添加了并且又用JS new了那么会被执行两次。

完。

前端组件化Polymer入门教程(5)——生命周期的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. 前端组件化Polymer深入篇(1)

    在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...

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

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

随机推荐

  1. (转)忘记wamp-mysql数据库root用户密码重置方法

    转自:http://www.jb51.net/article/28883.htm 1.打开任务管理器,结束进程  mysqld-nt.exe . 2.运行命令窗口 1)进行php服务管理器安装目录中的 ...

  2. uva1653

    本来想刷道签到题结果被卡住了.这题题意描述有点问题,数字又不一定都是个位数...难道是我英语太差了? digits就表示0~9这几个数?唉,还是太弱了.这题就是用了一个bfs,应该说还是有点意思的,直 ...

  3. Beta阶段第一篇 Scrum 冲刺博客

    介绍小组新加入的成员,Ta担任的角色 新成员 担任角色 张晨晨 测试 理由:晨晨代码能力有待提高,但心思细腻有耐心,适合测试工作. 讨论是否需要更换团队的PM 通过团队讨论决定不更换团队PM,理由是在 ...

  4. 【MySQL】死锁问题分析

    1.MySQL常用存储引擎的锁机制: MyISAM和MEMORY采用表级锁(table-level locking)   BDB采用页面锁(page-level locking)或表级锁,默认为页面锁 ...

  5. shell工具-awk

    awk 一个强大的文本分析工具,把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行分析处理. 基本用法 awk [选项参数] 'pattern1{action} pattern2{act ...

  6. CSS 基础 例子 Image 高度设置

    body高度100%,三个image高度分别为auto,50%,60%,imge高度为当时body高度的百分比,auto时为原始高度 html代码如下: <!DOCTYPE html> & ...

  7. unigui web app之title buttons

    unigui web app之title buttons title buttons:窗体标题按钮 通过 窗体标题按钮,可以方便地导航,比如返回主页. 处理窗体标题按钮的点击事件: procedure ...

  8. node-webkit学习(1)hello world

    )hello world 文/玄魂 目录 node-webkit学习(1)hello world 前言 1.1  环境安装 1.1.1 windows下的安装 1.1.2  linux环境下的安装 1 ...

  9. ionic 2.x 3.x input触发调用键盘搜索及事件

    html (1.input  type='search'   2.将input套在一个带action的form中 ) <form action=""> <ion- ...

  10. 通过Yum快速部署LAMP与LNMP

    LAMP动态网站部署架构是由一套 Linux+Apache+MySQL+PHP 组成的动态网站系统解决方案. LNMP动态网站部署架构是由一套 Linux+Nginx+MySQL+PHP 组成的动态网 ...