seajs 引用 jquery 和 使用插件解決方法

在這裏就不介紹 seajs 是啥了，直接來講說在 seajs 中使用jquery 和 jquery 插件遇到的問題：

首先：【index.html 爲展現頁】【main.js爲主體頁 】【 jquery.js 爲jquery庫】【plugins.js爲jquery插件】,它們各自是一個頁面

index.html

seajs.config({
    base:'./static/js/',
    alias:{
        'main':'main'
    }
});
//引用主體js
seajs.use('main');

View Code

事先 jquery.js 和plugins.js 須要改形成 seajs 模塊代碼以下

jquery.js 改造：

(function(factory) {
    if (typeof define === 'function') {
        define('/jquery', [], factory);
    }
    else {
        factory();
    }

})(function(require) {

    //...jquery 源碼

    if (require) return $.noConflict(true);
});

View Code

plugins.js改造：

(function(factory) {
    if (typeof define === 'function') {
        // 若是define已被定義，模塊化代碼
        define('plugins', ['jquery'], function(require, exports, module) {
            factory(require('jquery')); // 初始化插件
            return jQuery; // 返回jQuery
        });
    } else {
        // 若是define沒有被定義，正常執行jQuery
        factory(jQuery);
    }
}(function($) {
 
 //jquery 插件代碼   注意： 不包括 (function(){})(jQuery);外殼   

}));

View Code

main.js 引用jquery.js 和plugins.js:

define(function( require , exports , module ){

    //引入jquery 和 jquery 插件
    seajs.config({
        base : './static/js/', 
        alias : {
            'jquery':'jquery.sea.js',
            'plugins':'plugins.js'
        }
    });

    //引入jquery 和 jquery 插件
    seajs.use(['jquery','plugins'],function($){
        
        //...這裏是jquery插件調用


        //平時寫的代碼
        $(function(){
            $(document).click(function(){
                $('body').html('');
            });
        });
    });

});

View Code

 

本文案例參考範文：http://julabs.com/blog/seajs-jquery-and-plugins/