zoukankan      html  css  js  c++  java
  • 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
    
    });
  • 相关阅读:
    python中的__init__方法
    hosts文件是做什么的
    自动化测试--环境搭建python+pytest+selenium
    什么是Netty服务器
    Java 基础原理一
    Python MongoDB 基本操作
    Mysql 数据库的查询操作
    Git 笔记二
    Git 使用笔记
    最全正则表达式
  • 原文地址:https://www.cnblogs.com/gaowx/p/4837295.html
Copyright © 2011-2022 走看看