SeaJs學習筆記$爲null

最近在接觸seajs，記錄學習過程當中遇到的困難。

3-10：

在引進jQuery的時候，發現$爲null。先把代碼貼上

//配置
seajs.config({

　　　　base: "./js/",
　　　　alias:{
　　　　　　"jquery":"jquery.js"
　　　　}
　});
　seajs.use("./js/main");

//主模塊
define(function(require, exports, module) {
 　 var $ = require('jquery');	
　　console.log($); //null
});

個人全部JS都在項目目錄下的js文件夾中，這樣看是沒問題的，結果怎麼也找不到問題所在，上網查了查，問題出在jquery文件上。由於用的是seajs框架因此文件格式得遵循CMD的規範，因此咱們普通用的插件是沒被模塊化的，因此得先模塊化。如何模塊化呢，有兩種方法。

第一種

把下列代碼放在jQuery源代碼的最後面，這裏的後面是指jQuery文件自執行函數最後面，不是執行函數外面。

//2.3.0版本的寫法
if ( typeof define === "function" ) {
　　define(function () { return jQuery; } );
}

//2.2.0的寫法
if ( typeof module === "object" && module && typeof module.exports === "object" ) {	
　　module.exports = jQuery;
} else {
　　if ( typeof define === "function" ) {
	define(function () { return jQuery; } );
　　}
}
;$.noConflict(); //這是2.2.0版本在自執行函數外面加的

上面兩種寫法均可以。

第二種　

define(function(){  
  //jquery code源代碼   
  
  return $.noConflict(true);  
});  

把jQuery所有的源代碼放進模塊裏。

 

上面的兩種解決方法是針對那些直接把之前jQuery文件拖過來用的狀況。但是我是下載的官方文檔，把裏面已經模塊化過的jQuery文件拿來用的，可仍是不行。仔細看了看，終於找到緣由了。下面是官方模塊後的jQuery文件的一部分代碼

if ( typeof define === "function" ) {
　　define("jquery/jquery/1.10.1/jquery", [], function () { return jQuery; } );
}

你們發現問題沒有，官方把模塊的ID命名了，而我上面的配置是alias:{"jquery":"jquery.js"},這裏我配置的路徑和模塊的ID對不上，這裏就涉及到了SeaJs裏面一個路徑和ID匹配的原則，這也是我出現問題的所在。

seajs的設計思想是，路徑即ID。通常在調用define()方法時，若是隻傳遞一個factory function，那麼這個模塊就是個匿名模塊；或者傳遞define(module_id, dependency, factory)，這個模塊就是個具名模塊。

若是一個文件就是一個模塊，那麼匿名模塊就能夠了。可是在生產環境中，每每會把多個模塊放到一個文件裏，可是路徑只有一個，如何知道要加載哪一個模塊呢？這時候就須要給其中一個模塊賦予module_id，和path保持一致，seajs就知道應該加載這個ID和path匹配的模塊了。若是具名模塊的id和require的path參數不匹配，就會返回null。

返回個人代碼裏，我配置的路勁是jquery.js，而當前jQuery的模塊ID是"jquery/jquery/1.10.1/jquery-debug"，因此根據咱們上面所講的seajs路徑和ID匹配的原則， 模塊返回的就是null了，這種狀況很好解決，也有兩種方法。

第一種：修改配置路徑以下：

seajs.config({
	base: "./js/",
	alias:{
		"jquery":"jquery/jquery/1.10.1/jquery.js"//此時jquery.js放置的必須位置和設置的一致

} });

第二種：去掉模塊ID和依賴項只剩factory，把模塊變成匿名模塊，這樣它的ID就默認爲文件名了。

if ( typeof define === "function" ) {
	define( function () { return jQuery; } );
}

經過這兩種方法來讓路徑和ID保持一致。

本人爲前端菜鳥，上述言論有誤之處，但願你們能在下方評論指出，若是其餘方法或疑惑也能夠提出來，你們一塊兒成長~~