SeaJS中jQuery插件模块化及其调用方式

转载自:http://my.oschina.net/briviowang/blog/208587#OSC_h3_1

jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。 
JQuery的这种扩展机制同模块化要求模块的独立性,以及模块互相隔离有点冲突。

jQuery插件数目众多,我们不打算做大量的转换工作,为模块化而模块化,甚至改变插件的调用方式, 
这样对开发带来的价值不大。只希望通过模块加载器实现自动的依赖管理,按需加载,并且使用方式自然。

1.常见的jQuery插件的模块化方式

把jquery插件作为一个函数返回,带一个jquery参数,由调用者完成插件的初始化。

以jquery-themeswitch插件为例子,该插件依赖jquery.cookie插件。

/* jquery-themeswitch.js */

define(function(require) { 

  return function(jQuery) {

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

     //put plugin code here

  }//end of function

});

2.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()
            ...

        });

   });

优缺点对比:

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

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

提示:可以在jQuery中添加一个cachedPlugins对象来保存加载过的插件模块id来防止重复加载

3.另外一种插件模块化方式

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

说明:模块编译过程就是构建模块的exports的过程。

还以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()
            ...

        });

   });

4.简化jquery插件的引用

如果你使用的插件比较多,还可以通过这样的方式来简化jquery插件的引用。 
定义一个myjquery.js

define(function(require) {

    require(‘some-plugin1‘);  //会自动加载相关的依赖插件
    require(‘some-plugin2‘);  //如果记不清依赖关系,重复require也没有影响。
    require(‘some-plugin3‘);  

    return require(‘some-plugin‘);  //每个插件模块都会返回$,取最后一个返回就可以了。

});

在其他的业务代码中,你只需要引入自己定制好的myjquery.js即可。 
注意不要在该文件中引入过多的模块,避免影响性能,其他不常用的插件可以按需加载。

main.js

define(function(require) {

   var $ =  require(‘./myjquery‘);  //所有你定制加载的插件都已经初始化好了

   //do something

});

SeaJS中jQuery插件模块化及其调用方式

发表于2年前(2014-03-15 23:15)   阅读(2173) | 评论(0) 2人收藏此文章, 我要收藏

赞0

[听云 Python探针公测]送瑞士军刀背包 送雷蛇键鼠套装!  


目录[-]

jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。 
JQuery的这种扩展机制同模块化要求模块的独立性,以及模块互相隔离有点冲突。

jQuery插件数目众多,我们不打算做大量的转换工作,为模块化而模块化,甚至改变插件的调用方式, 
这样对开发带来的价值不大。只希望通过模块加载器实现自动的依赖管理,按需加载,并且使用方式自然。

1.常见的jQuery插件的模块化方式

把jquery插件作为一个函数返回,带一个jquery参数,由调用者完成插件的初始化。

以jquery-themeswitch插件为例子,该插件依赖jquery.cookie插件。

/* jquery-themeswitch.js */

define(function(require) { 

  return function(jQuery) {

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

     //put plugin code here

  }//end of function

});

2.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()
            ...

        });

   });

优缺点对比:

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

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

提示:可以在jQuery中添加一个cachedPlugins对象来保存加载过的插件模块id来防止重复加载

3.另外一种插件模块化方式

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

说明:模块编译过程就是构建模块的exports的过程。

还以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()
            ...

        });

   });

4.简化jquery插件的引用

如果你使用的插件比较多,还可以通过这样的方式来简化jquery插件的引用。 
定义一个myjquery.js

define(function(require) {

    require(‘some-plugin1‘);  //会自动加载相关的依赖插件
    require(‘some-plugin2‘);  //如果记不清依赖关系,重复require也没有影响。
    require(‘some-plugin3‘);  

    return require(‘some-plugin‘);  //每个插件模块都会返回$,取最后一个返回就可以了。

});

在其他的业务代码中,你只需要引入自己定制好的myjquery.js即可。 
注意不要在该文件中引入过多的模块,避免影响性能,其他不常用的插件可以按需加载。

main.js

define(function(require) {

   var $ =  require(‘./myjquery‘);  //所有你定制加载的插件都已经初始化好了

   //do something

});
时间: 2024-10-21 14:57:19

SeaJS中jQuery插件模块化及其调用方式的相关文章

seajs 使用 jquery插件

define(function(require,exports,moudles){ return function(jquery){ (function($) { $.fn.pri= function() { alert($("a").attr("href")) // 代码区域.}; })(jquery); } })jquery库在总js文件(调用该插件的文件)中加载.通过require("t1/jquery_pligun")($)来传递jque

CocosCreator 中 JS 与 Java 互相调用方式和注意事项

JS 调用 Java 方法在 CocosCreator 下 JS 调用 Java/Objective-C 的格式都是: var o = jsb.reflection.callStaticMethod(className, methodName, methodSignature, parameters...)JS 只能调用 Java 中的静态方法,需要传入类名.方法名.方法签名.方法参数,并且可以获得返回值. 类名类名必须是包含 Java 包路径的完整类名,而且用斜线 / 代替点 . ,例如 co

jQuery中开发插件的两种方式(附Demo)

做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展的插件 类扩展的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关

项目中jquery插件ztree使用记录

最近公司要求做一个关于后台的管理系统.在这个mvvm模式横行的年代,虽然这里用jquery做项目可能有点不符合时代的潮流,但是管他呢,能做出来先在说呗(公司以后要改用angular或者vue来统一前端的制作方式),个人觉得jquery还挺好用的.废话这里就不多叙述了.下面就先来一张完成后的图片展示一下ztree可以完成的功能. 额····这边弹出层的阴影是录制软件的问题(这边的前端插件用的是layui,想用的小伙伴可以自行百度layui,顺便一提,我这里用的版本是layui 1.0的,现在lay

seajs 包装 jquery 插件

包装jquery 插件 define(function (require, exports, moudles) { return function($){插件内容}; }) 使用: seajs.use(['ajaxForm'], function (aj) { aj($);//注册到jquery对象 });

【JS】Js中函数的三种调用方式

在同一个页面中,函数名必须是唯一的,并且区分大小写.Js中可以通过下面三种方式调用函数: 1. 函数的简单调用 2. 在事件的响应中调用函数 3. 通过连接调用函数 具体是怎么操作的呢,下面一一讲解: 函数的简单调用:函数的定义语句通畅被放在HTML文件的<head>内,而函数的调用语句通常被放在<body>中.如果函数定义之前调用函数,执行将会出错. 语法如下: <head> <script type="text/javascript">

【Eclipse使用方法】Eclipse中安装插件的三种方式

Eclipse也用了很久,但是都没有怎么去研究过怎么安装插件,今天正好在自己新买的本上试了一下.现在将心得写下,以供参考.目前安装Eclipse插件主要有以下三种方式: 在线安装: 以TestNG的安装为例来阐述其安装过程. 第一步:点击菜单栏中“Help”菜单,在下拉列中选择“Install New Software...”.此时会弹出“install”的安装框. 第二步:在弹出的“install”框,选择之前已经建立好的site,如果没有建立好,则可以点击“Add”按钮,弹出一个添加site

Javascript中函数的四种调用方式

一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属性:arguments和this. arguments主要是用来保存函数参数,arguments中的callee属性主要是用来指向拥有当前arguments的函数(理解Javascript参数中的arguments对象). 3.在ECMAScript5中规范了另一个函数属性:caller(Opera

类中方法的两种调用方式

class Foo(object): def func(self, name): print(name) # 第一种,通过实例对象调用func方法 foo = Foo() foo.func('allin') # 第二种,通过类名调用func方法 foo = Foo() Foo.func(foo, 'allin') # 两种方法等价 原文地址:https://www.cnblogs.com/xiangxiaolin/p/11185078.html