微信小程序_06 将臃肿的单页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;

注意一下

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() 方法

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

推荐阅读更多精彩内容