Javascript异步编程的4种方法. 你可能知道，Javascript语言的执行环境是"单线程"（single thread）。 所谓"单线程"，就是指一次只能完成一件任务。 如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。 这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。 常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。 为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。 "同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。 "异步模式"非常重要。 本文总结了"异步模式"编程的4种方法，理解它们可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序。
一、回调函数 这是异步编程最基本的方法。 假定有两个函数f1和f2，后者等待前者的执行结果。 f1(); f2(); 如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。 Function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); }, 1000); } 执行代码就变成下面这样： f1(f2); 采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。 二、事件监听 另一种思路是采用事件驱动模式。 还是以f1和f2为例。 f1.on('done', f2); 上面这行代码的意思是，当f1发生done事件，就执行f2。 Function f1(){ setTimeout(function () { // f1的任务代码 f1.trigger('done'); }, 1000); } 三、发布/订阅 然后，f1进行如下改写： 五、参考链接. Dojo tutorial document. Dojo Version: Getting Started Dojo Start How do I start learning Dojo? Where are the docs? How do I get support and training? Which Dojo version should I use? View Tutorial Hello Dojo! Welcome to Dojo! View Tutorial Modern Dojo You may have been away from Dojo for a while, or you have been struggling to keep your older Dojo 1.6 applications working under 1.8 and you find yourself not sure of what is going on. View Tutorial Configuring Dojo with dojoConfig The dojoConfig object (formerly djConfig) allows you to set options and default behavior for various aspects of the toolkit.
View Tutorial Fundamentals Classy JavaScript with dojo/_base/declare The dojo/_base/declare module is the foundation of class creation within the Dojo Toolkit. declare allows for multiple inheritance to allow developers to create flexible code and avoid writing the same code routines. View Tutorial Creating Template-based Widgets View Tutorial Using dojo/query View Tutorial NodeList Extensions View Tutorial View Tutorial Animations. 不懂大师. Javascript模块化编程（一）：模块的写法. 随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。 网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。 Javascript模块化编程，已经成为一个迫切的需求。 理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。 但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。 （正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。） Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。 一、原始写法 模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。 Function m1(){ //... } function m2(){ //... } 上面的函数m1()和m2()，组成一个模块。
这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。 二、对象写法 为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。 上面的函数m1()和m2(），都封装在module1对象里。 Module1.m1(); 但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。 Module1. 三、立即执行函数写法 使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。 使用上面的写法，外部代码无法读取内部的_count变量。 Console.info(module1. module1就是Javascript模块的基本写法。 四、放大模式 如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。 Var module1 = (function (mod){ mod.m3 = function () { //... }; return mod; })(module1); 上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。 （完） Javascript模块化编程（三）：require.js的用法. 这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。 后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。 这段代码依次加载多个js文件。 这样的写法有很大的缺点。 Require.js的诞生，就是为了解决这两个问题： （1）实现js文件的异步加载，避免网页失去响应； （2）管理模块之间的依赖性，便于代码的编写和维护。 二、require.js的加载 使用require.js的第一步，是先去官方网站下载最新版本。 下载后，假定把它放在js子目录下面，就可以加载了。 有人可能会想到，加载这个文件，也可能造成网页失去响应。
Async属性表明这个文件需要异步加载，避免网页失去响应。 加载require.js以后，下一步就要加载我们自己的代码了。 Data-main属性的作用是，指定网页程序的主模块。 三、主模块的写法 上一节的main.js，我把它称为"主模块"，意思是整个网页的入口代码。 下面就来看，怎么写main.js。 如果我们的代码不依赖任何其他模块，那么可以直接写入javascript代码。 // main.js alert("加载成功！ ") 但这样的话，就没必要使用require.js了。 // main.js require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ // some code here }); require()函数接受两个参数。
Require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。 下面，我们看一个实际的例子。 假定主模块依赖jquery、underscore和backbone这三个模块，main.js就可以这样写： require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){ // some code here }); 四、模块的加载 （完）