微信小程序MVC编程模式，让页面的js文件只做控制器，只调用网络请求network.js的方法而不写网络请求的代码

90 阅读 0 评论 60 点赞

我是靠谱客的博主飘逸诺言，最近开发中收集的这篇文章主要介绍微信小程序MVC编程模式，让页面的js文件只做控制器，只调用网络请求network.js的方法而不写网络请求的代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

MVC 编程模式：Model(数据)，view(视图也就是html+css)，controller(控制器也就是js) 。
controller(控制器)的职责是控制我们代码交互的过程，但它本身并不做任何的逻辑处理。可以把控制器想象成交警，他只指挥车辆怎么走，而不会替你去开车。

在前端中一些专门储存方法的js就是起的控制器的作用，如小程序项目中的 index.js 文件就只做控制器，具体的方法等都是调用其他页面的。如网络请求功能专门用一个network.js来实现，而在index.js中只是调用network.js文件。
把网络请求模块从 index.js 文件中独立出来。
1. 重构前的 index.js 文件中的网络请求模块：（放在onLoad事件中）
```
wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items?count=7',
      success: function (res) {
        var movies = res.data.subject_collection_items;
        that.setData({
          movies: movies
        })
      }
    })
```
2. 重构后的network文件：
```
const network = {
  getMovieList: function(params){
    wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items?count=7',
      success: function (res) {
        var movies = res.data.subject_collection_items;
        if(params && params.success){
          params.success(movies);
        }
      }
    })
  }
} 
export {network}
```
  重构后的index.js 文件中的网络请求模块：
```
network.getMovieList({
      success: function(movies){
        that.setData({
          movies: movies
        })
      }
    })
```
3. 好处：实现功能分离，让index.js只做控制器的作用；避免重复代码，只需反复调用即可。
4. 内部流程原理：（自己理解的，不一定对）（不，是一定对）
  1. 页面加载触发 onLoad 事件，触发network.getMovieList事件并传一个有success方法的对象作为参数。
  2. 触发getMoviesList事件，触发 wx:request 请求。
  3. 请求成功触发 network.js 的 success 事件并通过if判断。
  4. 进入if代码块，触发params.success(movies); ，即运行index.js文件中调用getMovieList方法时传的参数对象中的 success 方法并传参movies列表。（这样就实现了js文件之间的数据传输）
  5. setData将数据传入index.js页面的Data中。