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

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

/*** 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参数截取等功能于一身的通用工具模块相关推荐

[js] 说说防止重复发送ajax请求的方法有哪些？各自有什么优缺点？
[js] 说说防止重复发送ajax请求的方法有哪些?各自有什么优缺点? // 方法一防抖function debounce(f, ms) { let time; return function(){ ...
mui封装的ajax请求
由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...
ajax请求封装,封装的ajax请求
在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...
理解ajax技术，封装原生 ajax请求
一.Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的简写 Ajax是一门技术,并不是一门语言使用XHTML+CSS来标准化呈现使用XML和XSLT进 ...
jquery封装的ajax请求
属性名称解释 url 请求的服务器端url地址 async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false data 发送到服务器的数据, ...
纯 js 让浏览器不缓存 ajax 请求
开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态. 现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为 ...
封装Ajax请求，callback函数参数分析
/** * 封装Ajax函数 * 功能:发送一个Ajax请求,并且可以执行回调函数 * @param url * 发送请求的地址 * @param params * ...
js监测页面关闭发送Ajax请求（浏览器关闭注销用户，清空session）
说明: 需求为页面关闭发送一个ajax请求,使关闭浏览器及时清空session(浏览器关闭session并不会清空) 网站同时只能一个用户登录,同一账号后登录的用户不能把前一个登录的用户踢下线,有一个 ...
js面向对象思想封装拖拽功能，兼容pc和移动端
我们在开发项目过程中,很可能会碰到页面上某块需要可以拖拽移动的功能需求,网上已经有不少前辈分享了相关功能的案例,插件或者代码,但是考虑到项目功能需求,我们可能仅需要实现拖拽移动功能就可以,不需要其他功 ...

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

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

最新文章

热门文章