seajs模块化jQuery与jQuery插件

seajs模块化jQuery与jQuery插件

模块化jQuery

1、把jQuery修改成SeaJs的模块代码非常简单,就是用下面这段语句将jQuery源代码包裹起来:

define('jquery',[],function(require, exports, module){
    //这里放jQuery源代码
    module.exports = jQuery;
});

2、也可以加一个判断,如果define已经被定义,就把jQuery模块化,如果define没有被定义,正常执行jQuery代码:

(function(factory) {
    if (typeof define === 'function') {
        define('/jquery', [], factory);
    }
    else {
        factory();
    }
})(function(require) {
    //这里放jQuery源代码
    if (require) return $.noConflict(true);
});

3、如果你用的是jQuery1.7版本以上的,那就更方便了。可以看下jQuery源码的最后几行,你会发现类似下方的代码:

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

4、如果判断语句为真,那么jQuery就会自动模块化。所以改下判断语句,只留typeof define === "function"jQuery便可以自动模块化:

if ( typeof define === "function") {
    define( "jquery", [], function () { return jQuery; } );
}

模块化后的调用代码如下:

seajs.config({
    'base':'/script',
    'alias':{
        'jquery':'jquery.sea.js'
    }
});

seajs.use(['jquery'],function($){
    console.log($);
});

模块化jQuery插件

1、普通插件

(function($){
    $.sayHello = function(){
        console.log("Hello");
    };
})(jQuery)

一般模块化代码像下面这样:

/*jquerySayHello.js*/
(function (factory) {
    if (typeof define === 'function') {
        // 如果define已被定义,模块化代码
        define('jquerySayHello',['jquery'], function(){
            // 返回构造函数
            return factory
        });
    } else {
        // 如果define没有被定义,正常执行插件代码
        factory(jQuery);
    }
}(function ($) {
    // 这里才是插件真正的构造函数
    console.log('init'); // 注意这行代码
    $.sayHello = function(){
        console.log("Hello");
    };
}));

使用插件的代码如下:

seajs.config({
    'base':'/script',
    'alias':{
        'jquery':'jquery.sea.js',
        'jquerySayHello':'jquery.sayHello.sea.js'
    }
});

seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
    jquerySayHello($); // 初始化插件
    $.sayHello();
});

seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
    jquerySayHello($); // 初始化插件
    $.sayHello();
});

注意我在插件构造函数里面写的console.log('init');这段代码,可以看到,如果我请求两次插件,插件就要初始化两次。这个虽然可以让代码只在使用时才执行,减少了资源消耗,但如果一个页面中多处需要这个插件的话,就要执行很多次。如果改成下面这种,直接在本模块里就执行:
使用插件的代码如下:

(function (factory) {
    if (typeof define === 'function') {
    // 如果define已被定义,模块化代码
    define('jquerySayHello',['jquery'], function(require,exports,moudles){
        factory(require('jquery')); // 初始化插件
        return jQuery; // 返回jQuery
    });
} else {
    // 如果define没有被定义,正常执行jQuery
    factory(jQuery);
}
}(function ($) {
    console.log('init');
    $.sayHello = function(){
        console.log("Hello");
    };
}));

使用插件的代码如下

seajs.config({
    'base':'/script',
    'alias':{
        'jquery':'jquery.sea.js',
        'jquerySayHello':'jquery.sayHello.sea.js'
    }
});

seajs.use(['jquery','jquerySayHello'],function($){
    $.sayHello();
});

seajs.use(['jquery','jquerySayHello'],function($){
    $.sayHello();
});

2、把jquery插件作为一个函数返回

jquery插件作为一个函数返回,带一个jquery参数,由调用者完成插件的初始化。以jquery-themeswitch.js插件为例子,该插件依赖jquery.cookie.js插件。

/* jquery-themeswitch.js */
define(function(require) { 

  return function(jQuery) {

      //先初始化依赖的模块
      require('./jquery.cookie')(jQuery);   

     //put plugin code here

  }//end of function

});

jquery模块化后调用方式(下面的demo对模块的引用采用相对路径,实际的业务开发中可以通过seajs提供的alias来重命名)
(1)模块内部使用

var $ = require('./libs/jquery');
   require('./libs/jquery-themeswitch')($);
   require('./libs/jquery-ui')($);         //demo涉及jquery ui组件
   $(document).ready(function(){          //在DOM加载完成时运行代码
       $('#elem').themeswitcher();
   });

(2)在script代码片段中

seajs.use(['./libs/jquery','./libs/jquery-themeswitcher', './lib/jquery-ui'],function ($, themeswitcher,jqueryui){
        themeswitcher($);               //init jquery plugin     
        jqueryui($);
        $(function(){                   //dom ready调用的另外一种方式
            $('#elem').themeswitcher()
        });

   });

优缺点对比:

优点:
1、依赖管理自动化
2、支持多个版本的jQuery使用。(需要这个优点吗?)

缺点:
1、每次调用一次require('plugin')($),会重新初始化一次插件
2、调用方式也不是很方便,调用代码不是很直观

3、让每个jquery插件模块返回$

假定我们去掉jquery多版本的支持,让每个jquery插件模块返回$,看看代码调用方式是否会更自然一些。另外每个模块只能被编译一次,利用该特性,我们还可以做到让每个插件只会被初始化一次。
还以themeswitcher为例子:

/*jquery-theme-switcher.js*/
define(function (require, exports, module) {
    var jQuery  = require('./jquery');
    require('./jquery-cookie');
    //put plugin in code here
    return jQuery;

});

(1)模块内部使用

require('./libs/jquery-ui');   //可以不处理返回值    
   var $ = require('./libs/jquery-themeswitch')  //返回的还是$
    $(function(){
        $('#elem').themeswitcher();
    });

(2)在script代码片段中

seajs.use(['./libs/jquery-themeswitcher', './lib/jquery-ui'],function ($){
        $(function(){
            $('#elem').themeswitcher()
        });
   });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值