seajs實戰(zhàn)參考

命運之輪 2014-08-06

展開全文

seajs實戰(zhàn)參考

該頁面列舉了 SeaJS 中的常用實戰(zhàn)過程中的問題。只要掌握這些方法，就可以嫻熟地開始對你的網(wǎng)站進(jìn)行模塊化開發(fā)了。

默認(rèn)情況下，SeaJS 要求所有文件都是標(biāo)準(zhǔn)的 CMD 模塊，但現(xiàn)實場景下，有大量 jQuery 插件等非 CMD 模塊存在。在 SeaJS 里，通過以下方式，可以直接調(diào)用非標(biāo)準(zhǔn)模塊。

全站通用的要加載的庫只寫一次，而不想每個js里都調(diào)用，太繁瑣

//可以放在在 init.js 里暴露到全局，這樣，所有在 init.js 之后載入的文件，就都可以直接通過全局變量來拿 $ 等對象。

seajs.use('init')

//init.js
define(function(require, exports) {
	var $ = jQuery = require('jquery');
	
	// 暴露到全局
	window.$ = $;
});

1. 暴露 jQuery

jQuery 插件都依賴 jQuery 模塊，為了加載 jQuery 插件，首先得將 jQuery 模塊暴露出來：

// 配置 jquery 并放入預(yù)加載項中
seajs.config({
  alias: {
    'jquery': 'https://a./static/arale/jquery/1.7.2/jquery.js'
  },
  preload: ["jquery"]
})

// 將 jQuery 暴露到全局
seajs.modify('jquery', function(require, exports) {
  window.jQuery = window.$ = exports
})

2. 修改 jQuery 插件的接口

我們以 jquery.cookie 插件為例。

// 配置別名
seajs.config({
  alias: {
    'cookie': 'https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js'
  }
})

// 將 jQuery Cookie 插件自動包裝成 CMD 接口
seajs.modify('cookie', function(require, exports, module) {
  module.exports = $.cookie
})

3. 調(diào)用 Cookie 插件

這樣，在其他模塊中，就可以直接調(diào)用 cookie 插件了：

a.js:

define(function(require, exports) {
  var cookie = require('cookie')

  cookie('the_cookie')
  cookie('the_cookie', 'the_value')

  // ...
})

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

seajs里版本號和時間戳問題

用 seajs 組織項目，上線后，經(jīng)常需要更新特定文件或所有文件的時間戳，以清空瀏覽器緩存。最簡單的方式是：

//用來維護(hù) jquery 等類庫模塊的版本號
seajs.config({
  alias: {
    'jquery': 'jquery/1.6.2/jquery',
    'backbone': 'backbone/0.5.1/backbone',
    'a': 'a.js?20110801',
    'b': 'b.js?20110801'
  }
});	

//利用 map,批量更新時間戳是最方便的
seajs.config({
  'map': [
    [ /^(.*\.(?:css|js))(.*)$/i, '$1?20110801' ]
  ]
});

條件加載

第一種：把依賴的模塊都在 define 頭部手工聲明，不再依賴 SeaJS 的自動解析功能。這個模塊同時依賴 play 和 work 兩個模塊，加載器會把這兩個模塊文件都下載下來。如果需要在 require 模塊之后串行執(zhí)行代碼，那么只能用這個方式。

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í)行動態(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());
    });
});

按需加載

很多時候模塊并不需要立即加載，等到需要時再加載，性能更好。

//init.js
$("#J_PicCover").click(function(){
	require.async('module/highlight', function(){
		$(".buy-info").highlight({color:'#ffe5c4',speed:500,complete:function(){
		},iterator:'sinusoidal'});
	});
});

//highlight.js
define(function(require, exports) {
	jQuery.fn.highlight = function(settings) {
		//…...
	}
});