微信小程序_将臃肿的单页js文件拆开

小程序中每一个页面对应一个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;

注意一下

1. a 代表第extend(arg1,arg2,arg3) arg1
2. 当然最好的调用方式为 Page(extend({},order,object))
3. [].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() 方法