推荐下载
-
2020-05-12 浏览：738
-
2020-05-06 浏览：521
-
2020-05-08 浏览：509
-
2020-04-04 浏览：502
-
2020-05-12 浏览：497
微信小程序_将臃肿的单页js文件拆开
发布时间:2020-11-19小程序中每一个页面对应一个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() 方法