小程序中每一个页面对应一个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() 方法