美文网首页
封装组件

封装组件

作者: YC木木_39a8 | 来源:发表于2019-01-17 11:09 被阅读0次

不多说,上干货:

(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);

主要的步骤分为:

1)定义默认的error处理方法。

2)判断用户在调用$.ajax({})的时候是否自定了error:function(){},如果定义过,则使用用户定义的,反之则用默认的error处理方法。

3)使用$.extend()将error默认处理方法传入$.ajax()的参数中。我们看options参数时包含$.ajax()方法里面所有的参数的,然后用默认的fn去扩展它即可。

通过以上三步就能够实现对$.ajax()方法里面error默认处理方法。这样扩展,对于我们使用者来说完全感觉不到变化,我们仍然可以$.ajax({});这样去发送ajax请求,如果没有特殊情况,不用写error处理方法。

文章参考:http://www.cnblogs.com/landeanfen/p/5124542.html

相关文章

  • 封装组件

    封装tab组件封装曝光加载组件封装轮播组件 代码

  • 面向对象实战

    封装轮播组件 轮播 封装曝光加载组件 曝光加载 封装Tab 组件 Tab组件

  • 面向对象实战

    1、tab组件封装2、轮播组件封装3、曝光组件封装

  • 封装element-ui的dialog组件

    封装组件: 使用封装的组件:

  • 高级-任务3

    封装一个轮播组件 封装一个曝光加载组件 封装一个 Tab 组件 封装一个 Modal 组件

  • 面向对象实战

    题目1: 封装一个轮播组件轮播组件题目2: 封装一个曝光加载组件曝光加载组件题目3: 封装一个 Tab 组件Tab 组件

  • Web37.面向对象实战

    题目1:封装一个轮播组件 题目2:封装一个曝光加载组件 题目3:封装一个Tab组件 题目4:封装一个日历组件 题目...

  • element-ui 封装dialog组件

    封装组件: 使用组件:

  • 封装(面向对象)

    题目1: 封装一个轮播组件 轮播封装 题目2: 封装一个曝光加载组件 曝光加载 题目3: 封装一个 Tab 组件 ...

  • 面向对象实战

    题目1: 封装一个轮播组件封装轮播组件(效果)代码题目2: 封装一个曝光加载组件封装曝光加载(效果)代码题目3: ...

网友评论

      本文标题:封装组件

      本文链接:https://www.haomeiwen.com/subject/knnbdqtx.html