以前我对生命周期这个概念还真不是很清楚，不过想想也简单，比如说人的生命周期，无非就是生老病死。而对于程序的生命周期就是说，它在每个阶段都会做不同的事，再比如说回调函数把，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. MIT Molecular Biology 笔记4 DNA相关实验

    视频  https://www.bilibili.com/video/av7973580?from=search&seid=16993146754254492690 教材 Molecular ...

  2. 压力测试 mac ab

    apache ab:http://blog.chinaunix.net/uid-20382003-id-3032167.html 简单用法: ab -n 3000 -c 3000 http://www ...

  3. iOS笔记之UIKit_UILable

    UILabel*label3 = [[UILabel alloc]initWithFrame:CGRectMake(0, 60+10+60+10+60+10, 320, 60)]; label3.ba ...

  4. 走上模拟道路 HDU4891

    http://vjudge.net/contest/view.action?cid=51327#problem/D Description Yoda: May the Force be with yo ...

  5. 中科大debian 9 + docker源设置

    wget https://mirrors.ustc.edu.cn/repogen/conf/debian-http-4-stretch -O sources.list sudo apt-get ins ...

  6. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  7. WPF 定义Lookless控件的默认样式、 OnApplyTemplate 如何使用(实现方式、如何工作的)！

    写的非常详细: 作者地址:https://www.cnblogs.com/atskyline/archive/2012/11/16/2773806.html 参考资料: http://www.code ...

  8. Spring IOC 容器源码分析 - 获取单例 bean

    1. 简介 为了写 Spring IOC 容器源码分析系列的文章,我特地写了一篇 Spring IOC 容器的导读文章.在导读一文中,我介绍了 Spring 的一些特性以及阅读 Spring 源码的一 ...

  9. Android开发 - 获取系统输入法高度的正确姿势

    问题与解决 在Android应用的开发中,有一些需求需要我们获取到输入法的高度,但是官方的API并没有提供类似的方法,所以我们需要自己来实现. 查阅了网上很多资料,试过以后都不理想. 比如有的方法通过 ...

  10. nginx-1.服务器是什么

    服务器相信很多电脑爱好者都听过或者了解一些,一般我们很难看到真正的服务器,因为服务器一般均放置在机房重点,闲人一般均是免进的.比如我们每天浏览的网站.玩的游戏等,所有的数据均存在服务器,服务器一般都在 ...