文档章节

polymer1.0 组件的生命周期

孟飞阳
 孟飞阳
发布于 2018/05/02 10:16
字数 615
阅读 21
收藏 0

按触发的顺序:

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了那么会被执行两次。

本文转载自:http://www.cnblogs.com/pssp/p/5920919.html

共有 人打赏支持
孟飞阳
粉丝 212
博文 998
码字总数 550537
作品 5
朝阳
个人站长
私信 提问
polymer1.0 样式(2)

跨作用域的样式 背景 对于Webcomponent而言,Shadow Dom 带来了很多作用域以及样式封装之类的好处,使得组件在CSS影响范围上变得更加安全和简单。样式不会被上层的组件介入影响,更不会被内层...

孟飞阳
2018/05/02
0
0
polymer1.0 Behaviors

Polymer supports extending custom element prototypes with shared code modules called behaviors. A behavior is an object that looks similar to a typical Polymer prototype. A beha......

孟飞阳
2018/05/02
0
0
polymer1.0 事件监听

可以在listeners对象中监听事件 这句话的意思是给id为special的元素单独指定一个tap事件。 除了通过这种方式,我们还可以这样。 this.listen(要添加事件的元素, 事件, 具体事件); this表示最...

孟飞阳
2018/05/02
0
0
使用Android生命周期感知组件

原文链接:Handling Lifecycles with Lifecycle-Aware Components 生命周期感知组件执行操作以响应另一个组件(例如 Activity 和 Fragment)的生命周期状态的更改。这些组件可帮你生成更易于...

落英坠露
03/18
0
0
[翻译]Android Architecture之处理生命周期

原文地址:https://developer.android.com/topic/libraries/architecture/lifecycle.html 使用Lifecycle-Aware库来解决生命周期问题。 生命周期感知组件会对于另一个组件(如Activity和Fragm...

尺锤
2017/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
9
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
2
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
4
0
burpsuite无法抓取https数据包

1.将浏览器和burpsuite的代理都设置好 2.在浏览器地址栏输入: http://burp 3.下载下面的证书,并将证书导入浏览器 cacert.der

Frost729
昨天
2
0
JeeSite4.x 消息管理、消息推送、消息提醒

实现统一的消息推送接口,包含PC消息、短信消息、邮件消息、微信消息等,无需让所有开发者了解消息是怎么发送出去的,只需了解消息发送接口即可。 所有推送消息均通过 MsgPushUtils 工具类发...

ThinkGem
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部