JavaScript_AMD规范

棫树發表於 2019-9-26 14:05:00

<h1 style="text-align: center">JavaScript_AMD规范</h1>
<h2>一、总结</h2>
<h3>一句话总结：</h3>
<h5>Asynchronous Module Definition：AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。</h5>
<h5>异步加载：AMD采用异步方式加载模块，模块的加载不影响它后面语句的运行。</h5>
<h5>回调函数：所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。</h5>
<p> </p>
<h3>1、AMD规范诞生的背景是什么？</h3>
<h5>第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">node.js的模块系统
</span><span style="color: rgba(0, 0, 255, 1)">var</span> math = require('math'<span style="color: rgba(0, 0, 0, 1)">);
math.add(</span>2, 3);</pre>
</div>
<p> </p>
<p> </p>
<h3>2、AMD规范的两个参数分别是什么意思：require(, callback);？</h3>
<h5>第一个参数，是一个数组，里面的成员就是要加载的模块；</h5>
<h5>第二个参数callback，则是加载成功之后的回调函数。</h5>
<p> </p>
<h3>3、目前主要两个实现了AMD规范的Javascript库是什么？</h3>
<h5>require.js和curl.js</h5>
<p> </p>
<h3>4、AMD模块的写法？</h3>
<h5>define方法定义匿名函数：define(function (){</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> math.js</span>
　　define(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (){
　　　　</span><span style="color: rgba(0, 0, 255, 1)">var</span> add = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (x,y){
　　　　　　</span><span style="color: rgba(0, 0, 255, 1)">return</span> x+<span style="color: rgba(0, 0, 0, 1)">y;
　　　　};
　　　　</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
　　　　　　add: add
　　　　};
　　});

加载方法如下：

　　</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> main.js</span>
　　require(['math'], <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (math){
　　　　alert(math.add(</span>1,1<span style="color: rgba(0, 0, 0, 1)">));
　　});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define([</span>'myLib'], <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(myLib){
　　　　</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
　　　　　　foo : foo
　　　　};
　　});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。</span></pre>
</div>
<p> </p>
<p> </p>
<h3>5、require.js插件的一些功能？</h3>
<h5># domready插件，可以让回调函数在页面DOM结构加载完成后再运行。</h5>
<h5># text和image插件，则是允许require.js加载文本和图片文件</h5>
<p> </p>
<p> </p>
<p> </p>
<h2>二、JavaScript学习笔记_AMD规范</h2>
<p>转自或参考：JavaScript学习笔记_AMD规范<br>https://blog.csdn.net/qq_27384769/article/details/78478114</p>
<div id="article_content" class="article_content clearfix">
<div class="article-copyright"> </div>
<div id="content_views" class="htmledit_views">
<h2>
一、CommonJS</h2>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">
2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。</p>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">
node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre><span class="pl-k" style="color: rgba(215, 58, 73, 1)">var</span> math <span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span> <span class="pl-c1" style="color: rgba(0, 92, 197, 1)">require</span>(<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>math<span class="pl-pds">'</span></span>);</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">然后，就可以调用模块提供的方法：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)">var</span> math <span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span> <span class="pl-c1" style="color: rgba(0, 92, 197, 1)">require</span>(<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>math<span class="pl-pds">'</span></span>);
　　<span class="pl-smi">math</span>.<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">add</span>(<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">2</span>, <span class="pl-c1" style="color: rgba(0, 92, 197, 1)">3</span>);</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。</p>
<h2>二、AMD</h2>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。 AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">require</span>([<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">module</span>], callback);</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">第一个参数，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">require</span>([<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>math<span class="pl-pds">'</span></span>], <span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span> (<span class="pl-smi">math</span>) {
　　　　<span class="pl-smi">math</span>.<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">add</span>(<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">2</span>, <span class="pl-c1" style="color: rgba(0, 92, 197, 1)">3</span>);
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。</p>
<h2>三、require.js的用法</h2>
<h3>1. 为什么要用require.js</h3>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>1.js<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span>
　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>2.js<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span>
　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>3.js<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span>
　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>4.js<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span>
　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>5.js<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span>
　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>6.js<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span></pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">这段代码依次加载多个js文件。这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。 require.js的诞生，就是为了解决这两个问题：</p>
<h3>2. require.js的加载</h3>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">使用require.js的第一步，是先去官方网站下载最新版本。下载后，假定把它放在js子目录下面，就可以加载了。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre><span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>js/require.js<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span></pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre><span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>js/require.js<span class="pl-pds">"</span></span> defer <span class="pl-k" style="color: rgba(215, 58, 73, 1)">async</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>true<span class="pl-pds">"</span></span> <span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span></pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre><span class="pl-k" style="color: rgba(215, 58, 73, 1)"><</span>script src<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>js/require.js<span class="pl-pds">"</span></span> data<span class="pl-k" style="color: rgba(215, 58, 73, 1)">-</span>main<span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span><span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>js/main<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">><</span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">/</span>script<span class="pl-k" style="color: rgba(215, 58, 73, 1)">></span></pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。</p>
<h3>3. 主模块的写法</h3>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">上一节的main.js，我把它称为"主模块"，意思是整个网页的入口代码。它有点像C语言的main()函数，所有代码都从这儿开始运行。下面就来看，怎么写main.js。如果我们的代码不依赖任何其他模块，那么可以直接写入javascript代码。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-c" style="color: rgba(106, 115, 125, 1)"><span class="pl-c">//</span> main.js</span>
　　<span class="pl-en" style="color: rgba(111, 66, 193, 1)">alert</span>(<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>加载成功！<span class="pl-pds">"</span></span>);</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">但这样的话，就没必要使用require.js了。真正常见的情况是，主模块依赖于其他模块，这时就要使用AMD规范定义的的require()函数。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-c" style="color: rgba(106, 115, 125, 1)"><span class="pl-c">//</span> main.js</span>
　　<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">require</span>([<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>moduleA<span class="pl-pds">'</span></span>, <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>moduleB<span class="pl-pds">'</span></span>, <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>moduleC<span class="pl-pds">'</span></span>], <span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span> (<span class="pl-smi">moduleA</span>, <span class="pl-smi">moduleB</span>, <span class="pl-smi">moduleC</span>){
　　　　<span class="pl-c" style="color: rgba(106, 115, 125, 1)"><span class="pl-c">//</span> some code here</span>
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。 require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。</p>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">下面，我们看一个实际的例子。假定主模块依赖jquery、underscore和backbone这三个模块，main.js就可以这样写：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">require</span>([<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>jquery<span class="pl-pds">'</span></span>, <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>underscore<span class="pl-pds">'</span></span>, <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>backbone<span class="pl-pds">'</span></span>], <span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span> (<span class="pl-smi">$</span>, <span class="pl-smi">_</span>, <span class="pl-smi">Backbone</span>){
　　　　<span class="pl-c" style="color: rgba(106, 115, 125, 1)"><span class="pl-c">//</span> some code here</span>
　　});</pre>
</div>
<h3>4. 模块的加载</h3>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-smi">require</span>.<span class="pl-en" style="color: rgba(111, 66, 193, 1)">config</span>({
　　　　paths<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> {
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>jquery<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>jquery.min<span class="pl-pds">"</span></span>,
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>underscore<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>underscore.min<span class="pl-pds">"</span></span>,
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>backbone<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>backbone.min<span class="pl-pds">"</span></span>
　　　　}
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。如果这些模块在其他目录，比如js/lib目录，则有两种写法。一种是逐一指定路径。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-smi">require</span>.<span class="pl-en" style="color: rgba(111, 66, 193, 1)">config</span>({
　　　　paths<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> {
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>jquery<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>lib/jquery.min<span class="pl-pds">"</span></span>,
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>underscore<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>lib/underscore.min<span class="pl-pds">"</span></span>,
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>backbone<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>lib/backbone.min<span class="pl-pds">"</span></span>
　　　　}
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">另一种则是直接改变基目录（baseUrl）。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-smi">require</span>.<span class="pl-en" style="color: rgba(111, 66, 193, 1)">config</span>({
　　　　baseUrl<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>js/lib<span class="pl-pds">"</span></span>,
　　　　paths<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> {
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>jquery<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>jquery.min<span class="pl-pds">"</span></span>,
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>underscore<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>underscore.min<span class="pl-pds">"</span></span>,
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>backbone<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>backbone.min<span class="pl-pds">"</span></span>
　　　　}
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">如果某个模块在另一台主机上，也可以直接指定它的网址，比如：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-smi">require</span>.<span class="pl-en" style="color: rgba(111, 66, 193, 1)">config</span>({
　　　　paths<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> {
　　　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>jquery<span class="pl-pds">"</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">"</span>https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min<span class="pl-pds">"</span></span>
　　　　}
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">require.js要求，每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。</p>
<h3>5. AMD模块的写法</h3>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre><span class="pl-c" style="color: rgba(106, 115, 125, 1)"><span class="pl-c">//</span> math.js</span>
　　<span class="pl-en" style="color: rgba(111, 66, 193, 1)">define</span>(<span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span> (){
　　　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)">var</span> <span class="pl-en" style="color: rgba(111, 66, 193, 1)">add</span> <span class="pl-k" style="color: rgba(215, 58, 73, 1)">=</span> <span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span> (<span class="pl-smi">x</span>,<span class="pl-smi">y</span>){
　　　　　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)">return</span> x<span class="pl-k" style="color: rgba(215, 58, 73, 1)">+</span>y;
　　　　};
　　　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)">return</span> {
　　　　　　add<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> add
　　　　};
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">加载方法如下：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-c" style="color: rgba(106, 115, 125, 1)"><span class="pl-c">//</span> main.js</span>
　　<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">require</span>([<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>math<span class="pl-pds">'</span></span>], <span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span> (<span class="pl-smi">math</span>){
　　　　<span class="pl-en" style="color: rgba(111, 66, 193, 1)">alert</span>(<span class="pl-smi">math</span>.<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">add</span>(<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">1</span>,<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">1</span>));
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre><span class="pl-en" style="color: rgba(111, 66, 193, 1)">define</span>([<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>myLib<span class="pl-pds">'</span></span>], <span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span>(<span class="pl-smi">myLib</span>){
　　　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span> <span class="pl-en" style="color: rgba(111, 66, 193, 1)">foo</span>(){
　　　　　　<span class="pl-smi">myLib</span>.<span class="pl-en" style="color: rgba(111, 66, 193, 1)">doSomething</span>();
　　　　}
　　　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)">return</span> {
　　　　　　foo <span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> foo
　　　　};
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。</p>
<h3>6. 加载非规范的模块</h3>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？回答是可以的。这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。</p>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">require.config({ 　　　　shim: {</p>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">　　　　　　'underscore':{ 　　　　　　　　exports: '_' 　　　　　　}, 　　　　　　'backbone': { 　　　　　　　　deps: ['underscore', 'jquery'], 　　　　　　　　exports: 'Backbone' 　　　　　　} 　　　　} 　　}); require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。比如，jQuery的插件可以这样定义：</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>shim<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> {
　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>jquery.scroll<span class="pl-pds">'</span></span><span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> {
　　　　　　deps<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> [<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>jquery<span class="pl-pds">'</span></span>],
　　　　　　exports<span class="pl-k" style="color: rgba(215, 58, 73, 1)">:</span> <span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>jQuery.fn.scroll<span class="pl-pds">'</span></span>
　　　　}
　　}
</pre>
</div>
<h3>7. require.js插件</h3>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">require.js还提供一系列插件，实现一些特定的功能。 domready插件，可以让回调函数在页面DOM结构加载完成后再运行。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　　<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">require</span>([<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>domready!<span class="pl-pds">'</span></span>], <span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span> (<span class="pl-smi">doc</span>){
　　　　<span class="pl-c" style="color: rgba(106, 115, 125, 1)"><span class="pl-c">//</span> called once the DOM is ready</span>
　　});</pre>
</div>
<p style="color: rgba(36, 41, 46, 1); font-size: 16px">text和image插件，则是允许require.js加载文本和图片文件。</p>
<div class="highlight highlight-source-js" style="color: rgba(36, 41, 46, 1); font-size: 16px">
<pre>　<span class="pl-en" style="color: rgba(111, 66, 193, 1)">define</span>([
　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>text!review.txt<span class="pl-pds">'</span></span>,
　　　　<span class="pl-s" style="color: rgba(3, 47, 98, 1)"><span class="pl-pds">'</span>image!cat.jpg<span class="pl-pds">'</span></span>
　　　　],

　　　　<span class="pl-k" style="color: rgba(215, 58, 73, 1)">function</span>(<span class="pl-smi">review</span>,<span class="pl-smi">cat</span>){
　　　　　　<span class="pl-en" style="color: rgba(111, 66, 193, 1)">console</span>.<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">log</span>(review);
　　　　　　<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">document</span>.<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">body</span>.<span class="pl-c1" style="color: rgba(0, 92, 197, 1)">appendChild</span>(cat);
　　　　}
　　);</pre>
</div>
</div>
</div>
<div> </div>

</div>
<div id="MySignature" role="contentinfo">
<div id="fry_added_part">
<div class="fry_website">
   <div class="fry_website" style="color:#3c8dbc;padding: 10px 0;display:none;">
         我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：
         【读书编程笔记】fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
   </div>
   <div class="copyright" style="color: red;padding-bottom: 10px;">
         版权申明：欢迎转载，但请注明出处
         <div style="font-size: 12px">一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。</div>
   </div>
   <div id="fry_know_friends" style="color: red;padding-bottom: 10px;font-size: 22px;">
         <div style="display:none;"></div>
         <div style="display:none;">在校每年国奖、每年专业第一，加拿大留学，先后工作于华东师范大学和香港教育大学。</div>
         <div style="display:none;">2025-04-30：宅加太忙，特此在网上找女朋友，坐标上海，非诚勿扰，vx：fan404006308</div>
   </div>
   <div class="copyright" style="color: green;padding-bottom: 10px;">
         录播课资料github地址：https://github.com/fry404006308/fry_course_materials
   </div>
   <div style="display:none;"></div>
</div>
<div class="fry_tech_group" style="color: mediumpurple;">
   <div>
         AI交流资料群：753014672
   </div>
</div>
<div class="fry_recommend">
   <h2>作者相关推荐</h2>
   <div id="fry_recommend" style="padding-bottom: 40px">
   </div>
</div>
<style>
   #fry_added_part .inspiration_content{
         //max-height: 120px;
         overflow: auto;
         margin: 20px 0;
   }
   #fry_added_part .fry_inspiration .simple a{
         margin-right: 25px;
   }
</style>
<div style="display:none;" class="fry_inspiration">
   <div style="color: red;font-size: 20px;text-align: center;" class="title">
         感悟总结
   </div>
   
   
   <div class="detail">
         <div class="url_set">
            <div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/13498246.html"></div>
            
            
         </div>
         <div class="content_set"></div>
   </div>
   
   <div style="display: none;" class="simple">
         <div style="color: #FF9966;margin-bottom: 10px;">其它重要感悟总结</div>
         <div>
            感悟总结200813
            最近心境200830
            最近心境201019
            201218-210205
         </div>
   </div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/Renyi-Fan/p/11590520.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript_AMD规范