微信小程序day01_11之小程序的模块化

ゝ一世哀愁。 2022-03-14 15:42 232阅读 0赞

### 文章目录 ###

*   *   *  一. 什么是小程序的模块化
         *  二. 小程序模块化代码演示

本文代码地址 [https://gitee.com/jaythc/wxxcx\_learen/tree/master/day01/day01\_11][https_gitee.com_jaythc_wxxcx_learen_tree_master_day01_day01_11]

### 一. 什么是小程序的模块化 ###

*  抽离通用方法,作为通用函数
 *  构建utils-common 类

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

需要注意的是：

*  exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
 *  小程序目前不支持直接引入 node\_modules , 开发者需要使用到 node\_modules 时候建议拷贝出相关的代码到小程序的目录中或者使用小程序支持的 npm 功能。

### 二. 小程序模块化代码演示 ###

在项目中创建utils包, 并创建common.js文件  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
文件内容如下 , 假设为抽离的公共模块的代码

// common.js
    function sayHello(name) { 
      console.log(`Hello ${ name} !`)
    }
    function sayGoodbye(name) { 
      console.log(`Goodbye ${ name} !`)
    }
    
    // 暴露接口
    module.exports.sayHello = sayHello
    exports.sayGoodbye = sayGoodbye

在event.js中进行引用common.js,  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
并使用common 进行调用

common.sayHello('MINA');
    common.sayGoodbye('MINA');

最终的效果如下, 控制台成功进行了打印  
![20190306184943552.png][]

官方文档 [https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html][https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_module.html]

[https_gitee.com_jaythc_wxxcx_learen_tree_master_day01_day01_11]: https://gitee.com/jaythc/wxxcx_learen/tree/master/day01/day01_11
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220312/3e46ded0d6e14d5aaabfc4a239b22c53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220312/57d1e14941f64c7897e40a5f18aa807d.png
[20190306184943552.png]: /images/20220312/aae2405f16af479bada72212cb85c032.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_module.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html