码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-20 12:25:27      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

在这里就不介绍 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/

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

标签:

原文地址:http://www.cnblogs.com/zion0707/p/4353204.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!