小程序如何寫(xiě)動(dòng)態(tài)標(biāo)簽的實(shí)現(xiàn)方法
web開(kāi)發(fā)中,尤其使用react開(kāi)發(fā)項(xiàng)目時(shí),我們可以很方便的動(dòng)態(tài)定義標(biāo)簽(jsx)
const props = { id: '', className: '', data-a: '' } <button {...props} />
動(dòng)態(tài)配置標(biāo)簽的好處一是所有邏輯在JS端控制,二是使得我們的模板非常規(guī)范,方便后續(xù)維護(hù)更新,碎片模板可以很好的控制,三是我們可以根據(jù)使用場(chǎng)景很方便的配置props的屬性,這樣在html結(jié)構(gòu)輸出的時(shí)候能夠得到比較干凈的結(jié)構(gòu)
在小程序的開(kāi)發(fā)中,卻不能實(shí)現(xiàn)類似的功能,導(dǎo)致我們的動(dòng)態(tài)標(biāo)簽通常非常的冗余,多余的屬性全部展示在結(jié)構(gòu)生成后
以button為例,我們知道button在小程序中有非常多的屬性
如上所示,這里只是列舉了一部分的屬性
動(dòng)態(tài)模板
我們的button動(dòng)態(tài)模板寫(xiě)下來(lái)應(yīng)該是這樣的
配置
Page({ data: { option: { ... } } })
<button size="{{option.size || 'default'}}" type="{{option.type || 'default'}}" plain="{{option.plain || false}}" value="{{option.value || '按鈕'}}" ... ... />
調(diào)試工具的輸出結(jié)構(gòu)
<button bindtap='' size='' type='' plain='' disabled=false open-typ='' hover-class='' .... />
可以看到調(diào)試工具中輸出的結(jié)構(gòu)就會(huì)變得非常冗余,降低了開(kāi)發(fā)效率,這種冗余的模板輸出搞久了會(huì)吐的好吧。
可以使用模板語(yǔ)法區(qū)分不同場(chǎng)景的button,我知道會(huì)有很多這樣的聲音,但那不是動(dòng)態(tài)模板。
解決問(wèn)題
那要如何解決輸出結(jié)構(gòu)不冗余呢,說(shuō)了這么多終于到了重點(diǎn),其實(shí)真的只是一個(gè)很小的技巧,我的開(kāi)發(fā)經(jīng)歷告訴我這是有效的,你也可以試試,將默認(rèn)值統(tǒng)統(tǒng)換成 ''
,改版后的模板如下
<button size="{{option.size || ''}}" type="{{option.type || ''}}" plain="{{option.plain || ''}}" value="{{option.value || '按鈕'}}" ... ... />
這時(shí)你得到的模板就是一段漂亮的結(jié)構(gòu)
<button value='按鈕' />
關(guān)注我們的開(kāi)源小程序
https://github.com/webkixi/aotoo-xquery
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript實(shí)現(xiàn)多物體運(yùn)動(dòng)的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01微信小程序購(gòu)物商城系統(tǒng)開(kāi)發(fā)系列-工具篇的介紹
這篇文章主要介紹了微信小程序購(gòu)物商城系統(tǒng)開(kāi)發(fā)系列-工具篇的介紹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-11-11有效提高JavaScript執(zhí)行效率的幾點(diǎn)知識(shí)
這篇文章主要介紹了有效提高JavaScript執(zhí)行效率的幾點(diǎn)知識(shí),本文從JavaScript函數(shù)、JavaScript作用域、JavaScript字符串、JavaScript DOM操作、DOM重繪、DOM訪問(wèn)、DOM遍歷等方面講解了提高JavaScript執(zhí)行效率的小技巧,需要的朋友可以參考下2015-01-01JavaScript高級(jí)程序設(shè)計(jì)(第三版)學(xué)習(xí)筆記1~5章
這篇文章主要介紹了JavaScript高級(jí)程序設(shè)計(jì)(第三版)學(xué)習(xí)筆記1~5章 的相關(guān)資料,需要的朋友可以參考下2016-03-03js中apply和Math.max()函數(shù)的問(wèn)題及區(qū)別介紹
這篇文章主要介紹了js中apply和Math.max()函數(shù)的問(wèn)題,本文給大家?guī)?lái)兩種答案,每一種答案給大家介紹的非常詳細(xì),在文章底部給大家提到了js中Math.max.apply和Math.max的區(qū)別,感興趣的朋友一起看看吧2018-03-03小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11