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></span><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(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><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> ![支援seaJs和requireJs的前端子產品開發方案（二）：業務頁面和入口腳本init.js一.業務頁面二.入口腳本init.js[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)