JavaScript异步编程设计快速响应的网络应用

JavaScript已然成为了多媒体、多任务、多内核网络世界中的一种单线程语言。其利用事件模型处理异步触发任务的行为成就了JavaScript作为开发语言的利器。如何深入理解和掌握JavaScript异步编程变得尤为重要！！！《JavaScript异步编程设计快速响应的网络应用》提供了一些方法和灵感。

一、深入理解JavaScript事件

1. 事件的调度

JavaScript事件处理器在线程空闲之前不会运行（空闲时运行）。

var start = new Date();
setTimeout(function() {
    var end = new Date();
    console.log(‘Time elapsed:‘, + (end - start), ‘ms‘);
}, 500);
while(new Date - start < 1000) {};
// 结果：Time elapsed: 1001 ms（至少是1000）

因为setTimeout回调在while循环结束运行之前不可能被触发！

调用setTimeout时，会有一个延时事件排入队列。然后继续执行下一行代码，直到再没有任何代码（处理器空闲时），才执行setTimeout回调函数（前提已到达其延迟时间）。

JavaScript代码永远不会被中断，这是因为代码在运行期间内只需要安排队事件即可，而这些事件在代码运行结束之前不会被触发！

请参考：JavaScript事件驱动机制&定时器机制

2. 异步函数的类型

JavaScript异步函数可分为两大类：I/O函数（非阻塞）和计时函数

/* test.js */
var obj = {};
console.log(obj);
obj.foo = ‘bar‘;

WebKit的console.log由于表现出异步行为而让很多开发者惊诧不已。在Chrome或Safari中，以下这段代码会在控制台记录{foo:bar}。

WebKit的console.log并没有立即拍摄对象快照，相反，它只存储了一个指向对象的引用，然后在代码返回事件队列时才去拍摄快照。

Node的console.log是另一回事，它是严格同步的，因此同样的代码输出的却为{}

注意：在控制台记录{foo:bar}，是在先执行后打开控制台！我们通过console调试代码时，要格外注意。

3. 异步函数的编写

调用一个函数（异步函数）时，程序只在该函数返回之后才能继续。这个函数会到导致将来再运行另一个函数（回调函数）。

JavaScript并没有提供一种机制以阻止函数在其异步操作结束之前返回。

有些函数既返回有用的值，又要取用回调。这种情况下，切记回调有可能被同步调用（返值之前），也有可能被异步调用（返值之后）。

永远不要定义一个潜在同步而返值却有可能用于回调的函数（回调依赖返回值）。

function test(callback) {
    var obj = {
        sendData: function() {
            console.log(arguments);
        }
    };
    callback();     // setTimeout(callback, 0); 正确写法
    return obj;
}

var obj = test(function(){
    obj.sendData("test callback");      // 返值用于了回调的函数中
});

如果一个函数既返回值又运行回调，则需确保回调在返值之后才运行！！

4. 异步错误的处理

try{
    setTimeout(function() {
        throw new Error("Catch me if you can!");
    }, 0);
} catch(e) {
    console.log(e);
}

try/catch语句只能捕获setTimeout函数自身内部发生的错误！

所以，只能在回调内部处理源于回调的异步错误。

setTimeout(function() {
    try{
        throw new Error("Catch me if you can!");
            } catch(e) {
        console.log(e);
    }
}, 0);

对于未捕获异常的处理：

（1）浏览器环境中

window.onerror = function(err) {
    return true;    // 彻底忽略所有错误
}

（2）Node环境中

process.on(‘uncaughtException‘, function(err) {
    console.log(err);   // 避免程序关闭
})

5. 嵌套式回调的解嵌套

JavaScript中最常见的反模式做法是，回调内部再嵌套回调。

请避免两层以上的函数嵌套。关键是找到一种在激活异步调用之函数的外部存储异步结果的方式，这样回调本身就没有必要再嵌套了。

二、分布式事件

事件的蝴蝶偶然扇动了下翅膀，整个应用到处都引发了反应。

这里描述的方式为发布/订阅模式，即观察者模式。曾在我的博客中介绍过：JavaScript设计模式–观察者模式

1. Node中的EventEmitter对象

ode里面的许多对象都会分发事件：一个net.Server对象会在每次有新连接时分发一个事件， 一个fs.readStream对象会在文件被打开的时候发出一个事件。 所有这些产生事件的对象都是 events.EventEmitter 的实例。 你可以通过require("events")来访问该模块。

// 加载EventEmitter类
var EventEmitter = require(‘events‘).EventEmitter;

var emitter = new EventEmitter();
// 监听事件
emitter.on("myCustomerEvent", function(message) {
    console.log(message);
});
// 触发事件
emitter.emit("myCustomerEvent", "ligang");

2. 实现自己的事件发布系统

function MyEvents() {
    this._events = {};
    /**
     * 事件监听
     * @param names 事件名称
     * @param callback 事件处理函数
     * @param data 注册事件时传递的参数,在callback 中用this.data 获取该值
     */
    this.on = function(names, callback,data) {
        // 支持多个事件，共享一个处理函数
        // 多个事件使用“逗号、空格、分号”间隔
        var nameList = names.split(/[\,\s\;]/);
        var index = nameList.length;
        while (index) {
            index--;
            var name = nameList[index];
            if (!this._events[name]) {
                this._events[name] = [];
            }
            this._events[name].push({callback:callback,data:data});
        }
    };
    /**
     * 事件移除
     * @param name 事件名称
     * @param callback 事件处理函数
     */
    this.off = function(name, callback) {
        // 不传入任何事件名，移除全部事件
        if (!name) {
            this._events = {};
            return;
        }
        var event = this._events[name];
        // 不存在当前事件，直接返回
        if (!event) {
            return;
        }
        // 支持同一事件，被多次绑定
        if (!callback) {
            delete this._events[name];
        } else {
            var length = event.length;
            while (length > 0) {
                length--;
                if (event[length].callback === callback) {
                    event.splice(length, 1);
                }
            }
        }
    };
    /**
     * 触发事件
     * Eg：A.B.C
     * 触发顺序：A.B.C ==> A.B ==> A
     * @param name 事件名称
     * @param args 参数
     */
    this.emit = function(name, args) {
        var handleEvent = name,
            namesAry = handleEvent.split(".");
        for(var i = 0, len = namesAry.length; i < len; i++) {
            var event = this._events[handleEvent];
            if (event) {
                var j = 0, length = event.length;
                while (j < length) {
                    event[j].callback(args);
                    j++;
                }
            }
            namesAry.pop();
            handleEvent = namesAry.join(".");
        }
    };
}

3. 同步性

$("input[type=‘submit‘]")
    .on("click", function(){
       console.log("click");
    }).trigger("click");    // 触发事件
console.log("lalala");
// 输出结果为：click lalala

这证明了click事件的处理函数因为trigger方法而立即被激活。事实上，只要触发了jQuery事件，就会不被中断地按顺序执行其所有事件处理函数。

需要明确一点，如果用户点击submit按钮时，这确实是一个异步事件！！！

4. jQuery自定义事件

自定义事件是jQuery被低估的功能之一，它简化了强大分布式事件系统向任何Web应用程序的移植，而且无需额外的库。

补充一下：冒泡

只要某个DOM元素触发了某个事件，其父元素就会接着触发这个事件，接着是父元素的父元素，以此类推，一直追溯到根元素document；除非在这条冒泡之路的某个地方调用了事件的stopPropagation方法（如果事件处理函数返回false，则jQuery会替我们自动调用stopPropagation方法）。需要注意的是，blur、focus、mouseenter、mouseleave不支持冒泡。

示例：jQuery自定义事件同样支持冒泡

$(".pt-login-logo-signin, document").on("fizz", function(){
   console.log("fizz");
}).trigger("fizz");

有时我们不想让其冒泡，幸运的是jQuery提供了对应的方法triggerHandler():

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

这个方法的行为表现与trigger类似，但有以下三个主要区别：

* 第一，他不会触发浏览器默认事件。

* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。

* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined

// 浏览器默认动作将不会被触发，只会触发你绑定的动作。即鼠标光标不能聚焦到input元素上
$("input").triggerHandler("focus");

三、Promise对象和Deferred对象

Promise

jQuery的deferred对象详解

示例：进度通知

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress Demo</title>
    <script src="../../lib/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="number">
    <span id="tips"></span>

    <script>
        var $input = $("#number"),
            $tips = $("#tips");
        var def = $.Deferred();
        var goalCount = 20;
        def.progress(function(currentCount){
            var percentComplete = Math.floor(currentCount / goalCount * 100);
            $tips.text(percentComplete + "% complete");
        });
        def.done(function(){
            $tips.text("good job!");
        });

        $input.on("keypress", function(){
            var count = $(this).val().split("").length;
            if(count >= goalCount) {
                def.resolve();
            }
            // notify，调用一个给定args的递延对象上的进行中的回调（progressCallbacks）
            def.notify(count);
        });
    </script>
</body>
</html>

四、Async.js的工作流控制

1. 异步函数按顺序运行

假设我们希望某一组异步函数能依次运行。

funcs[0](function(){
    funcs[1](function(){
        funcs[2](function(){
            ...
        });
    });
});
// async.js
var async = require("async");

var start = new Date().getTime();
async.series([
    function(callback){
        setTimeout(callback, 100);
    }, function(callback){
        setTimeout(callback, 200);
    }, function(callback){
        setTimeout(callback, 300);
    }
],function(err, result){
    console.log(new Date().getTime() - start + "ms");   // 612
});
async.series([
    function(callback){
        callback(null, ‘one‘);
    }, function(callback){
        callback(null, ‘two‘);
    }
],function(err, result){
    console.log(result);    // ["one", "two"]
});

2. 异步函数并行运行

var async = require("async");

var start = new Date().getTime();
async.parallel([
    function(callback){
        setTimeout(callback, 100);
    }, function(callback){
        setTimeout(callback, 200);
    }, function(callback){
        setTimeout(callback, 300);
    }
],function(err, result){
    console.log(new Date().getTime() - start + "ms");   // 312
});

3. 极简主义Step的工作流控制

var fs = require("fs");
var path = require("path");
var Step = require("step"); // https://github.com/creationix/step

// 按顺序执行
Step(function readSelf() {
        fs.readFile(__filename, this);
    }, function capitalize(err, text) {
        if (err) throw err;
        return new Buffer(text).toString().toUpperCase();
    }, function showIt(err, newText) {
        if (err) throw err;
        console.log(newText);
    }
);
// 并发执行
Step(
    // Loads two files in parallel
    function loadStuff() {
        console.log(".."+__dirname)
        fs.readFile(__dirname + "/a.txt", ‘UTF-8‘, this.parallel());
        fs.readFile(__dirname + "/b.txt", this.parallel());
    },
    // Show the result when done
    function showStuff(err, a, b) {
        if (err) throw err;
        console.log(a);
        console.log("=============");
        console.log(new Buffer(b).toString());
    }
);
// 动态
Step(
    function readDir() {
        fs.readdir(__dirname, this);
    },
    function readFiles(err, results) {
        if (err) throw err;
        // Create a new group
        var group = this.group();
        results.forEach(function (filename) {
            if (/\.js$/.test(filename)) {
                fs.readFile(__dirname + "/" + filename, ‘utf8‘, group());
            }
        });
    },
    function showAll(err , files) {
        if (err) throw err;
        console.dir(files);
    }
);

五、worker对象的多线程技术

我们会经常看到，在JavaScript中事件是多线程技术的替代品；但是其更准确来说，事件只能代替一种特殊的多线程。

在JavaScript中我们可以利用worker单开一个单独的线程，其交互方式类似于I/O操作。

注意：同一个进程内的多个线程之间可以分享状态，而彼此独立的进程之间则不能。

1. 网页版worker对象

想要生成worker对象，只需以脚本URL为参数来调用全局Worker构造函数即可。

/* main.js */
var worker = new Worker("sub.js");
// 创建worker对象
worker.addEventListener("message", function(e){
    // 接收sub消息
    console.log(e.data);
});
// 给sub发送消息
worker.postMessage("football");
worker.postMessage("baseball");
/* sub.js */
/**
 * 在worker线程中,我们可以做一些耗时较大的计算,但是其计算结果要发送给主线程,由主线程去更新页面.
 * 为什么不在worker线程中直接更新页面呢?
 * 主要是为了保护JavaScript异步抽象概念,使其免受影响.
 * 如果worker对象可以改变页面,最终的下场可能就像java一样,必须将DOM操作代码封装成互斥量和信号量,避免竞争状态.
 * 基于类似情况,worker对象中也看不到全局的window对象和主线程及其他worker线程中的其他任何对象.
 * worker对象只能看到自己的全局对象self,以及self以捆绑的所有东西.
 * 包括:setTimeout,XMLHttpRequest对象等
 */
self.addEventListener("message", function(e){
    self.postMessage(e.data);
});

2. cluster带来的Node版worker

var cluster = require("cluster");

if(cluster.isMaster) {
    var coreCount = require("os").cpus().length;
    for(var i = 0; i < coreCount; i++) {
        var worker = cluster.fork();
        worker.send("Hello worker!");
        worker.on("message", function (message) {
            // Node基于worker对象发送自己的消息,命令格式为
            // {cmd: ‘online‘, _queryId: 1, _workerId: 1}
            if(message._queryId) return;
            console.log(message);
        });
    }
}else {
    process.send("Hello, main process!");
    process.on("message", function (message) {
        console.log(message);
    })
}

注意：cluster支持并发运行同一脚本,为了尽可能减少线程间的通信开销,线程间分享的状态应该存储在像Redis这样的外部数据库中.

六、异步的脚本加载

<script src="resource.js"></script>

在文档<head>

上述加载js为同步阻塞加载（脚本下载完毕并运行之后，浏览器才会加载后续资源），为了避免一些不必要的问题，我们一般把必须立即加载的放到中，可以稍后加载的放到<body>中。

1. 脚本的延迟运行

<script defer src="resource.js"></script>

其相当于告知浏览器：“请马上开始加载这个脚本，但是，请等到文档就绪且所有此前具有defer属性的脚本都结束运行之后再运行它”

在文档<head>标签里放入延迟脚本，既能带来脚本置于<body>标签时的全部好处，又能让大文档的加载速度大幅提升。

提示：目前存在部分浏览器不支持defer，可以将延迟脚本中的代码封装诸如$(document).ready的结构中。

2. 脚本的异步运行

<script async src="resource.js"></script>

脚本会以任意次序运行，而且只要JavaScript引擎可用就会立即运行，而不论文档就绪与否。

注意：

（1）在同时支持这两个属性的浏览器中使用，async会覆盖掉defer。

（2）使用异步或延迟加载的脚本中，不能使用document.write，其会表现出不可预知的行为。

3. 动态加载脚本

var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = "resource.js";
head.appendChild(script);
script.onload = function(){
    // 可以调用动态加载脚本中的函数了
};

注意：onload兼容性问题

所以这里还是推荐大家使用第三方库，比如：requirejs

时间： 2024-12-18 13:37:38

JavaScript异步编程设计快速响应的网络应用的相关文章

转: Promises与Javascript异步编程

在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这些年浏览器技术.HTML5以及CSS3等的发展,越来越多的富Web应用出现:在给与我们良好体验的同时,Web开发人员在背后需要处理越来越多的异步回调逻辑. 笔者对最近读完的<Async Javascript-Build More Responsive Apps with Less Code>(Javascript异步编程-设计快速响应的网络应用)一书以及部分资料,整理了我认为比较重要的一些点以及容易理解错的地方,使大家对 Promi

深入解析Javascript异步编程

这里深入探讨下Javascript的异步编程技术.(P.S. 本文较长,请准备好瓜子可乐 :D) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程对其尤为重要. 拿nodejs来说,外壳是一层js语言,这是用户操作的层面,在这个层次上它是单线程运行的,也就是说我们不能像Java.Python这类语言在语言级别使用多线程能力.取而代之的是,nodejs编程中大量使用了异步编程技术,这是为了高效使用硬件,同时也可以不造成同步阻塞.不过nodejs

5分种让你了解javascript异步编程的前世今生，从onclick到await/async

javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI线程一定不能阻塞,否则体验不佳,甚至界面卡死. 一般安卓开发,会有一个界面线程,一个后台线程,保证界面的流畅.由于javascript是单线程,所以采用异步非阻塞的编程模式,javascript的绝大多数api都是异步api. 本文是本人的一个

JavaScript 异步编程

JavaScript 异步编程 第一章 深入理解JavaScript事件 1. javascirpt一般是单线程执行,setTimeout 和 setInterval 仅当cpu空闲时执行. var start = new Date; setTimeout(function(){ var end = new Date; console.log('Time elapsed:', end - start, 'ms'); }, 500); while (new Date - start < 1000)

探索Javascript异步编程

异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变得明显.许多不同的方法都可以解决这个问题,本文讨论了一些方法,但并不深入.大家需要根据自己的情况选择一个适于自己的方法. 笔者在之前的一片博客中简单的讨论了Python和Javascript的异同,其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题. JavaScript 异步编程简介 回调函数和异步执行 所谓的异步指的是函数的调

JavaScript异步编程（一） 深入理解JavaScript事件

JavaScript异步编程 深入理解JavaScript事件 ?事件的调度 JavaScript事件处理器在线程空闲之前不会运行 线程的阻塞 var start = new Date(); // setTimeout和setInterval的计时精度比期望值差 setTimeout(function(){ var end = new Date(); console.log('Time elapsed', end - start, 'ms'); }, 500); while(new Date -

JavaScript异步编程（2）- 先驱者：jsDeferred

原文出处: linkFly   欢迎分享原创到伯乐头条 JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascript的异步编程,jsDeferred也是有必要探索的:因为Promise/A+规范的制定基本上是奠定在jsDeferred上,它是javascript异步编程中里程碑式的作品.jsDeferred自身的实现也是非常有意思的. 本文将探讨项目js

Javascript异步编程方法之------“事件监听”

Javascript异步编程方法之------“事件监听”另一种思路是采用事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生.还是以f1和f2为例.首先,为f1绑定一个事件(这里采用的jQuery的写法).f1.on('done', f2);上面这行代码的意思是,当f1发生done事件,就执行f2.然后,对f1进行改写:function f1(){setTimeout(function () {// f1的任务代码f1.trigger('done');}, 1000);}f1.

Javascript异步编程方法之------“发布/订阅”

Javascript异步编程方法之------“发布/订阅”我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行.这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern).这个模式有多种实现