微信小程序开发中的模块化

微信小程序开发中的模块化

微信小程序引入vue.js_微信小程序md5.js_微信小程序引入js

在开始之前,先说个题外话,由于小编前段时间一直很忙,导致本公众号搁置更新了一段时间,从今天开始,小编将陆续发布一些有关微信小程序开发的技术文章,也会录制一些教学视频,敬请大家关注。

我们今天要跟大家聊一聊微信小程序开发中的模块化是怎么实现的。

首先说说模块化这个概念,通俗点讲,所谓的模块化就是把一些通用功能写成一个个的模块,我们在使用时可以直接调用已经开发好的模块,这样做的好处是可以减少重复的代码开发,而且也使得程序更加容易维护,如果模块设计的好,我们编写程序成就如下图,像搭积木一样。

微信小程序md5.js_微信小程序引入js_微信小程序引入vue.js

js的一个模块对应着一个js文件,微信小程序中也一样,在微信小程序开发中我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过module.exports或者exports才能对外暴露接口。

需要注意的是:

exports是module.exports的一个引用,我们更推荐开发者采用module.exports来暴露模块接口(因为在模块里边随意更改exports的指向会造成未知的错误。)。

小程序目前不支持直接引入node_modules, 开发者需要使用到node_modules时候建议拷贝出相关的代码到小程序的目录中。

例:我们定义已个common的模块,文件为common.js

// common.js
function sayHello(name) {
 console.log(`Hello ${name} !`) }
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`) }
module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye //这里也可以写成
module.exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中,使用require(path)将公共代码引入

var common = require('common.js')//这里使用require方法引入common这个模块
Page({
  helloMINA: function() {
    common.sayHello('MINA')//这里使用common中的sayHello方法
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')//这里使用common中的sayGoodbye方法

  }
})

如果还有其他地方要用到这些方法也可以使用同样的方法引入,这样就达到了一次编码多处使用的目的,也使得代码更加的简洁和清爽。

微信小程序引入vue.js_微信小程序md5.js_微信小程序引入js

QQ群:526013379

社区:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注