seajs初嘗 加載jquery返回null解決學習日誌含示例下載

原文地址：http://www.tuicool.com/articles/bmuaEb

如需demo示例，請點擊下方連接下載：

http://yunpan.cn/cVEybKs8nV7CF  提取碼 2164

今天早上初嘗seajs，發現一個很是蛋疼的事情，使用官方demo中的jquery是沒有問題，

下載官方最新版jquery 2.1.1發現console.log($)返回null，百思不得其解！只能求助度娘！

在GitHub發現了玉伯的說明 《 直接調用 jQuery 插件等非標準模塊的方法 》

不過這方法在2.3版本貌似已經不行,seajs.modify方法已在這版本移除！

https://github.com/seajs/seajs/issues/286

這裏的標準模塊指的是AMD和CMD的定義

引用玉伯在知乎的詳細回答

http://www.zhihu.com/question/20351507/answer/14859415

如下引用玉伯的回覆你們會更加深刻了解

@lifesinger 昨天折騰得太累了，很差意思。後來仍是用 RequireJs 解決問題。 另外，我想問問： 1. AMD 是否是容易卡死UI？ 2. 爲何採用與 SeaJs一樣採用 CMD 規範編寫的 NodeJs 模塊 不能直接調用——我大概觀察了下，好像定義格式不太同樣，這也是問題啊，既然遵循一樣的規範爲何格式又不同， 3. 用常規全局變量寫法寫的腳本通過 shim 配置，在 var ejs = require('ejs') 後會覆蓋 ejs 的（全局）定義，可是能夠直接 require('ejs')，而後 ejs 會註冊到window 名下。 4. 把一個常規腳本，換成 SeaJs 標準格式 跟 RequireJs 轉換有什麼不一樣嗎？ 另另外，感受RequireJS 的自動加載插件機制挺不錯。

@iahu
AMD 是一加載就執行，當一次加載不少文件時，意味着會馬上執行大量腳本，這時可能會致使 UI 卡。CMD 的執行是分散的，所以通常來講不會形成 UI 卡。 SeaJS 與 Node.js 的關係，可參考這篇文檔：#275 shim 配置後，require('ejs') 獲得的 ejs 就是全局那個 ejs，也能夠將掛載在 window 上的 ejs 去掉，好比 seajs.config({ plugins: ["shim"], alias: { src: 'path/to/ejs.js', exports: function() { var ejs = window.ejs; window.ejs = undefined; return ejs } }}) RequireJS 的 shim 插件，本質上和 SeaJS 是同樣的。

以上提到的方法已過期了，只好繼續嘗試其餘辦法！

方法一：

仍是玉伯老大的辦法《seajs 2.1.1中去掉了seajs.modify 後，如何preload CDN 中的jquery ？》

https://github.com/seajs/seajs/issues/862

整個文章主要是說不修改成CMD模式下在模塊內部使用jquery，玉伯老大是不推介這樣，但仍是能夠實現

不過jquery文件就不是在seajs.config裏配置了，是直接在head頭部引入文件，就像平時那樣，而後在seajs內部某個事件機制觸發將全局的jQuery對象帶到內部module.exports對象；

seajs.on('exec', function(module) {  if (module.uri === seajs.resolve('jquery')) {   window.$ = window.jQuery = module.exports;  } });

方法二：

固然就是按照CMD定義作封裝一次jquery，方法也很簡單，只要把源代碼粘進去，而後返回jquery對象便可；

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

這樣就能夠在seajs.config引入文件在內部其餘模塊使用,這裏返回爲何是$.noConflict(),請看w3c學校介紹

http://www.w3school.com.cn/jquery/core_noconflict.asp

seajs.config({  base : "../sea-modules/",  alias : {   "jquery" : "jquery.js"  } });

define(function(require, exports, module){  var $ = require("jquery");  exports.showObj = function() {   console.log($);  } });

方法三：

參照seajs官方jquery封裝方法

if ( typeof module === "object" && module && typeof module.exports === "object" ) { module.exports = jQuery;} else { if ( typeof define === "function" && define ) { define( "jquery", [], function () { return jQuery; } ); }}if ( typeof window === "object" && typeof window.document === "object" ) { window.jQuery = window.$ = jQuery;}

https://github.com/seajs/examples

在目錄 sea-modules/jquery 裏就有封裝好的1.10版本；

 

https://github.com/seajs/seajs/issues/264