小程序中每(mei)一個(ge)(ge)頁面對(dui)應一個(ge)(ge)Page()方(fang)法,我們需要(yao)把變量和組件(jian)的各種(zhong)事件(jian)都寫(xie)在一個(ge)(ge)對(dui)象里(li),然后把對(dui)象作為(wei)這個(ge)(ge)參數傳(chuan)遞給Page方(fang)法

如下定義

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

}

可(ke)能你要定義好多(duo)組件(jian)模塊(kuai),比如城市列表 訂單 支付 等 組件(jian) 我(wo)們需(xu)要重用(yong)的(de)組件(jian) 我(wo)們當然希望把組件(jian)的(de)綁定事(shi)件(jian)抽(chou)離出來,如下

order.wxml
order.js
order.wxss

先看(kan)看(kan)如何在(zai)頁(ye)面中分別(bie)引用這幾個文件,假設(she)有一個主頁(ye)index

index.wxss 引(yin)入 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')

我(wo)們想(xiang)要想(xiang)下面(mian)這樣使用,將擴展組件(jian)的綁定事件(jian)引入進來(lai)

Page(extend(order,object))

接下來我們就擴展一個extend方法 創建一個extend.js 文(wen)件 專門寫這個方法,我們在其它頁面js文(wen)件中也可以使用

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;

注(zhu)意一下

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

 有(you)人(ren)可能會有(you)下面的因(yin)為在(zai)order.js 文件 訪(fang)問 index.js 文件中變量?

order.js 中(zhong)有(you)如下方法

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

order.js 文(wen)件和 index.js 沒有(you)任(ren)何關(guan)系 為什么能調用index.js 文(wen)件的(de)object 對象的(de)data變量?

雖(sui)然 this.data 在(zai)order.js 文(wen)件(jian)中(zhong)是不存(cun)在(zai)的(de) 但(dan)是這(zhe)個語法是沒有錯誤(wu)的(de)javascript 允許調(diao)用不存(cun)在(zai)的(de)對象或(huo)者方(fang)法! 程序(xu)執行的(de)時候,調(diao)用的(de)this.data 指的(de)是index.js 文(wen)件(jian)中(zhong)的(de)定義的(de)object對象的(de)data變(bian)量,因為Page方(fang)法已經將兩者結合在(zai)一起了

注意一點非(fei)常重要,如(ru)果調用的方法 不是包含在Object中(Page(Object)),必須在order.js引(yin)入進來

比如

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