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

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

[javascript]  view plain  copy

1. /** 
2.  * Created by xiaoqiang on 2017/11/09. 
3.  */  
4. 'use strict';  
5. import $ from 'jquery';  
6.   
7. var _mm = {  
8.    request : function (param) {  
9.        var _this = this;  
10.        $.ajax({  
11.            type : param.method || 'get',  
12.            url : param.url || '',  
13.            data : param.data || '',  
14.            dataType : param.type || 'json',  
15.            success : function (res) {  
16.                // 请求数据正常  
17.               if (0 === res.status) {  
18.                   typeof param.success === 'function' && param.success(res.data);  
19.               }  
20.               // 没有登录状态,强制登录  
21.               else if (10 === res.status) {  
22.                     _this.doLogin();  
23.               }  
24.               // 请求数据错误  
25.               else if (1 === res.status) {  
26.                   typeof param.error === 'function' && param.error(res.msg);  
27.               }  
28.            },  
29.            error : function (errMsg) {  
30.                typeof param.error === 'function' && param.error(errMsg);  
31.            }  
32.        });  
33.    },  
34.     // 获取url参数  
35.     getUrlParam : function(name) {  
36.         var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');  
37.         var result = window.location.search.substr(1).match(reg);  
38.         // console.log(result);  
39.         return result ? decodeURIComponent(result[2]) : null;  
40.     },  
41.     // 字段的验证,支持非空、手机号、邮箱的验证  
42.     validate : function(value, type) {  
43.         var value = $.trim(value);  
44.         // 非空验证  
45.         if('require' == type) {  
46.             return !!value;  
47.         }  
48.         // 手机号验证  
49.         if('phone' == type) {  
50.             return /^1\d{10}$/.test(value);  
51.         }  
52.         // 邮箱验证  
53.         return /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(value);  
54.     },  
55.     // 成功提示  
56.     successTips : function(msg) {  
57.         alert(msg || '操作成功');  
58.     },  
59.     // 错误提示  
60.     errorTips : function(msg) {  
61.         alert(msg || '哪里不对了~');  
62.     },  
63.     // 统一登录处理  
64.    doLogin : function () {  
65.        window.location.href = './user-login.html?redirect=' + encodeURIComponent(window.location.href);  
66.    },  
67.     goHome : function(){  
68.         window.location.href = './index.html';  
69.     }  
70. };  
71.   
72. module.exports = _mm;  

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

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

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

[javascript]  view plain  copy

1. 'use strict';  
2.   
3. import _mm from 'util/mm.js';  
4.   
5. var _cart = {      
6.      // 更新购物车商品数量  
7.     updateProduct : function(productInfo, resolve, reject){  
8.         _mm.request({  
9.             url     : '/cart/update.do', // 接口地址   
10.             data    : productInfo,  
11.             success : resolve,  
12.             error   : reject  
13.         });  
14.     }  
15. }  
16. module.exports = _cart;  

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

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

[html]  view plain  copy

1. import  _cart from = 'service/cart-service.js';  
2.    
3. _cart.updateProduct({  
4.         productId : productId,  
5.         count : newCount  
6.      }, function (res) {  
7.           _this.renderCart(res); // 渲染购物车  
8.      }, function (errMsg) {  
9.           _this.showCartError();  
10.      });  

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