前端组件化Polymer入门教程(5)——生命周期
以前我对生命周期这个概念还真不是很清楚，不过想想也简单，比如说人的生命周期，无非就是生老病死。而对于程序的生命周期就是说，它在每个阶段都会做不同的事，再比如说回调函数把，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)——生命周期的更多相关文章
- 前端组件化Polymer入门教程(1)——初识&&安装
前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- 前端组件化Polymer入门教程(3)——快速入门
本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...
- 前端组件化Polymer入门教程(2)——Hello world
本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...
- 前端组件化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 ...
- 前端组件化Polymer深入篇(1)
在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...
- Vue.js：轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
随机推荐
- eclipse环境搭建（插件安装）
转自:http://www.iteye.com/topic/982182 使用eclipse真的有年头了,相信java程序员没有不知道它的,最近在给团队中新来的应届生做指导,专门讲解了一下Eclips ...
- java通过poi编写excel文件
public String writeExcel(List<MedicalWhiteList> MedicalWhiteList) { if(MedicalWhiteList == nul ...
- POJ3273--Monthly Expense(Binary Search)
Description Farmer John is an astounding accounting wizard and has realized he might run out of mone ...
- 20155326 2016-2017-2 《Java程序设计》第九周学习总结
20155326 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 1.撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找. 2.JDBC目的 ...
- web-day5
第5章WEB05- BootStrap篇 今日任务 使用JQuery完成表单校验 使用BootStrap制作一个响应式页面 使用BootStrap制作网站首页 教学导航 教学目标 掌握什么是响应式及响 ...
- Java 理论与实践: 用弱引用堵住内存泄漏
弱引用使得表达对象生命周期关系变得容易了 虽然用 Java™ 语言编写的程序在理论上是不会出现“内存泄漏”的,但是有时对象在不再作为程序的逻辑状态的一部分之后仍然不被垃圾收集.本月,负责保障应用程序健 ...
- hdu 5092 线裁剪(纵向连线最小和+输出路径)
http://acm.hdu.edu.cn/showproblem.php?pid=5092 给一个m*n的矩阵,找到一个纵向的"线"使得线上的和最小并输出这条线,线能向8个方向延 ...
- Delphi 内进行音量控制及静音
unit UMute; interface uses MMSystem, Dialogs; Type TDeviceName = (Master, Microphone, WaveOut, Syn ...
- .NET高级代码审计（第四课） JavaScriptSerializer反序列化漏洞
0X00 前言 在.NET处理 Ajax应用的时候,通常序列化功能由JavaScriptSerializer类提供,它是.NET2.0之后内部实现的序列化功能的类,位于命名空间System.Web.S ...
- 背水一战 Windows 10 (61) - 控件（媒体类）: InkCanvas 涂鸦编辑
[源码下载] 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) InkCanv ...