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

按触发的顺序：

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

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

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

attached：组件被添加到父组件中时触发（显示在页面中时），只会触发一次。

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

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

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

created和ready

template.html

  1. <dom-module id="my-element"></dom-module>
  2. <script>
  3. 	Polymer({
  4.       is: 'my-element',
  5.       created: function() {
  6.         console.log('created');
  7.       }
  8.     });
  9. </script>

index.html

  1. <my-element><my-element/>

执行了两下，还没搞懂。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<!-- 这是一个基础版的兼容库 -->
  7. 	<script src="webcomponents-lite.min.js"></script>
  8. 	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->
  9.     <!-- <link rel="import" href="./template/template.html"> -->
  10.     <link rel="import" href="polymer-1.7.0/polymer.html">
  11. </head>
  12. <body>
  13. 	<my-hello></my-hello>
  14. 	<script>
  15. 		Polymer({
  16. 			is:'my-hello',
  17. 			properties:{
  18. 				msg:{
  19. 					type:String,
  20. 					value:'why?'
  21. 				}
  22. 			},
  23. 			ready:function(){
  24. 				console.log(this.msg + ' ready');
  25. 			},
  26. 			created:function(){
  27. 				console.log(this.msg + ' created');
  28. 			}
  29. 		})
  30. 	</script>
  31. </body>
  32. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<!-- 这是一个基础版的兼容库 -->
  7. 	<script src="webcomponents-lite.min.js"></script>
  8. 	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->
  9.     <!-- <link rel="import" href="./template/template.html"> -->
  10.     <link rel="import" href="polymer-1.7.0/polymer.html">
  11. </head>
  12. <body>
  13. 	<my-hello>
  14. 		<div>什么啊？</div>
  15. 	</my-hello>
  16. 	<script>
  17. 		var hello = Polymer({
  18. 			is:'my-hello',
  19. 			properties:{
  20. 				msg:{
  21. 					type:String,
  22. 					value:'why?'
  23. 				}
  24. 			},
  25. 			// 组件加载完毕会执行
  26. 			ready:function(){
  27. 				console.log(this.msg + ' ready');
  28. 			},
  29. 			// 自定义元素被创建会执行
  30. 			created:function(){
  31. 				console.log(this.msg + ' created');
  32. 			},
  33. 			factoryImpl:function(){
  34. 				console.log(this.msg + ' factoryImpl');
  35. 			},
  36. 			// 组件显示在页面的时候会执行
  37. 			attached:function(){
  38. 				console.log(this.msg + ' attached');
  40. 				// factoryImpl会被执行
  41. 				new hello();
  43. 				// 设置属性 会执行attributeChanged方法
  44. 				this.setAttribute('msg',this.msg);
  46. 				// 删除组件 会执行detached方法
  47. 				console.log('removeChild');
  48. 				document.body.removeChild(this);
  49. 			},
  50. 			attributeChanged:function(){
  51. 				console.log(this.msg + ' attributeChanged');
  52. 			},
  53. 			detached:function(){
  54. 				console.log(this.msg + ' detached');
  55. 			}
  56. 		})
  57. 	</script>
  58. </body>
  59. </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. C++指针一

    指针也是变量,占有内存空间,用来保存内存地址. 指针也是一种数据类型,指针是一种数据类型,是指它所致内存空间的数据类型. 指针变量和它指向的内存块是两个不同的概念 *p操作内存 在指针声明时,*号表示 ...

  2. 使用Servlet动态生成验证码

    最近在重新看了一遍servlert,看到篇优质博客推荐给大家:https://www.cnblogs.com/xdp-gacl/p/3798190.html 顺便把学习过程中的知识记录下来. 今天是如 ...

  3. Pychar-20170301快捷键

    Pychar IDE 2017.03.03 版本的特性 ------------------------------------------------Ctrl+D:(Dumplicated) 复制选 ...

  4. 马士兵hibernate（原始笔记）

    马士兵hibernate(原始笔记) 课程内容 1        HelloWorld a)   Xml b)   annotation 2        Hibernate原理模拟 - 什么是O/R ...

  5. Scala_类

    类 简单类 最简单的类的定义形式是: class Test1 {  //这里定义类的字段和方法} 可以使用new关键字来生成对象 var test = new Test1() 给类增加字段和方法 Un ...

  6. java数据库编程(未整理完，待续)

    java使用数据库可以借助jdbc这个中间媒介.本文将介绍如何使用jdbc连接数据库,数据库的基本操作和jdbc的事物处理. 1 连接数据库 一般java连接数据库,都有几个步骤: 0.导入相应的驱动 ...

  7. 3.表单form

    表单 表单的作用是收集信息. 表单的组成 ◆提示信息 表单控件 1.表单域 属性:action:处理信息 method=”get | post” get通过地址栏提供(传输)信息,安全性差. post ...

  8. OpencvSharp 在WPF的Image控件中显示图像

    1.安装OpencvSharp 我使用的是VS2013 社区版,安装OpencvSharp3.0 在线安装方法:进入Tools,打开NuGet的包管理器 搜索Opencv 安装之后就可以使用,无需再做 ...

  9. WinForm POST上传与后台接收

    前端 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using ...

  10. 2019/4/23 todolist

    近期的任务单子大概是这样吧 bjoi2019改完,写题解 hnoi2019改一些,写题解 找3道网络流写写 写一场agc,写题解 找2道简单计算几何写写