|
分享者：哲學(xué)李論，來(lái)自原文地址
小程序官方的架構(gòu)為了適應(yīng)各種情況，總是取最中正的布局和安排，不取巧，不賣巧。第三方工具/框架，每多一分功能就給開(kāi)發(fā)者多帶來(lái)了一分束縛。相對(duì)于大而全的框架，我最喜歡的是工具式的、對(duì)原開(kāi)發(fā)模式?jīng)]有改變或少改變的，可替換的框架?？赡芫拖袷且粋€(gè)utils集合，隨處可用，隨處可換。
今天介紹的這款組件化實(shí)現(xiàn)方案，是wech：https://github.com/chenzhuo1992/wech
這是一個(gè)只有9kb的框架，夠小，是一種浸入式的設(shè)計(jì)，有點(diǎn)像幾年前出現(xiàn)的mate框架。設(shè)計(jì)十分精巧。
1，查看demo
1.git clone https://github.com/chenzhuo1992/wech.git
2.將wechat-ide-binding-directory目錄綁定為小程序開(kāi)發(fā)目錄，在開(kāi)發(fā)者工具中運(yùn)行項(xiàng)目
2，它是如何運(yùn)作的
在wech內(nèi)部有一段這樣的代碼：
-
Object.defineProperty(componentConf.data, j, {
-
get() {
-
if (typeof $props[j] === 'function') {
-
return $props[j].apply(_config, arguments);
-
} else {
-
return $props[j];
-
}
-
},
-
set(val) {}
-
});
Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性， 并返回這個(gè)對(duì)象。
因?yàn)閟et(){}屬性設(shè)置器是空的，所以對(duì)props的處理是單向數(shù)據(jù)流，
那么，看一下mask組件，在wxml中：
-
<template name="wech_mask">
-
<view style="z-index: {{ zIndex ? zIndex : 9999 }}" class="wech_mask {{ visible ? 'wech_mask-visible' : '' }}" bindtap="{{ originClickingMask }}"></view>
-
</template>
很簡(jiǎn)單，當(dāng)visible為true時(shí)，使用某某css樣式，控制顯示/隱藏。那么visible是如何改變的？
visible是maskConfig的一個(gè)data屬性：
但是這個(gè)屬性被Object.defineProperty重定義了。綁定，是微信實(shí)現(xiàn)的，嫁接與轉(zhuǎn)移是wech做的。wxml頁(yè)面中的visible指向了props中的visible()，而visible()又是： return this.data.maskVisible;
在客戶代碼中，main.js:
-
showMask () {
-
let page = this;
-
page.data.maskVisible = true;
-
page.setData(page.data);
-
setTimeout(function () {
-
page.setData({
-
maskVisible: false
-
});
-
}, 1000);
-
},
只是讓maskVisible為true，過(guò)1秒自動(dòng)變?yōu)閒alse，這樣就改變了mask template組件。是不是很神奇。
這個(gè)注入的處理手法值得學(xué)習(xí)，但是不建議使用這個(gè)框架。不過(guò)，demo里附帶了一個(gè)多日日歷組件，它的效果還是很不錯(cuò)的，見(jiàn)文未，值得學(xué)習(xí)。
|
