jQuery源码分析系列(30) : Ajax 整体结构

最新推荐文章于 2021-08-05 23:37:24 发布

weixin_33709219

最新推荐文章于 2021-08-05 23:37:24 发布

阅读量71

点赞数

文章标签：前端 php 后端 ViewUI

开头引用一段

想起一句话：前端研究，研究个屁~ 的确如此呀。补充下联：前端设计，设计个屁~

前端目前最大的困境是，如 HTML 一样，无论你承不承认，市场上并不太需要 HTML 高手

其实这里引发一个问题：前端的价值究竟是什么？未来应该如何发展？

我个人觉得还是一个核心价值的问题，前端在漂亮的东西都是需要后端的数据支撑的，而且前端的绝大部分问题，其实都需要后端才能解决，就如我开发了三年的混合项目，虽然前端代码有3万行，但是后端一个数据拷贝失败，整个项目都是白搭

当然这里我并非要深入这个话题，只是想表明尽可能的提高自身的价值！

从前端的历史变更与发展过程来看，如果拿人类的历史来比喻，从最原始的刀耕火种以HTML静态结构为主的原始社会，到后来带有逻辑处理与服务器混搭交互的的石器时代以及最近几年流行的node.js,MVC,MVVM,Phonegap等衍生而来的东东让前端大跃进式的跳跃进入了一个新的工业时代，不到20年的时间web技术翻天覆地的变化

如今的前端进入了 MV* 时代，同时Ajax也带来了SPA，Node带来了全栈，这些都切实推动着前端往前发展

优秀的前端一方面是完成的效率，另一方面是可维护和可扩展性的提高带来的潜在价值,解放生产力，专注展现与业务逻辑，减少琐碎的兼容处理

如果你使用一面大镜子作为冲浪板会发生什么?或许你会在较短的时间内征服海浪，但是你肯定从内心深处明白，这不是冲浪的正确选择

所以我们不应该只要求自己仅仅停留在API的层次，如果能理解原理深入设计，那么就将会跨上一个新的台阶

jQuery.Ajax做了那些事？

我们知道AJAX的底层实现其实是很简单的.抛开IE不说,标准的w3c直接提供了XMLHttpRequest方法

关于AJAX基础请飞机触碰jQuery：AJAX异步详解

我们主要站在设计的角度理解，如何设计出低耦合高内聚的代码

jQuery对Ajax的处理主要体现在对浏览器兼容，数据的处理及过滤，各种事件的封装上

主要有以下几部分扩展：

提供快捷接口

提供底层接口

提供数据序列化

提供全局Ajax事件处理

具体使用请看API，这里不再重复

分析下面一个demo

给document绑定ajaxStart，ajaxComplete回调事件

trigger绑定一个点击事件，发送ajax请求

点击trigger出发点之后，发送一个ajax请求，并且通过complete，done,ajaxStart, ajaxComplete返回状态回调

//全局事件触发
$(document).ajaxStart(function() {
    console.log(arguments)
}).ajaxComplete(function() {
    $(".log").text("Triggered ajaxComplete handler.");
});


$(".trigger").click(function() {
    //发送ajax请求
    //
    $.ajax({
        url: "php.html",
        context: document.body,
        complete: function() {
            console.log(this)
        }
    }).done(function() {
        console.log(this)
    });
});

这里实现比较特别的地方

针对ajax提供2种回调方式，内部的complete回调与外部的done回调

全局document上都能捕获到ajax的每一步的回调通知

换句话说，针对ajax的请求，每一步的状态，成功或者失败，我们有3种方式可以获取，但是每一种还是有各自的区别

1 ajax的参数回调

2 基于deferred方式的done回调

3 全局的的自定义事件的回调

从设计的层面上来考下，这种事件组合的方式是如何实现？有什么优势？

设计一：

tAjax({
    url: "php.html",
    complete: function(data) {
        console.log(data)
    }
})

如果要实现这种接口调用

那么我们就需要封装下代码，把回调通过实参传递

var tAjax = function(config) {
    var url      = config.url;
    var complete = config.complete; 
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('post', url);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                complete(xhr.responseText);
            }
        }
    }
    xhr.send();
}

这样设计可以看做类似工厂模式的封装，好处不用多说，在工厂模式里面包含了对象的创建等必要的逻辑，客户端根据传参选择动态的实例化相对的处理

对于客户端来去除了具体的依赖，当然tAjax你也可以看作一个外观模式提供的接口，其实就是隐藏了具体的复杂逻辑，提供一个简单的接口，从而降低耦合

设计二：

tAjax({
    url: "php.html",
    complete: function(data) {
        console.log(data)
    }
}).done(function(data){
    console.log(data)
})

在之前加入了一个done链式处理，当然这里done，其实是deferred的一个成功处理通知，如果之前没有接触，大家去了解一下关于deferred的概念

我们知道jQuery实现了链式，实现的原理无法就是返回本身对象的引用

var ajax = tAjax({
    url: "php.html",
    complete: function(data) {
        console.log(data)
    }
})

ajax.done(function(){
    
})

以上是分离的情况下，如果要合并成一条链式处理，只要在上一个方法中返回this即可

所以我们改改

var tAjax = function(config) {

    var doneFn;

    var url      = config.url;
    var complete = config.complete; 
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('post', url);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                doneFn(xhr.responseText);
                complete(xhr.responseText);
            }
        }
    }

    xhr.send(xhr.responseText);

    return {
        /**
         * 返回一个done对象
         */
        done: function(ourfn) {
             doneFn = ourfn;
        }
    };
}

我们返回了一个done对象，这里一样要是对象，因为链式的原因，我们看外部指定了内部的done,从而把外部函数给引用到内部的doneFn上缓存起来

xhr.staturs 成功后一起执行

当然这种设计是有问题的，如果在done之后我在链式就肯定不行，因为对象的引用错了，那么jQuery是如何处理?

设计三

提供document对象的全局处理

$(document).ajaxComplete(function() {
    console.log('ajax请求成功')
});


tAjax({
    url: "php.html",
    complete: function(data) {
         console.log(data)
    }
}).done(function(data){
    console.log(data)
})

这里的问题就是把ajax内部的事件，返回给全局捕获了，有点类似css3的全局动画事件

这里的设计其实最简单了因为本身之间没有什么耦合，就是发送一个事件给document即可

jQuery利用了trigger自定义事件触发的

globalEventContext.trigger("ajaxComplete", [jqXHR, s]);

具体每一种实现在后面的都会提到，在这里需要大家有个整体的印象，

总结：

通过读阅jQuery.ajax这段api我们可以看到jQuery对ajax的处理做的相当的全面

首先我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

ajax引入了deferred方案，callback方案就是回调函数解决方案，从而处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口

伴随Ajax请求会触发若干事件，我们可以订阅这些事件并在其中处理我们的逻辑。

在jQuery中有两种Ajax事件：局部事件和全局事件。

局部事件（回调函数），在$.ajax()方法的options参数中声明，可以用来设置请求数据和获取、处理响应数据。

全局事件，每次Ajax请求都会触发，它会向DOM中的所有元素广播，你只需为DOM中任意元素bind好全局事件即会触发（若绑定多次，则会依次触发为事件注册的回调函数

除此之外，还提供了一系列的简化接口，比如.load ，还有直接对数据对象序列化的能力，对跨域的处理，contentType的修复等等

深入待续。。。。。