seajs如何整合jquery

標籤：

轉自：http://www.tuicool.com/articles/bmuaEb

今天早上初嘗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 的自動載入外掛程式機制挺不錯。

@iahuAMD 是一載入就執行，當一次載入很多檔案時，意味著會立刻執行大量指令碼，這時可能會導致 UI 卡。CMD 的執行是分散的，因此一般來說不會造成 UI 卡。SeaJS 與 Node.js 的關係，可參考這篇文檔：#275shim 配置後，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

seajs如何整合jquery