該頁面列舉了 SeaJS 中的常用實(shí)戰(zhàn)過程中的問題。只要掌握這些方法,就可以嫻熟地開始對你的網(wǎng)站進(jìn)行模塊化開發(fā)了。
默認(rèn)情況下,SeaJS 要求所有文件都是標(biāo)準(zhǔn)的 CMD 模塊,但現(xiàn)實(shí)場景下,有大量 jQuery 插件等非 CMD 模塊存在。在 SeaJS 里,通過以下方式,可以直接調(diào)用非標(biāo)準(zhǔn)模塊。
//可以放在在 init.js 里暴露到全局,這樣,所有在 init.js 之后載入的文件,就都可以直接通過全局變量來拿 $ 等對象。seajs.use('init')//init.jsdefine(function(require, exports) { var $ = jQuery = require('jquery'); // 暴露到全局 window.$ = $;});
jQuery 插件都依賴 jQuery 模塊,為了加載 jQuery 插件,首先得將 jQuery 模塊暴露出來:
// 配置 jquery 并放入預(yù)加載項(xiàng)中seajs.config({ alias: { 'jquery': 'https://a.alipayobjects.com/static/arale/jquery/1.7.2/jquery.js' }, preload: ["jquery"]})// 將 jQuery 暴露到全局seajs.modify('jquery', function(require, exports) { window.jQuery = window.$ = exports})
我們以 jquery.cookie 插件為例。
// 配置別名seajs.config({ alias: { 'cookie': 'https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js' }})// 將 jQuery Cookie 插件自動(dòng)包裝成 CMD 接口seajs.modify('cookie', function(require, exports, module) { module.exports = $.cookie})
這樣,在其他模塊中,就可以直接調(diào)用 cookie 插件了:
a.js:define(function(require, exports) { var cookie = require('cookie') cookie('the_cookie') cookie('the_cookie', 'the_value') // ...})
完整范例:http://seajs.org/test/issues/auto-transport/test.html
用 seajs 組織項(xiàng)目,上線后,經(jīng)常需要更新特定文件或所有文件的時(shí)間戳,以清空瀏覽器緩存。最簡單的方式是:
//用來維護(hù) jquery 等類庫模塊的版本號(hào)seajs.config({ alias: { 'jquery': 'jquery/1.6.2/jquery', 'backbone': 'backbone/0.5.1/backbone', 'a': 'a.js?20110801', 'b': 'b.js?20110801' }}); //利用 map,批量更新時(shí)間戳是最方便的seajs.config({ 'map': [ [ /^(.*\.(?:css|js))(.*)$/i, '$1?20110801' ] ]});
第一種:把依賴的模塊都在 define 頭部手工聲明,不再依賴 SeaJS 的自動(dòng)解析功能。這個(gè)模塊同時(shí)依賴 play 和 work 兩個(gè)模塊,加載器會(huì)把這兩個(gè)模塊文件都下載下來。如果需要在 require 模塊之后串行執(zhí)行代碼,那么只能用這個(gè)方式。
define(['play', 'work'], function(require, exports) { //是出去玩,還是工作? var choice = require(condition() ? 'play' : 'work'); //選擇的難度 console.log(choice.hard());});
第二種:使用 require.async 來進(jìn)行條件加載,從靜態(tài)分析的角度來看,require.async適合需要執(zhí)行動(dòng)態(tài)加載的模塊很大(比如大量 json 數(shù)據(jù)),不適合都下載下來。但是require.async 方式加載的模塊,不能打包工具找到,自然也不能被打包進(jìn)上線的 js 中;而前一種方式可以。
define(function(require, exports) { require.async(condition() ? 'play' : 'work', function(choice) { console.log(choice.hard()); });});
很多時(shí)候模塊并不需要立即加載,等到需要時(shí)再加載,性能更好。
//init.js$("#J_PicCover").click(function(){ require.async('module/highlight', function(){ $(".buy-info").highlight({color:'#ffe5c4',speed:500,complete:function(){ },iterator:'sinusoidal'}); });});//highlight.jsdefine(function(require, exports) { jQuery.fn.highlight = function(settings) { //…... }});
聯(lián)系客服