抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

模块定义

1
2
3
4
5
6
7
8
9
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
//需要用module.exports暴露出来
module.exports.sayHello = sayHello

模块使用

1
2
3
4
5
6
7
8
9
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})

以上是最简单的使用方法.这个方法有个好处就是那个函数知道出自那里.
下面的方法更现代一些,不过有个问题是,方法出自那里不会那么清晰.所以用的时候看着办吧.

这个举例是多模块一起引入

a模块 a.js

1
2
3
4
5
6
//发现个情况 这里方法没有使用对象, 可能是简单只有一个方法的模块可以这样定义 这个还没验证
module.exports = {
function_a(content = ''){
console.log("function_a"+content);
}
};

** b模块 b.js**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var module_b = {
//这里可能存在一个问题,重名的问题,如果以简单引入使用的方法是没问题的,
//不过这次的引入是直接引入到参数里使用this直接使用,所以重名可能会出现问题
//这个有待验证
function_a:function(content = ''){
console.log("function_a"+content);
},
function_b:function(content = ''){
console.log("function_b"+content);
},
function_c:function(content = ''){
console.log("function_c"+content);
},

};

module.exports = module_b;

模块工厂 modules.js

1
2
3
4
5
6
//这可以多个模块组合使用了,而不用在页面引入一大堆
//exports 是 module.exports 的一个引用,但因为存在差异,在这种简单的页面可以使用.
//复杂的定义还是使用module.exports
exports.a = require('./a.js');
exports.b = require('./b.js');

使用模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var modules = require('modules.js');

//Object.assign({},...,...) 使用扩展参数的方式,增加方法

Page(Object.assign({}, modules.a,modules.b, {
data: {
...
},
onLoad: function () {
//因为使用了扩展参数的方式,所以直接用this的方法调用
//不过这里就有上面说道 重名的问题 还有就是从那里引入来的模糊问题
this.function_a('我是a模块输出'); //~~谁输出呢? 会被b模块覆盖么?~~ // 会覆盖通过Object.assign()文档里的说明了这些 参考文档在下面
this.function_b('我是b模块输出');
...
}
...
}));

新心得
如果是小程序的自带的监听函数,也可以使用模块写法.也会在页面加载后就持续监听.
不过只能用上面第二种写法,就是扩展参数的办法才行,这也是这种方式的优势吧.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

.......

/**
* MD5加密
*/
function doMD5Encode(toEncode) {
return MD5Encode.hexMD5(toEncode);
}

function onReachBottom () {
//如果有更多商品就使用加载功能,否则就不加在
if (this.data.more) {
this.getMore();
} else {
//console.log(this.data.more);
return;
}
//console.log("触底效果!")
}

module.exports = {
isStringEmpty: isStringEmpty,
sentHttpRequestToServer: sentHttpRequestToServer,
mapToJson: mapToJson,
toastSuccess: toastSuccess,
doWechatPay: doWechatPay,
onReachBottom: onReachBottom
}

//-------使用

var common = require('../../utils/common.js');
Page(Object.assign({}, common,{

.....

}));

//这里要注意下,这次不是工厂那样的写法,所以不能 Page(Object.assign({}, common.onReachBottom ,{ 这样写.


参考文档

MDN Web Docs Object.assign()

Object.assign(target, …sources)
参数
target: 目标对象。
sources: 源对象。

返回值:
目标对象

描述:
如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

评论