前端分层架构-网络层拆分

概览

此篇文章用于说明前端分层架构中网络层拆分的代码实现。

三层架构（未涉及state层）

view（视图层）: 包含视觉组件、样式、dom的操作；
serviece（服务层：与view是 一对一关联关系）：校验服务、处理业务状态码、数据收集服务等；
api （接口层）：负责封装数据请求、发送请求报文、接收响应报文等。

代码实现

view层

// 引入service服务
var netService = require('services/checkSaveService');

// view层调用
netService.SomeOp({
    data: {
        // 请求体: reqbody
     },
     queryParams: {
         // url后追加参数
     },
     codeSuccess: function(data) {
         // 状态码：0000处理
     },
     codeError: function(data) {
         // 错误状态码：9999处理
     },
     error: function(e) {
        // 网络异常处理
     }
})

service层

var throwError = require('../utils/index').err; 

// 引入 Api 层服务
var APIs = require('../api/netApi'); 
var common = require('./common');

var services = {
   // 函数名称与 view层保持一致
   SomeOp: function(opt) {
       // 调用 Api层服务
       APIs.SomeOpApi({
           data: opt.data,
           queryParams: opt.queryParams,
           success: function(data) {
              if (data.code === '0000') {
                codeSuccess(data);
              } else {
                codeError(data);
              }
          },
          error: opt.error,
       })
    }
}

common.addValidOptions(services); 

module.exports = services;

Api 层

    // api
    var apiTools = require('../apiTools'); 
    var baseUrl = apiTools.baseUrl;
    var ajaxPost = apiTools.ajaxPost;

    module.exports = {
      SomeOpApi: function(opt) {
      var url = baseUrl + '/detail/url';

        ajaxPost({ 
          url: url, 
          data: opt.data, 
          queryParams: opt.queryParams, 
          srcSuccess: opt.success, 
          error: opt.error, 
        });
      }
    }