seajs进阶

http://blog.csdn.net/it_man/article/details/8482633

基础篇先请这里看http://blog.csdn.net/it_man/article/details/7782623

该页面列举了 SeaJS 中的常用实战过程中的问题。只要掌握这些方法，就可以娴熟地开始对你的网站进行模块化开发了。

默认情况下，SeaJS 要求所有文件都是标准的 CMD 模块，但现实场景下，有大量 jQuery 插件等非 CMD 模块存在。在 SeaJS 里，通过以下方式，可以直接调用非标准模块。

全站通用的要加载的库只写一次，而不想每个js里都调用，太繁琐

<code style="padding: 0px; line-height: 1.8; border-width: 0px; margin: 0px 2px; font-family: monaco; font-size: 14px; background-color: transparent;"><span class="com" style="color: rgb(102, 116, 123);">//可以放在在 init.js 里暴露到全局，这样，所有在 init.js 之后载入的文件，就都可以直接通过全局变量来拿 $ 等对象。</span><span class="pln" style="color: rgb(241, 242, 243);">

seajs</span><span class="pun" style="color: rgb(241, 242, 243);">.</span><span style="color: rgb(255, 255, 255);"><span class="kwd">use</span><span class="pun">(</span><span class="str">'init'</span><span class="pun">)</span></span><span class="pln" style="color: rgb(241, 242, 243);">

</span><span class="com" style="color: rgb(102, 116, 123);">//init.js</span><span class="pln" style="color: rgb(241, 242, 243);">
define</span><span class="pun" style="color: rgb(241, 242, 243);">(</span><span class="kwd" style="color: rgb(147, 199, 99);">function</span><span class="pun" style="color: rgb(241, 242, 243);">(</span><span class="kwd" style="color: rgb(147, 199, 99);">require</span><span class="pun" style="color: rgb(241, 242, 243);">,</span><span class="pln" style="color: rgb(241, 242, 243);"> exports</span><span class="pun" style="color: rgb(241, 242, 243);">)</span><span class="pln" style="color: rgb(241, 242, 243);"> </span><span class="pun" style="color: rgb(241, 242, 243);">{</span><span class="pln" style="color: rgb(241, 242, 243);">
</span><span class="kwd" style="color: rgb(147, 199, 99);">var</span><span class="pln" style="color: rgb(241, 242, 243);"> $ </span><span class="pun" style="color: rgb(241, 242, 243);">=</span><span class="pln" style="color: rgb(241, 242, 243);"> jQuery </span><span class="pun" style="color: rgb(241, 242, 243);">=</span><span class="pln" style="color: rgb(241, 242, 243);"> </span><span style="color: rgb(255, 255, 255);"><span class="kwd">require</span><span class="pun">(</span><span class="str">'jquery'</span><span class="pun">);</span></span><span class="pln" style="color: rgb(241, 242, 243);">

</span><span class="com" style="color: rgb(102, 116, 123);">// 暴露到全局</span><span class="pln" style="color: rgb(241, 242, 243);">
window</span><span class="pun" style="color: rgb(241, 242, 243);">.</span><span class="pln" style="color: rgb(241, 242, 243);">$ </span><span class="pun" style="color: rgb(241, 242, 243);">=</span><span class="pln" style="color: rgb(241, 242, 243);"> $</span><span class="pun" style="color: rgb(241, 242, 243);">;</span><span class="pln" style="color: rgb(241, 242, 243);">
</span><span class="pun" style="color: rgb(241, 242, 243);">});</span></code>

1. 暴露 jQuery

jQuery 插件都依赖 jQuery 模块，为了加载 jQuery 插件，首先得将 jQuery 模块暴露出来：

<code style="padding: 0px; line-height: 1.8; border-width: 0px; margin: 0px 2px; font-family: monaco; font-size: 14px; background-color: transparent;"><span class="com" style="color: rgb(102, 116, 123);">// 配置 jquery 并放入预加载项中</span><span class="pln" style="color: rgb(241, 242, 243);">
<span style="color: rgb(255, 255, 255);">seajs</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span style="color: rgb(255, 255, 255);"><span class="kwd">alias</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="str">'jquery'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'https://a.alipayobjects.com/static/arale/jquery/1.7.2/jquery.js'</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span class="pun" style="color: rgb(255, 255, 255);">},</span><span class="pln">
<span style="color: rgb(255, 255, 255);">  preload</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"jquery"</span><span class="pun">]</span></span><span class="pln">
</span><span class="pun" style="color: rgb(255, 255, 255);">})</span><span class="pln">

</span><span class="com" style="color: rgb(255, 255, 255);">// 将 jQuery 暴露到全局</span><span class="pln">
<span style="color: rgb(255, 255, 255);">seajs</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">modify</span><span class="pun">(</span><span class="str">'jquery'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">require</span><span class="pun">,</span><span class="pln"> exports</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  window</span></spa
4000
n><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">jQuery </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">$ </span><span class="pun">=</span></span><span style="color: rgb(255, 255, 255);"><span class="pln"> exports
</span><span class="pun">})</span></span></code>

2. 修改 jQuery 插件的接口

我们以 jquery.cookie 插件为例。

<code style="padding: 0px; line-height: 1.8; border-width: 0px; margin: 0px 2px; font-family: monaco; font-size: 14px; background-color: transparent;"><span class="com" style="color: rgb(102, 116, 123);">// 配置别名</span><span class="pln" style="color: rgb(241, 242, 243);">
<span style="color: rgb(255, 255, 255);">seajs</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span style="color: rgb(255, 255, 255);"><span class="kwd">alias</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="str">'cookie'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js'</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span class="pun" style="color: rgb(255, 255, 255);">}</span><span class="pln">
</span><span class="pun" style="color: rgb(255, 255, 255);">})</span><span class="pln">

</span><span class="com" style="color: rgb(255, 255, 255);">// 将 jQuery Cookie 插件自动包装成 CMD 接口</span><span class="pln">
<span style="color: rgb(255, 255, 255);">seajs</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">modify</span><span class="pun">(</span><span class="str">'cookie'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">require</span><span class="pun">,</span><span class="pln"> exports</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">module</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span style="color: rgb(255, 255, 255);"><span class="kwd">module</span><span class="pun">.</span><span class="pln">exports </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">.</span></span><span style="color: rgb(255, 255, 255);"><span class="pln">cookie
</span><span class="pun">})</span></span></code>

3. 调用 Cookie 插件

这样，在其他模块中，就可以直接调用 cookie 插件了：

<code style="padding: 0px; line-height: 1.8; border-width: 0px; margin: 0px 2px; font-family: monaco; font-size: 14px; background-color: transparent;"><span style="color: rgb(255, 255, 255);"><span class="pln">a</span><span class="pun">.</span><span class="pln">js</span><span class="pun">:</span></span><span class="pln">

<span style="color: rgb(255, 255, 255);">define</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">require</span><span class="pun">,</span><span class="pln"> exports</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span style="color: rgb(255, 255, 255);"><span class="kwd">var</span><span class="pln"> cookie </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">require</span><span class="pun">(</span><span class="str">'cookie'</span><span class="pun">)</span></span><span class="pln">

<span style="color: rgb(255, 255, 255);">  cookie</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">(</span><span class="str">'the_cookie'</span><span class="pun">)</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  cookie</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">(</span><span class="str">'the_cookie'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'the_value'</span><span class="pun">)</span></span><span class="pln">

<span style="color: rgb(255, 255, 255);">  </span></span><span class="com" style="color: rgb(255, 255, 255);">// ...</span><span class="pln">
</span><span class="pun" style="color: rgb(255, 255, 255);">})</span></code>

完整范例：http://seajs.org/test/issues/auto-transport/test.html

seajs里版本号和时间戳问题

用 seajs 组织项目，上线后，经常需要更新特定文件或所有文件的时间戳，以清空浏览器缓存。最简单的方式是：

<code style="padding: 0px; line-height: 1.8; border-width: 0px; margin: 0px 2px; font-family: monaco; font-size: 14px; background-color: transparent;"><span class="com" style="color: rgb(102, 116, 123);">//用来维护 jquery 等类库模块的版本号</span><span class="pln" style="color: rgb(241, 242, 243);">
<span style="color: rgb(255, 255, 255);">seajs</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span style="color: rgb(255, 255, 255);"><span class="kwd">alias</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="str">'jquery'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jquery/1.6.2/jquery'</span><span class="pun">,</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="str">'backbone'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'backbone/0.5.1/backbone'</span><span class="pun">,</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="str">'a'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'a.js?20110801'</span><span class="pun">,</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="str">'b'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'b.js?20110801'</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span class="pun" style="color: rgb(255, 255, 255);">}</span><span class="pln">
</span><span class="pun" style="color: rgb(255, 255, 255);">});</span><span style="color: rgb(255, 255, 255);"><span class="pln">

</span><span class="com">//利用 map,批量更新时间戳是最方便的</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">seajs</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">  </span></span><span style="color: rgb(255, 255, 255);"><span class="str">'map'</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="pun">[</span><span class="pln"> </span><span class="str">/^(.*\.(?:css|js))(.*)$/</span><span class="pln">i</span><span class="pun">,</span><span class="pln"> </span><span class="str">'$1?20110801'</span><span class="pln"> </span><span class="pun">]</span></span><span class="pln" style="color: rgb(241, 242, 243);">
</span><span class="pun" style="color: rgb(241, 242, 243);">]</span><span class="pln" style="color: rgb(241, 242, 243);">
</span><span class="pun" style="color: rgb(241, 242, 243);">});</span><span class="pln" style="color: rgb(241, 242, 243);">	</span></code>

条件加载

第一种：把依赖的模块都在 define 头部手工声明，不再依赖 SeaJS 的自动解析功能。这个模块同时依赖 play 和 work 两个模块，加载器会把这两个模块文件都下载下来。如果需要在 require 模块之后串行执行代码，那么只能用这个方式。

<code style="padding: 0px; line-height: 1.8; border-width: 0px; margin: 0px 2px; font-family: monaco; font-size: 14px; background-color: transparent;"><span class="pln" style="color: rgb(241, 242, 243);">define</span><span style="color: rgb(255, 255, 255);"><span class="pun">([</span><span class="str">'play'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'work'</span><span class="pun">],</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">require</span><span class="pun">,</span><span class="pln"> exports</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">	 </span></span><span class="com" style="color: rgb(255, 255, 255);">//是出去玩，还是工作？</span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="kwd">var</span><span class="pln"> choice </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">require</span><span class="pun">(</span><span class="pln">condition</span><span class="pun">()</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> </span><span class="str">'play'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'work'</span><span class="pun">);</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">	</span></span><span class="com" style="color: rgb(255, 255, 255);">//选择的难度</span><span class="pln">
<span style="color: rgb(255, 255, 255);">    console</span></span><span style="color: rgb(2
b3ed
55, 255, 255);"><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">choice</span><span class="pun">.</span><span class="pln">hard</span><span class="pun">());</span></span><span class="pln">
</span><span class="pun" style="color: rgb(241, 242, 243);">});</span></code>

第二种：使用 require.async 来进行条件加载，从静态分析的角度来看，require.async适合需要执行动态加载的模块很大（比如大量 json 数据），不适合都下载下来。但是require.async 方式加载的模块，不能打包工具找到，自然也不能被打包进上线的 js 中；而前一种方式可以。

<code style="padding: 0px; line-height: 1.8; border-width: 0px; margin: 0px 2px; font-family: monaco; font-size: 14px; background-color: transparent;"><span style="color: rgb(255, 255, 255);"><span class="pln">define</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">require</span><span class="pun">,</span><span class="pln"> exports</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span style="color: rgb(255, 255, 255);"><span class="kwd">require</span><span class="pun">.</span><span class="pln">async</span><span class="pun">(</span><span class="pln">condition</span><span class="pun">()</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> </span><span class="str">'play'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'work'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">choice</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">        console</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">choice</span><span class="pun">.</span><span class="pln">hard</span><span class="pun">());</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">    </span></span><span class="pun" style="color: rgb(255, 255, 255);">});</span><span class="pln">
</span><span class="pun" style="color: rgb(241, 242, 243);">});</span></code>

按需加载

很多时候模块并不需要立即加载，等到需要时再加载，性能更好。

<code style="padding: 0px; line-height: 1.8; border-width: 0px; margin: 0px 2px; font-family: monaco; font-size: 14px; background-color: transparent;"><span class="com" style="color: rgb(102, 116, 123);">//init.js</span><span class="pln" style="color: rgb(241, 242, 243);">
$</span><span style="color: rgb(255, 255, 255);"><span class="pun">(</span><span class="str">"#J_PicCover"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">	</span></span><span style="color: rgb(255, 255, 255);"><span class="kwd">require</span><span class="pun">.</span><span class="pln">async</span><span class="pun">(</span><span class="str">'module/highlight'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">		$</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">(</span><span class="str">".buy-info"</span><span class="pun">).</span><span class="pln">highlight</span><span class="pun">({</span><span class="pln">color</span><span class="pun">:</span><span class="str">'#ffe5c4'</span><span class="pun">,</span><span class="pln">speed</span><span class="pun">:</span><span class="lit">500</span><span class="pun">,</span><span class="pln">complete</span><span class="pun">:</span><span class="kwd">function</span><span class="pun">(){</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">		</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">},</span><span class="pln">iterator</span><span class="pun">:</span><span class="str">'sinusoidal'</span><span class="pun">});</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">	</span></span><span class="pun" style="color: rgb(255, 255, 255);">});</span><span class="pln">
</span><span class="pun" style="color: rgb(255, 255, 255);">});</span><span class="pln">

</span><span class="com" style="color: rgb(255, 255, 255);">//highlight.js</span><span class="pln">
<span style="color: rgb(255, 255, 255);">define</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">require</span><span class="pun">,</span><span class="pln"> exports</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">	jQuery</span></span><span style="color: rgb(255, 255, 255);"><span class="pun">.</span><span class="pln">fn</span><span class="pun">.</span><span class="pln">highlight </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
<span style="color: rgb(255, 255, 255);">		</span></span><span class="com" style="color: rgb(255, 255, 255);">//…...</span><span class="pln">
<span style="color: rgb(255, 255, 255);">	</span></span><span class="pun" style="color: rgb(255, 255, 255);">}</span><span class="pln">
</span><span class="pun" style="color: rgb(241, 242, 243);">});</span></code>