以下為封裝好的工具類代碼，使用方法將在后邊介紹。

/*** 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請求，實現代碼如下：

'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方法。代碼如下：（請根據實際應用作相應修改）

import _cart from = 'service/cart-service.js';_cart.updateProduct({productId : productId,count : newCount}, function (res) {_this.renderCart(res); // 渲染購物車}, function (errMsg) {_this.showCartError();});

此工具類已經在真實項目用應用過，是前后端分離+模塊化+面向對象的實踐；畢業不久，有不足之處請見諒并指出。

總結

以上是生活随笔為你收集整理的利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。