從 VantComponent 談小程式維護

Vue · 發表 2019-05-13 23:55:36

摘要：在開發小程式的時候，我們總是期望用以往的技術規範和語法特點來書寫當前的小程式，所以才會有各色的小程式框架，例如 mpvue、taro 等這些編譯型框架。當然這些框架本身對於新開發的專案是有所幫助。而對於老專案，我們又想要利用 vue 的語法特性進行維護，又該如何呢？在此我研究了...

在開發小程式的時候，我們總是期望用以往的技術規範和語法特點來書寫當前的小程式，所以才會有各色的小程式框架，例如 mpvue、taro 等這些編譯型框架。當然這些框架本身對於新開發的專案是有所幫助。而對於老專案，我們又想要利用 vue 的語法特性進行維護，又該如何呢？

在此我研究了一下youzan的 vant-weapp。而發現該專案中的元件是如此編寫的。

import { VantComponent } from '../common/component';

VantComponent({
mixins: [],
props: {
name: String,
size: String
},
// 可以使用 watch 來監控 props 變化
// 其實就是把properties中的observer提取出來
watch: {
name(newVal) {
...
},
// 可以直接使用字串 代替函式呼叫
size: 'changeSize'
},
// 使用計算屬性 來 獲取資料，可以在 wxml直接使用
computed: {
bigSize() {
return this.data.size + 100
}
}，
data: {
size: 0
},
methods: {
onClick() {
this.$emit('click');
},
changeSize(size) {
// 使用set
this.set(size)
}
},

// 對應小程式元件 created 週期
beforeCreate() {},

// 對應小程式元件 attached 週期
created() {},

// 對應小程式元件 ready 週期
mounted() {},

// 對應小程式元件detached 週期
destroyed: {}
});
複製程式碼

居然發現該元件寫法整體上類似於 Vue 語法。而本身卻沒有任何編譯。看來問題是出在了匯入的 VantComponet 這個方法上。下面我們開始詳細介紹一下如何利用 VantComponet 來對老專案進行維護。

TLDR (不多廢話，先說結論)

小程式元件寫法這裡就不再介紹。這裡我們給出利用 VantComponent 寫 Page 的程式碼風格。

import { VantComponent } from '../common/component'; 

VantComponent({
mixins: [],
props: {
a: String,
b: Number
},
// 在頁面這裡 watch 基本上是沒有作用了，因為只做了props 變化的watch，page不會出現 props 變化
// 後面會詳細說明為何
watch： {},
// 計算屬性仍舊可用
computed: {
d() {
return c++
}
},
methods: {
onLoad() {}
},
created() {},
// 其他元件生命週期
})
複製程式碼

這裡你可能感到疑惑，VantComponet 不是對元件 Component 生效的嗎？怎麼會對頁面 Page 生效呢。事實上，我們是可以使用元件來構造小程式頁面的。

在官方文件中，我們可以看到使用 Component 構造器構造頁面

事實上，小程式的頁面也可以視為自定義元件。因而，頁面也可以使用 Component 構造器構造，擁有與普通元件一樣的定義段與例項方法。程式碼編寫如下:

Component({
// 可以使用元件的 behaviors 機制,雖然 React 覺得 mixins 並不是一個很好的方案
// 但是在某種程度該方案的確可以複用相同的邏輯程式碼
behaviors: [myBehavior],

// 對應於page的options，與此本身是有型別的，而從options 取得資料均為 string型別
// 訪問 頁面 /pages/index/index?paramA=123¶mB=xyz 
// 如果宣告有屬性 paramA 或 paramB ，則它們會被賦值為 123 或 xyz，而不是 string型別
properties: {
paramA: Number,
paramB: String,
},
methods: {
// onLoad 不需要 option
// 但是頁面級別的生命週期卻只能寫道 methods中來
onLoad() {
this.data.paramA // 頁面引數 paramA 的值 123
this.data.paramB // 頁面引數 paramB 的值 ’xyz’
}
}

})
複製程式碼

那麼元件的生命週期和頁面的生命週期又是怎麼對應的呢。經過一番測試，得出結果為： (為了簡便。只會列出重要的的生命週期)

// 元件例項被建立 到 元件例項進入頁面節點樹
component created -> component attched -> 
// 頁面頁面載入 到元件在檢視層佈局完成
page onLoad -> component ready -> 
// 頁面解除安裝 到 元件例項被從頁面節點樹移除
page OnUnload -> component detached
複製程式碼

當然我們重點不是在 onload 和 onunload 中間的狀態，因為中間狀態的時候，我們可以在頁面中使用頁面生命週期來操作更好。

某些時候我們的一些初始化程式碼不應該放在 onload 裡面，我們可以考慮放在 component create 進行操作，甚至可以利用 behaviors 來複用初始化程式碼。

某種方面來說，如果不需要 Vue 風格，我們在老專案中直接利用 Component 代替 Page 也不失為一個不錯的維護方案。畢竟官方標準，不用擔心其他一系列後續問題。

VantComponent 原始碼解析

VantComponent

此時，我們對 VantComponent 開始進行解析

// 賦值，根據 map 的 key 和 value 來進行操作
function mapKeys(source: object, target: object, map: object) {
Object.keys(map).forEach(key => {
if (source[key]) {
// 目標物件 的 map[key] 對應 源資料物件的 key
target[map[key]] = source[key];
}
});
}

// ts程式碼，也就是 泛型
function VantComponent<Data, Props, Watch, Methods, Computed>(
vantOptions: VantComponentOptions<
Data,
Props,
Watch,
Methods,
Computed,
CombinedComponentInstance<Data, Props, Watch, Methods, Computed>
> = {}
): void {
const options: any = {};
// 用function 來拷貝 新的資料，也就是我們可以用的 Vue 風格
mapKeys(vantOptions, options, {
data: 'data',
props: 'properties',
mixins: 'behaviors',
methods: 'methods',
beforeCreate: 'created',
created: 'attached',
mounted: 'ready',
relations: 'relations',
destroyed: 'detached',
classes: 'externalClasses'
});

// 對元件間關係進行編輯，但是page不需要，可以刪除
const { relation } = vantOptions;
if (relation) {
options.relations = Object.assign(options.relations || {}, {
[`../${relation.name}/index`]: relation
});
}

// 對元件預設新增 externalClasses，但是page不需要，可以刪除
// add default externalClasses
options.externalClasses = options.externalClasses || [];
options.externalClasses.push('custom-class');

// 對元件預設新增 basic，封裝了 $emit 和小程式節點查詢方法，可以刪除
// add default behaviors
options.behaviors = options.behaviors || [];
options.behaviors.push(basic);

// map field to form-field behavior
// 預設新增 內建 behaviorwx://form-field
// 它使得這個自定義元件有類似於表單控制元件的行為。
// 可以研究下文給出的 內建behaviors
if (vantOptions.field) {
options.behaviors.push('wx://form-field');
}

// add default options
// 新增元件預設配置，多slot
options.options = {
multipleSlots: true,// 在元件定義時的選項中啟用多slot支援
// 如果這個 Component 構造器用於構造頁面 ，則預設值為 shared
// 元件的apply-shared，可以研究下文給出的 元件樣式隔離
addGlobalClass: true 
};

// 監控 vantOptions
observe(vantOptions, options);

// 把當前重新配置的options 放入Component
Component(options);
}
複製程式碼

內建behaviors

元件樣式隔離

basic behaviors

剛剛我們談到 basic behaviors，程式碼如下所示

export const basic = Behavior({
methods: {
// 呼叫 $emit元件 實際上是使用了 triggerEvent
$emit() {
this.triggerEvent.apply(this, arguments);
},

// 封裝 程式節點查詢
getRect(selector: string, all: boolean) {
return new Promise(resolve => {
wx.createSelectorQuery()
.in(this)[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect);
}

if (!all && rect) {
resolve(rect);
}
})
.exec();
});
}
}
});
複製程式碼

observe

小程式 watch 和 computed的程式碼解析

export function observe(vantOptions, options) {
// 從傳入的 option中得到 watch computed
const { watch, computed } = vantOptions;

// 新增behavior
options.behaviors.push(behavior);

/// 如果有 watch 物件
if (watch) {
const props = options.properties || {};
// 例如: 
// props: {
//a: String
// },
// watch: {
//a(val) {
//// 每次val變化時候列印
//consol.log(val)
//}
} 
Object.keys(watch).forEach(key => {

// watch只會對prop中的資料進行 監視
if (key in props) {
let prop = props[key];
if (prop === null || !('type' in prop)) {
prop = { type: prop };
}
// prop的observer被watch賦值，也就是小程式元件本身的功能。
prop.observer = watch[key];
// 把當前的key 放入prop
props[key] = prop;
}
});
// 經過此方法
// props: {
//a: {
//type: String,
//observer: (val) {
//console.log(val)
//}
//}
// }
options.properties = props;
}

// 對計算屬性進行封裝
if (computed) {
options.methods = options.methods || {};
options.methods.$options = () => vantOptions;

if (options.properties) {

// 監視props，如果props發生改變，計算屬性本身也要變
observeProps(options.properties);
}
}
}
複製程式碼

observeProps

現在剩下的也就是 observeProps 以及 behavior 兩個檔案了，這兩個都是為了計算屬性而生成的，這裡我們先解釋 observeProps 程式碼

export function observeProps(props) {
if (!props) {
return;
}

Object.keys(props).forEach(key => {
let prop = props[key];
if (prop === null || !('type' in prop)) {
prop = { type: prop };
}

// 儲存之前的 observer，也就是上一個程式碼生成的prop
let { observer } = prop;
prop.observer = function() {
if (observer) {
if (typeof observer === 'string') {
observer = this[observer];
}

// 呼叫之前儲存的 observer
observer.apply(this, arguments);
}

// 在發生改變的時候呼叫一次 set 來重置計算屬性
this.set();
};
// 把修改的props 賦值回去
props[key] = prop;
});
}
複製程式碼

behavior

最終 behavior，也就算 computed 實現機制

// 非同步呼叫 setData
function setAsync(context: Weapp.Component, data: object) {
return new Promise(resolve => {
context.setData(data, resolve);
});
};

export const behavior = Behavior({
created() {
if (!this.$options) {
return;
}

// 快取
const cache = {};
const { computed } = this.$options();
const keys = Object.keys(computed);

this.calcComputed = () => {
// 需要更新的資料
const needUpdate = {};
keys.forEach(key => {
const value = computed[key].call(this);
// 快取資料不等當前計算數值
if (cache[key] !== value) {
cache[key] = needUpdate[key] = value;
}
});
// 返回需要的更新的 computed
return needUpdate;
};
},

attached() {
// 在 attached 週期 呼叫一次，算出當前的computed數值
this.set();
},

methods: {
// set data and set computed data
// set可以使用callback 和 then
set(data: object, callback: Function) {
const stack = [];
// set時候放入資料
if (data) {
stack.push(setAsync(this, data));
}

if (this.calcComputed) {
// 有計算屬性，同樣也放入 stack中，但是每次set都會呼叫一次，props改變也會呼叫
stack.push(setAsync(this, this.calcComputed()));
}

return Promise.all(stack).then(res => {
// 所有 data以及計算屬性都完成後呼叫callback
if (callback && typeof callback === 'function') {
callback.call(this);
}
return res;
});
}
}
});
複製程式碼

寫在後面

js 是一門靈活的語言(手動滑稽)
本身小程式 Component 在小程式 Page 之後，就要比Page 更加成熟好用，有時候新的方案往往藏在文件之中，每次多看幾遍文件絕不是沒有意義的。
小程式版本版本2.6.1 Component目前已經實現了 observers，可以監聽 props data資料監聽器,目前 VantComponent沒有實現，當然本身而言，Page 不需要對 prop 進行監聽，因為進入頁面壓根不會變，而data變化本身就無需監聽，直接呼叫函式即可，所以對page而言，observers 可有可無。
該方案也只是對 js 程式碼上有vue的風格，並沒在 template 以及 style 做其他文章。
該方案效能一定是有所缺失的，因為computed是每次set都會進行計算，而並非根據set 的 data 來進行操作，在刪減之後我認為本身是可以接受。如果本身對於vue的語法特性需求不高，可以直接利用 Component 來編寫 Page，選擇不同的解決方案實質上是需要權衡各種利弊。如果本身是有其他要求或者新的專案，仍舊推薦使用新技術，如果本身是已有專案並且需要維護的，同時又想擁有 Vue 特性。可以使用該方案，因為程式碼本身較少，而且本身也可以基於自身需求修改。
同時，vant-weapp是一個非常不錯的專案，推薦各位可以去檢視以及star。

從 VantComponent 談 小程式維護