資訊專欄INFORMATION COLUMN
摘要：為嘛會(huì)這樣呢，動(dòng)態(tài)添加就不需要手動(dòng)刷新，而動(dòng)態(tài)設(shè)置自定義屬性就需要我猜測(cè)可能的原因是如果用戶同時(shí)設(shè)置多個(gè)自定義屬性，比如這樣如果讓自動(dòng)去刷新視圖可能就要執(zhí)行次，用戶手動(dòng)自己在最后一次性刷新的話能提升一定的性能。
一些和自定義css屬性有關(guān)的API
上篇中我們介紹了如何自定義css變量，從而在外部定義一些具體的值，由外部component傳入子component后動(dòng)態(tài)的改變，子component的樣式。但是這一切都是聲明式的也就是說在運(yùn)行前這些樣式就已經(jīng)決定了，如果你需要在運(yùn)行時(shí)動(dòng)態(tài)的改變一些自定義屬性定義的樣式，那你就要使用一些polymer提供的API了。
customStyle和updateStyles
下面來看一個(gè)例子
還是把my-toolbar改回來，不用@mixin 還是用var(--my-toolbar-title-color)
{{title}}
接下去創(chuàng)建一個(gè)父component x-custom
來看幾行關(guān)鍵代碼
這個(gè)style上上一篇的外部定義變量無異，給一個(gè)初始的文字顏色red。
這里我們給button添加了一個(gè)點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊button時(shí)，執(zhí)行changeTheme的方法，方法里做了2件事情。
修改customStyle屬性中的變量 --my-toolbar-title-color 為 blue
調(diào)用updateStyles()方法來刷新視圖
Run一下，看下效果，初始時(shí)文字為red
點(diǎn)擊后，文字變成blue，達(dá)到目的
為毛要有這2個(gè)API呢，為毛polymer不能自動(dòng)更新視圖呢。官方給出的解釋是考慮到性能問題。
不過我測(cè)試了一下,有一種case是不需要手動(dòng)updateStyles()的，
比如，下列代碼中，我點(diǎn)擊按鈕動(dòng)態(tài)添加一個(gè)class b的dom節(jié)點(diǎn)，原本事先在style中定義好的css x-foo.b會(huì)立刻生效，并不需要手動(dòng)刷新。
為嘛會(huì)這樣呢，動(dòng)態(tài)添加dom就不需要手動(dòng)刷新，而動(dòng)態(tài)設(shè)置自定義css屬性就需要updateStyles(),我猜測(cè)可能的原因是
如果用戶同時(shí)設(shè)置多個(gè)自定義css屬性，比如
this.customStyle["--my-toolbar-title-color"] = "blue"; this.customStyle["--my-toolbar-title-color2"] = "red"; this.customStyle["--my-toolbar-title-color3"] = "green";
這樣如果讓Polymer自動(dòng)去刷新視圖可能就要執(zhí)行3次render，用戶手動(dòng)自己在最后一次性刷新的話能提升一定的性能。
本篇未完待續(xù)...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78955.html
摘要：好久沒有更新了，今天更一篇樣式篇。使用的是規(guī)則來限定每個(gè)自定義組件的樣式范圍即每個(gè)組件都可以定義自己內(nèi)部獨(dú)立的樣式，而不受外界全局樣式的干擾?，F(xiàn)在覺得的寫法有些冗長(zhǎng)，會(huì)在后續(xù)版本中加以改進(jìn)，我們也拭目以待 好久沒有更新了，今天更一篇樣式篇。 Polyermer使用的是Shadow DOM styling規(guī)則來限定每個(gè)自定義組件的樣式范圍（即每個(gè)組件都可以定義自己內(nèi)部獨(dú)立的樣式，而不受外...
摘要：樣式不會(huì)被上層的組件介入影響，更不會(huì)被內(nèi)層組件影響。這對(duì)保護(hù)樣式不受未知的，不可控的外界因素所干擾非常有用。形式上感覺就是這個(gè)自定義的變量稱為一個(gè)新的屬性，可以被賦值正如我們小標(biāo)題上的稱呼自定義屬性。 前言 已經(jīng)好久沒有更新Polymer專欄，之前幾個(gè)月由于受到工作上的突然變故，導(dǎo)致學(xué)習(xí)和撰寫無法順利開展，好在目前各方面都已經(jīng)暫時(shí)穩(wěn)定下來，期間有不少對(duì)Polymer感興趣的壇友通過評(píng)論...
摘要：所以又以一個(gè)庫的身份出現(xiàn)在世人面前，它現(xiàn)階段要做的就是使用的規(guī)范來進(jìn)行開發(fā)，并且提供了一套底層實(shí)現(xiàn)來填補(bǔ)了各大瀏覽器暫不支持的，我們稱為填充物也就是要干的事情。 書接上回上一篇我們介紹了神馬是Polymer，這一篇我們來做些正式編碼前的準(zhǔn)備工作，順便也扯一扯Polymer的真面目 如何安裝Polymer 有兩種方式：第一種是bower安裝，不要問我bower是什么，不會(huì)bower的話，...
摘要：我們修改下例子定義借口，構(gòu)造時(shí)將重新賦值測(cè)試一下這種構(gòu)造函數(shù)傳參的方式只適用于，的創(chuàng)建方式，而且它種方式不支持，原因你自己拍腦袋想想就懂了。 之前一篇算是帶大家大致領(lǐng)略了一下Polymer的風(fēng)采。這篇我們稍微深入一丟丟，講下組件的注冊(cè)和創(chuàng)建。 創(chuàng)建自定義組件的幾種方式 這里我們使用Polymer函數(shù)注冊(cè)了一個(gè)自定義組件my-element // register an element ...
摘要：組件也一樣，從被創(chuàng)建，被解析，被賦初始化值，被添加到舞臺(tái)，被繪制，被布局，使用過程中被修改了值，被重繪，被重新布局，最終被父組件移除結(jié)束慘淡的一身等等，都可以稱為組件的生命周期。 這篇來談?wù)刾olymer最核心的一塊，也可以說是web components技術(shù)最最核心的一塊內(nèi)容 生命周期，大家在學(xué)習(xí)一些框架的時(shí)候最好都去了解一下它們的生命周期。 什么是生命周期 什么是生命周期？故名思議...
閱讀 1020·2021-11-25 09:43
閱讀 1679·2019-08-30 13:59
閱讀 1612·2019-08-30 11:22
閱讀 2137·2019-08-30 11:06
閱讀 1308·2019-08-28 17:51
閱讀 3744·2019-08-26 12:12
閱讀 790·2019-08-26 12:11
閱讀 456·2019-08-26 12:10
