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

浏览数：34 / 时间：2015年06月09日

在这里就不介绍 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(‘‘);
            });
        });
    });

});