Javascript模块化编程（一）：模块的写法
Javascript模块化编程（二）：AMD规范
Javascript模块化编程（三）：require.js的用法
目前，通行的Javascript模块规范共有两种：CommonJS和AMD
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"
test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img class="lazy" data-original="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" width="300" height="225"> <script src="js/require.js" data-main="js/main"></script> </body> </html>
main.js
require.config({ baseUrl: "js", paths: { "jquery": "lib/jquery", "underscore": "lib/underscore", "backbone": "lib/backbone" }, shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }, 'jquery.lazyload': { deps: ['jquery'], exports: 'jQuery.fn.lazyload' } } }) require(['jquery', 'underscore', 'backbone'], function(/*$, _, Backbone*/aa, bb, cc) { console.log(aa) console.log($) console.log(bb) console.log(_) console.log(cc) console.log(Backbone) }) require(['math'], function(mathaaa) { console.log(mathaaa.add(1, 1)) }) require(['jquery.lazyload'], function(lazyload) { //console.log(lazyload) $('.lazy').lazyload() })
math.js
define(function() { var add = function(x, y) { return x + y } return { add: add } })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="require.js"></script> <script> requirejs.config({ baseUrl: 'js/lib', paths: { app: '../app' } }) console.log(requirejs === require) requirejs(['app'], function(app) { }) </script> </body> </html>