開坑，寫點Polymer 1.0 教程第4篇——組件的生命週期

時間 2019-11-16

標籤 polymer1.0 polymer 教程組件生命週期简体版

原文原文鏈接

這篇來談談polymer最核心的一塊，也能夠說是web components技術最最核心的一塊內容「生命週期」，你們在學習一些框架的時候最好都去了解一下它們的生命週期。html

什麼是生命週期

什麼是生命週期？故名思議，拿人的例子來講，好比出生，上學，工做，結婚，生子，死亡等等，一輩子中幾個重要階段。組件也同樣，從被建立，被解析，被賦初始化值，被添加到舞臺，被繪製，被佈局，使用過程當中被修改了值，被重繪，被從新佈局，最終被父組件移除結束慘淡的一身等等，均可以稱爲組件的生命週期。web

來看看Polymer提供了那些咱們能夠catch到的大事件（按觸發的順序）。。
1.created callback：當組件被 new 時調用，最先被觸發，此時還不能訪問組件的屬性
2.ready callback ：當組件內部依賴的子組件或者原生dom組件加載成功，會調用ready
3.factoryImpl callback ：只有使用new ElementClass()方式建立組件時會被調用，發生在ready後
4.attached callback ：組件被添加到父組件中（顯示在舞臺）時觸發，只會觸發一次框架

5.attributeChanged callback ：組件被父組件設置屬性時觸發，只有使用setAttribute()方式設置屬性纔會觸發，切記！（elementInstance.attr = xxx, <my-element att="xxx"></my-element>都不會觸發它）
6.detached callback ：當被父組件removeChild時候觸發（即被移出舞臺）dom

你跑一下下面的例子後，本身修修改改試一下就能大體體會，（光看文字的效果不如你本身跑一下代碼）
my-element.html函數

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-element">
    <template>
        <p>{{name}}</p>
        <button on-click="handleClick">change by self</button>
    </template>
    <script>
        MyElement = Polymer({

            is: 'my-element',
            properties: {
                name: {
                    value: "default name",
                    type: "String"
                }
            },
            
            handleClick: function(){
                this.setAttribute("name","name was set by parent");
            },

            created: function () {
                console.log(this.localName + '#' + this.id + ' was created');
            },

            attached: function () {
                console.log(this.localName + '#' + this.id + ' was attached');
            },

            detached: function () {
                console.log(this.localName + '#' + this.id + ' was detached');
            },

            attributeChanged: function (name, type) {
                console.log(this.localName + '#' + this.id + ' attribute ' + name +
                    ' was changed to ' + this.getAttribute(name));
            },
            
            ready:function(){
                console.log(this.localName + '#' + this.id + ' was ready');
            },
            
            factoryImpl: function(){
                console.log(this.localName + '#' + this.id + ' was factoryImpl');
            }

        });
    </script>
</dom-module>

parent-element.html佈局

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="my-element.html">
<dom-module id="parent-element">
    <template>
        <my-element id="myElement" name="name was set by tag's method"></my-element>
        <button on-click="handleChange">change by parent</button>
        <button on-click="handleRemove">remove</button>
    </template>
    <script>
        ParentElement = Polymer({
            is: 'parent-element',
            handleChange: function(){
                var myElement = document.getElementById("myElement");
                myElement.setAttribute("name","name was set by self");
            },
            handleRemove: function(){
                //補充一下這裏$符號的做用是能夠用$.id的方式快速訪問子組件（上面個handleChange函數則是傳統方式）
                this.$.myElement.parentNode.removeChild(this.$.myElement);
            }
        });
    </script>
</dom-module>

index.html學習

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="components/parent-element.html">
</head>
<body>
    <parent-element></parent-element>
</body>
<script>    
</script>
</html>

控制檯輸出結果
this

這裏我只是根據官網的文檔描述，大概介紹了幾個主要的生命週期，可能會有遺漏（諸如layout和render在什麼階段官網文檔中並無體現，或者說官方並無提供這2二個階段供的事件接口，供用戶來hack一些組件的生成，固然這僅僅是我暫時的一些推測，待繼續深刻學習後會回過來一一補充。）。生命週期篇就講到這裏，下一篇咱們來聊聊Polymer的事件，也就是你們比較關心的另一個問題，組件之間的通信（消息機制）spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。