小程序中每一個頁面對應一個Page()方法,我們需要把變量和組件的各種事件都寫在一個對象里,然后把對象作為這個參數傳遞給Page方法
如下定義
const object = {
data: {
nickName:'酷走天涯'
},
// 頁面加載完成調用這個方法
onLoad: function (options) {
},
bindTopupEvent:function(event){
},
// 所有的綁定組件事件都要寫在這個地方,可能特別多
....
}
可能你要定義好多組件模塊,比如城市列表 訂單 支付 等 組件 我們需要重用的組件 我們當然希望把組件的綁定事件抽離出來,如下
order.wxml
order.js
order.wxss
先看看如何在頁面中分別引用這幾個文件,假設有一個主頁index
index.wxss 引入 order.wxss
@import "../../templates/order.wxss";
index.wxml 引入 oder.wxml
<import src='../../templates/order.wxss'/>
index.js 引入 order.js
var order = require('../../templates/order.js')
我們想要想下面這樣使用,將擴展組件的綁定事件引入進來
Page(extend(order,object))
接下來我們就擴展一個extend方法 創建一個extend.js 文件 專門寫這個方法,我們在其它頁面js文件中也可以使用
var extend = function(a) {
([].slice.call(arguments, 1) || []).forEach(function(b) {
if (b) for (var c in b) a[c] = b[c]
})
return a
};
module.exports=extend;
注意一下
- a 代表第extend(arg1,arg2,arg3) arg1
- 當然最好的調用方式為 Page(extend({},order,object))
- [].slice.call(arguments, 1) 將arguments 分割成數組 注意arguments不是數組類型,而是對象類型
有人可能會有下面的因為在order.js 文件 訪問 index.js 文件中變量?
order.js 中有如下方法
function pay(){
// 獲取用戶的姓名
const nickName = this.data.nickName
}
order.js 文件和 index.js 沒有任何關系 為什么能調用index.js 文件的object 對象的data變量?
雖然 this.data 在order.js 文件中是不存在的 但是這個語法是沒有錯誤的javascript 允許調用不存在的對象或者方法! 程序執行的時候,調用的this.data 指的是index.js 文件中的定義的object對象的data變量,因為Page方法已經將兩者結合在一起了
注意一點非常重要,如果調用的方法 不是包含在Object中(Page(Object)),必須在order.js引入進來
比如
var request = require('../../config/method')
你需要在order.js文件中調用request.pay() 方法