小程序中每一個(gè)頁面對應(yīng)一個(gè)Page()方法,我們需要把變量和組件的各種事件都寫在一個(gè)對象里,然后把對象作為這個(gè)參數(shù)傳遞給Page方法

如下定義

const object = {
 data: {
   nickName:'酷走天涯'
  },
 // 頁面加載完成調(diào)用這個(gè)方法
  onLoad: function (options) {
  },
  bindTopupEvent:function(event){
  },
 // 所有的綁定組件事件都要寫在這個(gè)地方,可能特別多
 ....

}

可能你要定義好多組件模塊,比如城市列表 訂單 支付 等 組件 我們需要重用的組件 我們當(dāng)然希望把組件的綁定事件抽離出來,如下

order.wxml
order.js
order.wxss

先看看如何在頁面中分別引用這幾個(gè)文件,假設(shè)有一個(gè)主頁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')

我們想要想下面這樣使用,將擴(kuò)展組件的綁定事件引入進(jìn)來

Page(extend(order,object))

接下來我們就擴(kuò)展一個(gè)extend方法 創(chuàng)建一個(gè)extend.js 文件 專門寫這個(gè)方法,我們在其它頁面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;

注意一下

1. a 代表第extend(arg1,arg2,arg3) arg1
2. 當(dāng)然最好的調(diào)用方式為 Page(extend({},order,object))
3. [].slice.call(arguments, 1) 將arguments 分割成數(shù)組 注意arguments不是數(shù)組類型,而是對象類型

有人可能會有下面的因?yàn)樵趏rder.js 文件 訪問 index.js 文件中變量?

order.js 中有如下方法

function pay(){
  // 獲取用戶的姓名
  const nickName =   this.data.nickName
}

order.js 文件和 index.js 沒有任何關(guān)系 為什么能調(diào)用index.js 文件的object 對象的data變量?

雖然 this.data 在order.js 文件中是不存在的 但是這個(gè)語法是沒有錯(cuò)誤的javascript 允許調(diào)用不存在的對象或者方法! 程序執(zhí)行的時(shí)候,調(diào)用的this.data 指的是index.js 文件中的定義的object對象的data變量,因?yàn)镻age方法已經(jīng)將兩者結(jié)合在一起了

注意一點(diǎn)非常重要,如果調(diào)用的方法 不是包含在Object中(Page(Object)),必須在order.js引入進(jìn)來

比如

var request = require('../../config/method')
你需要在order.js文件中調(diào)用request.pay() 方法