<div id="article_details" class="details"> <div class="article_title"> <span class="ico ico_type_Repost"></span> <h1> <span class="link_title"><a href="/u012422829/article/details/51009957"> 深入理解JavaScript系列(四): 模块化编程 </a> </span> </h1></div> <div class="article_manage clearfix"> <div class="article_l"> <span class="link_categories"> 标签： <a href="http://www.csdn.net/tag/javascript" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">javascript</a><a href="http://www.csdn.net/tag/%e6%a8%a1%e5%9d%97%e5%8c%96" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">模块化</a><a href="http://www.csdn.net/tag/require.js" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">require.js</a> </span> </div> <div class="article_r"> <span class="link_postdate">2016-03-29 22:53</span> <span class="link_view" title="阅读次数">2798人阅读</span> <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span> <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('%e6%b7%b1%e5%85%a5%e7%90%86%e8%a7%a3JavaScript%e7%b3%bb%e5%88%97(%e5%9b%9b)%3a+%e6%a8%a1%e5%9d%97%e5%8c%96%e7%bc%96%e7%a8%8b','51009957');return false;" title="收藏" target="_blank">收藏</a></span> <span class="link_report"> <a href="#report" onclick="javascript:report(51009957,2);return false;" title="举报">举报</a></span> </div> </div> <style type="text/css"> .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px #ededed; } .embody_b{ margin:0 ; padding:10px 0; } .embody .embody_t,.embody .embody_c{ display: inline-block; margin-right:10px; } .embody_t{ font-size: 12px; color:#999; } .embody_c{ font-size: 12px; } .embody_c img,.embody_c em{ display: inline-block; vertical-align: middle; } .embody_c img{ width:30px; height:30px; } .embody_c em{ margin: 0 20px 0 10px; color:#333; font-style: normal; } </style> <script type="text/javascript"> $(function () { try { var lib = eval("("+$("#lib").attr("value")+")"); var html = ""; if (lib.err == 0) { $.each(lib.data, function (i) { var obj = lib.data[i]; //html += '<img src="' + obj.logo + '"/>' + obj.name + " "; html += ' <a href="' + obj.url + '" target="_blank">'; html += ' <img src="' + obj.logo + '">'; html += ' <em><b>' + obj.name + '</b></em>'; html += ' </a>'; }); if (html != "") { setTimeout(function () { $("#lib").html(html); $("#embody").show(); }, 100); } } } catch (err) { } }); </script> <div class="category clearfix"> <div class="category_l"> <img src="http://static.blog.csdn.net/images/category_icon.jpg"> <span>分类：</span> </div> <div class="category_r"> <label onclick="GetCategoryArticles('6081042','u012422829','top','51009957');"> <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">前端<em>（21）</em></span> <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;"> <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;"> <div class="subItem"> <div class="subItem_t"><a href="http://blog.csdn.net/u012422829/article/category/6081042" target="_blank">作者同类文章</a><i class="J_close">X</i></div> <ul class="subItem_l" id="top_6081042"> </ul> </div> </label> </div> </div> <div style="clear:both"></div><div style="border:solid 1px #ccc; background:#eee; float:left; min-width:200px;padding:4px 10px;"><p style="text-align:right;margin:0;"><span style="float:left;">目录<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a></span><a href="#" onclick="javascript:return openct(this);" title="展开">[+]</a></p><ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;"><li><a href="#t0">1模块的写法</a></li><ol><li><a href="#t1">1原始写法</a></li><li><a href="#t2">2对象写法</a></li><li><a href="#t3">3立即执行函数写法</a></li><li><a href="#t4">4放大模式</a></li><li><a href="#t5">5宽放大模式Loose augmentation</a></li><li><a href="#t6">6输入全局变量</a></li></ol><li><a href="#t7">AMD规范</a></li><ol><li><a href="#t8"> 1模块的规范</a></li><li><a href="#t9">2CommonJS</a></li><li><a href="#t10">3浏览器环境</a></li><li><a href="#t11">4AMD</a></li></ol><li><a href="#t12">3使用Requirejs</a></li><ol><li><a href="#t13">1为什么要用requirejs</a></li><li><a href="#t14">2requirejs的加载</a></li><li><a href="#t15">3主模块的写法</a></li><li><a href="#t16">4模块的加载</a></li><li><a href="#t17">5AMD模块的写法</a></li><li><a href="#t18">6加载非规范的模块</a></li><li><a href="#t19">7requirejs插件</a></li></ol></ol></div><div style="clear:both"></div><div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">本文整理自 <a target="_blank" href="http://www.ruanyifeng.com/blog/2012/10/javascript_module.html">http://www.ruanyifeng.com/blog/2012/10/javascript_module.html</a></p><h1 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t0" target="_blank"></a>1.模块的写法</h1><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t1" target="_blank"></a>1.原始写法</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">模块就是实现特定功能的一组方法。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> function m1(){<br> //...<br> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> function m2(){<br> //...<br> }</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t2" target="_blank"></a>2.对象写法</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var module1 = new Object({</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> _count : 0,</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> m1 : function (){<br> //...<br> },</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> m2 : function (){<br> //...<br> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> module1.m1();</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> module1._count = 5;</p></blockquote><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t3" target="_blank"></a>3.立即执行函数写法</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">使用"<a target="_blank" href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/" style="margin:0px; padding:0px; list-style-type:none; border:none">立即执行函数</a>"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var module1 = (function(){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var _count = 0;</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var m1 = function(){<br> //...<br> };</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var m2 = function(){<br> //...<br> };</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> return {<br> m1 : m1,<br> m2 : m2<br> };</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> })();</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">使用上面的写法，外部代码无法读取内部的_count变量。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> console.info(module1._count); //undefined</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">module1就是<a href="http://lib.csdn.net/base/javascript" class="replace_word" title="JavaScript知识库" target="_blank" style="color:#df3434; font-weight:bold;">JavaScript</a>模块的基本写法。下面，再对这种写法进行加工。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t4" target="_blank"></a>4.放大模式</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var module1 = (function (mod){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> mod.m3 = function () {<br> //...<br> };</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> return mod;</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> })(module1);</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t5" target="_blank"></a>5.宽放大模式（Loose augmentation）</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var module1 = ( function (mod){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> //...</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> return mod;</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> })(window.module1 || {});</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><span style="color:#ff0000">与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。</span></p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t6" target="_blank"></a>6.输入全局变量</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><span style="color:#ff0000">为了在模块内部调用全局变量，必须显式地将其他变量输入模块。</span></p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var module1 = (function ($, YAHOO) {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> //...</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> })(<a href="http://lib.csdn.net/base/jquery" class="replace_word" title="jQuery知识库" target="_blank" style="color:#df3434; font-weight:bold;">jQuery</a>, YAHOO);</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">上面的module1模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。这方面更多的讨论，参见Ben Cherry的著名文章<a target="_blank" href="http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth" style="margin:0px; padding:0px; list-style-type:none; border:none">《JavaScript Module Pattern: In-Depth》</a>。</p><div><br></div><div><br></div><h1><a name="t7" target="_blank"></a>2.AMD规范</h1><h2><a name="t8" target="_blank"></a> 1.模块的规范</h2><div><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">先想一想，为什么模块很重要？</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！考虑到Javascript模块现在还没有官方规范，这一点就更重要了。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">目前，通行的Javascript模块规范共有两种：<a target="_blank" href="http://wiki.commonjs.org/wiki/Modules/1.1" style="margin:0px; padding:0px; list-style-type:none; border:none">CommonJS</a>和<a target="_blank" href="https://github.com/amdjs/amdjs-api/wiki/AMD" style="margin:0px; padding:0px; list-style-type:none; border:none">AMD</a>。我主要介绍AMD，但是要先从CommonJS讲起。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t9" target="_blank"></a>2.CommonJS</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">2009年，美国程序员Ryan Dahl创造了<a target="_blank" href="http://nodejs.org/" style="margin:0px; padding:0px; list-style-type:none; border:none">node.js</a>项目，将javascript语言用于服务器端编程。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><img src="http://image.beekka.com/blog/201210/bg2012103002.jpg" alt="" style="margin:0px; padding:0px; list-style-type:none; border:0.3em solid rgb(224,223,204)"></p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">这标志"Javascript模块化编程"正式诞生。因为老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与<a href="http://lib.csdn.net/base/operatingsystem" class="replace_word" title="操作系统知识库" target="_blank" style="color:#df3434; font-weight:bold;">操作系统</a>和其他应用程序互动，否则根本没法编程。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a href="http://lib.csdn.net/base/nodejs" class="replace_word" title="Node.js知识库" target="_blank" style="color:#df3434; font-weight:bold;">Node.js</a>的<a target="_blank" href="http://nodejs.org/docs/latest/api/modules.html" style="margin:0px; padding:0px; list-style-type:none; border:none">模块系统</a>，就是参照<a target="_blank" href="http://wiki.commonjs.org/wiki/Modules/1.1" style="margin:0px; padding:0px; list-style-type:none; border:none">CommonJS</a>规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var math = require('math');</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">然后，就可以调用模块提供的方法：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var math = require('math');</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> math.add(2,3); // 5</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">因为这个系列主要针对浏览器编程，不涉及<a href="http://lib.csdn.net/base/nodejs" class="replace_word" title="Node.js知识库" target="_blank" style="color:#df3434; font-weight:bold;">node.js</a>，所以对CommonJS就不多做介绍了。我们在这里只要知道，require()用于加载模块就行了。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t10" target="_blank"></a>3.浏览器环境</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">有了服务器端模块以后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上一节的代码，如果在浏览器中运行，会有一个很大的问题，你能看出来吗？</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var math = require('math');</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> math.add(2, 3);</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t11" target="_blank"></a>4.AMD</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a target="_blank" href="https://github.com/amdjs/amdjs-api/wiki/AMD" style="margin:0px; padding:0px; list-style-type:none; border:none">AMD</a>是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require([module], callback);</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require(['math'], function (math) {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> math.add(2, 3);</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">目前，主要有两个Javascript库实现了AMD规范：<a target="_blank" href="http://requirejs.org/" style="margin:0px; padding:0px; list-style-type:none; border:none">require.js</a>和<a target="_blank" href="https://github.com/cujojs/curl" style="margin:0px; padding:0px; list-style-type:none; border:none">curl.js</a>。下文将通过介绍require.js，进一步讲解AMD的用法，以及如何将模块化编程投入实战。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><br></p><h1 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t12" target="_blank"></a>3.使用Require.js</h1><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"></p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t13" target="_blank"></a>1.为什么要用require.js？</h2><p></p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> <script src="1.js"></script><br> <script src="2.js"></script><br> <script src="3.js"></script><br> <script src="4.js"></script><br> <script src="5.js"></script><br> <script src="6.js"></script></p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">这段代码依次加载多个js文件。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">require.js的诞生，就是为了解决这两个问题：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> <img src="http://image.beekka.com/blog/201211/bg2012110701.png" alt="" style="margin:0px; padding:0px; list-style-type:none; border:0.3em solid rgb(224,223,204)"></p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> （1）实现js文件的异步加载，避免网页失去响应；</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> （2）管理模块之间的依赖性，便于代码的编写和维护。</p></blockquote><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t14" target="_blank"></a>2.require.js的加载</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">使用require.js的第一步，是先去官方网站<a target="_blank" href="http://requirejs.org/docs/download.html" style="margin:0px; padding:0px; list-style-type:none; border:none">下载</a>最新版本。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">下载后，假定把它放在js子目录下面，就可以加载了。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> <script src="js/require.js"></script></p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> <script src="js/require.js" defer async="true" ></script></p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> <script src="js/require.js" data-main="js/main"></script></p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t15" target="_blank"></a>3.主模块的写法</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">上一节的main.js，我把它称为"主模块"，意思是整个网页的入口代码。它有点像<a href="http://lib.csdn.net/base/c" class="replace_word" title="C语言知识库" target="_blank" style="color:#df3434; font-weight:bold;">C语言</a>的main()函数，所有代码都从这儿开始运行。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">下面就来看，怎么写main.js。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">如果我们的代码不依赖任何其他模块，那么可以直接写入javascript代码。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> // main.js</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> alert("加载成功！");</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">但这样的话，就没必要使用require.js了。真正常见的情况是，主模块依赖于其他模块，这时就要使用AMD规范定义的的require()函数。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> // main.js</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> // some code here</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">下面，我们看一个实际的例子。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">假定主模块依赖jquery、underscore和backbone这三个模块，main.js就可以这样写：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> // some code here</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">require.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t16" target="_blank"></a>4.模块的加载</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">上一节最后的示例中，主模块的依赖模块是['jquery', 'underscore', 'backbone']。默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require.config({</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> paths: {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> "jquery": "jquery.min",<br> "underscore": "underscore.min",<br> "backbone": "backbone.min"</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。如果这些模块在其他目录，比如js/lib目录，则有两种写法。一种是逐一指定路径。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require.config({</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> paths: {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> "jquery": "lib/jquery.min",<br> "underscore": "lib/underscore.min",<br> "backbone": "lib/backbone.min"</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">另一种则是直接改变基目录（baseUrl）。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require.config({</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> baseUrl: "js/lib",</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> paths: {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> "jquery": "jquery.min",<br> "underscore": "underscore.min",<br> "backbone": "backbone.min"</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">如果某个模块在另一台主机上，也可以直接指定它的网址，比如：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require.config({</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> paths: {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">require.js要求，每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个<a target="_blank" href="http://requirejs.org/docs/optimization.html" style="margin:0px; padding:0px; list-style-type:none; border:none">优化工具</a>，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t17" target="_blank"></a>5.AMD模块的写法</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> // math.js</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> define(function (){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> var add = function (x,y){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> return x+y;</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> };</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> return {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> add: add<br> };</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">加载方法如下：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> // main.js</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require(['math'], function (math){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> alert(math.add(1,1));</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> define(['myLib'], function(myLib){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> function foo(){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> myLib.doSomething();</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> return {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> foo : foo</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> };</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。</p><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t18" target="_blank"></a>6.加载非规范的模块</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">回答是可以的。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require.config({</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> shim: {<br><br> 'underscore':{<br> exports: '_'<br> },</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> 'backbone': {<br> deps: ['underscore', 'jquery'],<br> exports: 'Backbone'<br> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">比如，jQuery的插件可以这样定义：</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> shim: {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> 'jquery.scroll': {</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> deps: ['jquery'],</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> exports: 'jQuery.fn.scroll'</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p></blockquote><h2 style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"><a name="t19" target="_blank"></a>7.require.js插件</h2><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">require.js还提供一系列<a target="_blank" href="https://github.com/jrburke/requirejs/wiki/Plugins" style="margin:0px; padding:0px; list-style-type:none; border:none">插件</a>，实现一些特定的功能。</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">domready插件，可以让回调函数在页面DOM结构加载完成后再运行。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> require(['domready!'], function (doc){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> // called once the DOM is ready</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> });</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">text和image插件，则是允许require.js加载文本和图片文件。</p><blockquote style="margin:2em; padding:1em; list-style-type:none; border:0.3em solid rgb(224,223,204); overflow:auto"><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> define([</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> 'text!review.txt',</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> 'image!cat.jpg'</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> ],<br><br> function(review,cat){</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> console.log(review);</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> document.body.appendChild(cat);</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> }</p><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none"> );</p></blockquote><p style="margin-top:1em; margin-bottom:0px; margin-left:0.8em; padding-top:0px; padding-bottom:0px; list-style-type:none; border:none">类似的插件还有json和mdown，用于加载json文件和markdown文件。</p><br><br></div> </div><!-- Baidu Button BEGIN --><div class="bdsharebuttonbox tracking-ad bdshare-button-style0-16" style="float: right;" data-mod="popu_172" data-bd-bind="1501396699532"><a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important" target="_blank"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间" style="background-position:0 -52px !important" target="_blank"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博" style="background-position:0 -104px !important" target="_blank"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博" style="background-position:0 -260px !important" target="_blank"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网" style="background-position:0 -208px !important" target="_blank"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信" style="background-position:0 -1612px !important" target="_blank"></a></div><script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script><!-- Baidu Button END --> <!--172.16.140.13--><!-- Baidu Button BEGIN --><script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434" src="http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=417055"></script><script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)</script><!-- Baidu Button END --> <div id="digg" articleid="51009957"> <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();"> <dt>顶</dt> <dd>2</dd> </dl> <dl id="btnBury" class="digg digg_enable" onclick="btnburya();"> <dt>踩</dt> <dd>0</dd> </dl> </div> <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a> </div> <div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div> <script type="text/javascript"> function btndigga() { $(".tracking-ad[data-mod='popu_222'] a").click(); } function btnburya() { $(".tracking-ad[data-mod='popu_223'] a").click(); } </script> <ul class="article_next_prev"> <li class="prev_article"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian']);location.href='http://blog.csdn.net/u012422829/article/details/50999398';">上一篇</span><a href="http://blog.csdn.net/u012422829/article/details/50999398" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian'])">深入理解JavaScript系列(三): 作用域链与闭包</a></li> <li class="next_article"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian']);location.href='http://blog.csdn.net/u012422829/article/details/51044183';">下一篇</span><a href="http://blog.csdn.net/u012422829/article/details/51044183" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian'])">前端组件化开发和MVC</a></li> </ul> <div style="clear:both; height:10px;"></div> <div class="similar_article"> <h4></h4> <div class="similar_c" style="margin:20px 0px 0px 0px"> <div class="similar_c_t"> 相关文章推荐 </div> <div class="similar_wrap tracking-ad" data-mod="popu_36"> <ul class="similar_list fl"> <li> <em>•</em> <a href="http://blog.csdn.net/lbxx1984/article/details/46884671" title="JS模块化编程" strategy="BlogCommendFromBaidu" target="_blank">JS模块化编程</a> </li> <li> <em>•</em> <a href="http://blog.csdn.net/baidu_28312631/article/details/52822989" title="JavaScript 模块化入门Ⅰ：理解模块" strategy="BlogCommendFromBaidu" target="_blank">JavaScript 模块化入门Ⅰ：理解模块</a> </li> <li> <em>•</em> <a href="http://blog.csdn.net/u012422829/article/details/52372391" title="浏览器同源策略与跨域请求的实现方法" strategy="BlogCommendFromBaidu" target="_blank">浏览器同源策略与跨域请求的实现方法</a> </li> <li> <em>•</em> <a href="http://blog.csdn.net/u012422829/article/details/68947350" title="微服务架构(一):单一应用架构与微服务架构" strategy="BlogCommendFromBaidu" target="_blank">微服务架构(一):单一应用架构与微服务架构</a> </li> <li> <em>•</em> <a href="http://blog.csdn.net/zhenghaisen/article/details/49018145" title="js模块化历程" strategy="BlogCommendFromBaidu" target="_blank">js模块化历程</a> </li> </ul> <ul class="similar_list fr"> <li> <em>•</em> <a href="http://blog.csdn.net/lipc_/article/details/52024418" title="JS模块化编程总结" strategy="BlogCommendFromBaidu" target="_blank">JS模块化编程总结</a> </li> <li> <em>•</em> <a href="http://blog.csdn.net/qq_33915096/article/details/50965101" title="js 模块化开发" strategy="BlogCommendFromBaidu" target="_blank">js 模块化开发</a> </li> <li> <em>•</em> <a href="http://blog.csdn.net/liuyan19891230/article/details/50844319" title="JS模块化开发(requireJS)" strategy="BlogCommendFromBaidu" target="_blank">JS模块化开发(requireJS)</a> </li> <li> <em>•</em> <a href="http://blog.csdn.net/baidu_28312631/article/details/52823530" title="JavaScript 模块化入门Ⅱ：模块打包构建" strategy="BlogCommendFromBaidu" target="_blank">JavaScript 模块化入门Ⅱ：模块打包构建</a> </li> <li> <em>•</em> <a href="http://blog.csdn.net/u014607184/article/details/52335922" title="JS模块化工具requirejs的基本用法" strategy="BlogCommendFromBaidu" target="_blank">JS模块化工具requirejs的基本用法</a> </li> </ul> </div> </div> </div> </div>
