国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

開坑，寫點Polymer 1.0 教程第3篇——組件注冊與創(chuàng)建

joywek / 3218人閱讀

摘要：我們修改下例子定義借口，構(gòu)造時將重新賦值測試一下這種構(gòu)造函數(shù)傳參的方式只適用于，的創(chuàng)建方式，而且它種方式不支持，原因你自己拍腦袋想想就懂了。

之前一篇算是帶大家大致領(lǐng)略了一下Polymer的風采。這篇我們稍微深入一丟丟，講下組件的注冊和創(chuàng)建。

創(chuàng)建自定義組件的幾種方式

這里我們使用Polymer函數(shù)注冊了一個自定義組件"my-element"

// register an element
Polymer({
  is: "my-element",
  created: function() {
    this.textContent = "My element!";
  }
});

在hello world篇中我們使用的是直接在html頁面里寫標簽的方式來創(chuàng)建這個自定義組件

但是如果my-element需要被動態(tài)創(chuàng)建，使用上面的方式顯然就滿足不了要求。所以Polymer提供了另外2種創(chuàng)建方式
第一種

var element = document.createElement("my-element");

啊，我們可以調(diào)用原生dom api一樣來創(chuàng)建自定義組件了，這是一件多么讓人愉悅的事情。
我們來測試一下

第二種
這種方式需要我們在注冊自定義組件的時候進行一點小的改動，調(diào)用Polymer函數(shù)定義的時候把返回值賦個一個全局變量MyElement

// register an element
MyElement = Polymer({
  is: "my-element",
  created: function() {
    this.textContent = "My element!";
  }
});
var el2 = new MyElement();

從這里可以得知Polymer函數(shù)會返回一個自定義組件的構(gòu)造函數(shù)，使用new就可以創(chuàng)建它了。
我們來測試一下

對于這種方法，Polymer還提供了一個接口factoryImpl可以讓我們在創(chuàng)建自定義組件的時候傳入運行時的構(gòu)造參數(shù)，而不是只能死死地使用注冊組件時候定義的內(nèi)容。
我們修改下例子

測試一下

這種構(gòu)造函數(shù)傳參的方式只適用于，new CustomElement的創(chuàng)建方式，而且它2種方式不支持，原因你自己拍腦袋想想就懂了。

factoryImpl 被調(diào)用的時機是在dom被創(chuàng)建，默認值被設(shè)置了以后，具體的我們會在生命周期篇里談。

擴展原生的html標簽

首先告訴大家一個非常遺憾的消息，Polymer當前版本暫不支持擴展自己定義組件（既自己不能擴展自己，但是會在以后版本中支持大家請擦干凈鼻涕靜靜等待），目前只能擴展原生的html標簽如input， button等。Polymer提供了一個extends接口來實現(xiàn)擴展

my-input.html

如果使用的是dom api我們需要這樣來創(chuàng)建

var el1 = document.createElement("input", "my-input")

如果使用html標簽的方式，我們要這樣寫

竊以為，后面2種方式來創(chuàng)建一個組件是非常非常扯蛋的一件事情，使用者必須非常清楚組件的繼承關(guān)系，你說這還不扯蛋么？期望Polymer在后續(xù)版本的api中對于組件擴展這一塊內(nèi)容，消滅以上兩種不靠譜的創(chuàng)建方式。

在html主文件里定義“自定義組件 
首先說下，只有在寫demo的時候，才會用到這種寫法。生產(chǎn)環(huán)境中，都是需要把組件寫在各自獨立的文件中。


  
    
    
    Defining a Polymer Element from the Main Document

HTMLImports.whenReady()這個方法你可以把它理解成JQ里的document.ready()或者AMD里的domReady(),可以確保引用的組件dom都被加載完了再進行下一步的調(diào)用，一般都是用在index.html也就是程序的入口處。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86043.html

相關(guān)文章

  • 開坑，寫點Polymer 1.0 教程第2篇(下)——hello world篇

    摘要：數(shù)據(jù)綁定是一個非常屌的的辦法能讓你快速的傳播組件的變化，減少代碼的行數(shù)。你可以用雙大括弧來聲明你需要綁定的屬性，大括弧在運行時會被替換成括弧內(nèi)的屬性值。本篇完，下篇還沒想好要寫啥。 書接上回，上回叔說到如何注冊（創(chuàng)建）一個自定義組件，這回我們來講講它的數(shù)據(jù)綁定。 使用數(shù)據(jù)綁定 當然，你可能不會僅僅滿足上文教的簡單的靜態(tài)自定義組件，你通常需要動態(tài)的更新你的dom組件。 數(shù)據(jù)綁定是一個非常...

    xiangzhihong 評論0 收藏0

  • 開坑，寫點Polymer 1.0 教程第2篇(上)——hello world篇

    摘要：書接上回，我們已經(jīng)把運行的準備工作做好，接下來就敲點代碼來感受下它到底是個什么東東，這一篇里我基本會照搬官網(wǎng)的幾個例子來快速過一下。非常重要的一點是，這個組件的標簽名必須要以符號分割。 書接上回，我們已經(jīng)把運行Polymer的準備工作做好，接下來就敲點代碼來感受下它到底是個什么東東，這一篇里我基本會照搬官網(wǎng)Quick tour的幾個例子來快速過一下。 注冊一個自定義組件 需要調(diào)用Pol...

    HitenDev 評論0 收藏0

  • 開坑，寫點Polymer 1.0 教程第5篇——事件與消息機制

    摘要：而不寫，則監(jiān)聽是加在整個組件之上的。組件的輸入就是屬性賦值，輸出則是事件的觸發(fā)。運行結(jié)果消息機制這里來聊聊組件化開發(fā)的消息機制，這個并不局限于或者應用，適用于所有的組件式開發(fā)技術(shù)。 這篇會講下組件內(nèi)部的事件處理機制，以及組件和外界通訊的處理方式（父子通訊，兄弟通訊等） 組件內(nèi)的事件處理機制 第一種，直接寫在標簽里，用on-eventName=eventHandler的方式 ...

    SHERlocked93 評論0 收藏0

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

    摘要：組件也一樣，從被創(chuàng)建，被解析，被賦初始化值，被添加到舞臺，被繪制，被布局，使用過程中被修改了值，被重繪，被重新布局，最終被父組件移除結(jié)束慘淡的一身等等，都可以稱為組件的生命周期。 這篇來談談polymer最核心的一塊，也可以說是web components技術(shù)最最核心的一塊內(nèi)容 生命周期，大家在學習一些框架的時候最好都去了解一下它們的生命周期。 什么是生命周期 什么是生命周期？故名思議...

    Dionysus_go 評論0 收藏0

  • 開坑，寫點Polymer 1.0 教程第1篇——安裝篇

    摘要：所以又以一個庫的身份出現(xiàn)在世人面前，它現(xiàn)階段要做的就是使用的規(guī)范來進行開發(fā)，并且提供了一套底層實現(xiàn)來填補了各大瀏覽器暫不支持的，我們稱為填充物也就是要干的事情。 書接上回上一篇我們介紹了神馬是Polymer，這一篇我們來做些正式編碼前的準備工作，順便也扯一扯Polymer的真面目 如何安裝Polymer 有兩種方式：第一種是bower安裝，不要問我bower是什么，不會bower的話，...

    Jeff 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<