利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块

以下为封装好的工具类代码，使用方法将在后边介绍。

[javascript] view
plain copy

/** 

 * Created by xiaoqiang on 2017/11/09. 

 */  

'use strict';  

import $ from 'jquery';  

  

var _mm = {  

   request : function (param) {  

       var _this = this;  

       $.ajax({  

           type : param.method || 'get',  

           url : param.url || '',  

           data : param.data || '',  

           dataType : param.type || 'json',  

           success : function (res) {  

               // 请求数据正常  

              if (0 === res.status) {  

                  typeof param.success === 'function' && param.success(res.data);  

              }  

              // 没有登录状态,强制登录  

              else if (10 === res.status) {  

                    _this.doLogin();  

              }  

              // 请求数据错误  

              else if (1 === res.status) {  

                  typeof param.error === 'function' && param.error(res.msg);  

              }  

           },  

           error : function (errMsg) {  

               typeof param.error === 'function' && param.error(errMsg);  

           }  

       });  

   },  

    // 获取url参数  

    getUrlParam : function(name) {  

        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');  

        var result = window.location.search.substr(1).match(reg);  

        // console.log(result);  

        return result ? decodeURIComponent(result[2]) : null;  

    },  

    // 字段的验证,支持非空、手机号、邮箱的验证  

    validate : function(value, type) {  

        var value = $.trim(value);  

        // 非空验证  

        if('require' == type) {  

            return !!value;  

        }  

        // 手机号验证  

        if('phone' == type) {  

            return /^1\d{10}$/.test(value);  

        }  

        // 邮箱验证  

        return /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(value);  

    },  

    // 成功提示  

    successTips : function(msg) {  

        alert(msg || '操作成功');  

    },  

    // 错误提示  

    errorTips : function(msg) {  

        alert(msg || '哪里不对了~');  

    },  

    // 统一登录处理  

   doLogin : function () {  

       window.location.href = './user-login.html?redirect=' + encodeURIComponent(window.location.href);  

   },  

    goHome : function(){  

        window.location.href = './index.html';  

    }  

};  

  

module.exports = _mm;  

使用方法介绍：代码中 var  _mm = {}，相当于var _mm = new Object()；即新建了一个_mm对象，并通过es6的语法module.exports = _mm暴露出去。

在需要使用到_mm对象的方法时，只需要引入当前模块，调用对应的方法并传入相关参数即可。

使用方法举例-以发送ajax请求为例：需求-->在购物车service中，实现更新购物车商品数量的方法。此时我们即可使用_mm中的request方法发送ajax请求，实现代码如下：

[javascript] view
plain copy

'use strict';  

  

import _mm from 'util/mm.js';  

  

var _cart = {      

     // 更新购物车商品数量  

    updateProduct : function(productInfo, resolve, reject){  

        _mm.request({  

            url     : '/cart/update.do', // 接口地址   

            data    : productInfo,  

            success : resolve,  

            error   : reject  

        });  

    }  

}  

module.exports = _cart;  

至此，工具类和service都已经封装完毕，那么我们应该如何使用？

在需要发送ajax请求的模块，引入_cart，即可调用updataProduct方法。代码如下：（请根据实际应用作相应修改）

[html] view
plain copy

import  _cart from = 'service/cart-service.js';  

   

_cart.updateProduct({  

        productId : productId,  

        count : newCount  

     }, function (res) {  

          _this.renderCart(res); // 渲染购物车  

     }, function (errMsg) {  

          _this.showCartError();  

     });  

此工具类已经在真实项目用应用过，是前后端分离+模块化+面向对象的实践；毕业不久，有不足之处请见谅并指出。