《妙味课堂JS高级专题篇视频教程》将向大家详细介绍javascript，javascript是一种直译式脚本语言，也是一种广泛用于客户端Web开发的脚本语言。目前，被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。
视频播放地址：//m.sbmmt.com/course/241.html
本视频难点在于封装自己的JS库：
1.需求背景
很多时候，我们使用jquery.ajax的方式向后台发送请求，型如
$.ajax({
type: "post",
url: "/User/Edit",
data: { data: JSON.stringify(postdata) },
success: function (data, status) {
if (status == "success") {
toastr.success('提交数据成功');
$("#tb_aaa").bootstrapTable('refresh');
}
},
error: function (e) {
},
complete: function () {
}
});这种代码太常见了，这个时候我们有这样一个需求：在自己调用ajax请求的时候，我们不想每次都写error:function(e){}这种代码，但是我们又想让它每次都将ajax的错误信息输出到浏览器让用户能够看到。怎么办呢？
2、实现原理
要想实现以上效果其实并不难，我们可以将$.ajax({})封装一层，在封装的公共方法里面定义error对应的事件即可。确实，这样能达到我们的要求，但是并不完美，原因很简单：1）在jquery的基础上面再封装一层，效率不够高；2）需要改变调用者的习惯，每次调用ajax的时候需要按照我们定义的方法的规则来写，而不能直接用原生的$.ajax({})这种写法，这是我们不太想看到。
既然如此，那我们如何做到既不封装控件，又能达到以上要求呢？答案就是通过我们的$.extend去扩展原生的jquery.ajax。
其实实现起来也并不难，通过以下一段代码就能达到我们的要求。
(function ($) {
//1.得到$.ajax的对象
var _ajax = $.ajax;
$.ajax = function (options) {
//2.每次调用发送ajax请求的时候定义默认的error处理方法
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
},
success: function (data, textStatus) { },
beforeSend: function (XHR) { },
complete: function (XHR, TS) { }
}
//3.如果在调用的时候写了error的处理方法，就不用默认的
if (options.error) {
fn.error = options.error;
}
if (options.success) {
fn.success = options.success;
}
if (options.beforeSend) {
fn.beforeSend = options.beforeSend;
}
if (options.complete) {
fn.complete = options.complete;
}
//4.扩展原生的$.ajax方法，返回最新的参数
var _options = $.extend(options, {
error: function (XMLHttpRequest, textStatus, errorThrown) {
fn.error(XMLHttpRequest, textStatus, errorThrown);
},
success: function (data, textStatus) {
fn.success(data, textStatus);
},
beforeSend: function (XHR) {
fn.beforeSend(XHR);
},
complete: function (XHR, TS) {
fn.complete(XHR, TS);
}
});
//5.将最新的参数传回ajax对象
_ajax(_options);
};
})(jQuery);如果没接触过jquery里面$.extend这个方法的童鞋可能看不懂以上是什么意思。好，我们首先来看看jquery API对$.extend()方法是作何解释的。
以上是妙味课堂JS高级专题篇视频资料分享的详细内容。更多信息请关注PHP中文网其他相关文章！
