文档章节

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

brivio
 brivio
发布于 2014/03/15 23:15
字数 843
阅读 7132
收藏 3

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

});


© 著作权归作者所有

共有 人打赏支持
brivio
粉丝 5
博文 34
码字总数 28018
作品 0
杭州
程序员
私信 提问
seajs初尝 加载jquery返回null解决学习日志

今天早上初尝seajs,发现一个非常蛋疼的事情,使用官方demo中的jquery是没有问题, 下载官方最新版jquery 2.1.1发现console.log($)返回null,百思不得其解!只能求助度娘! 在GitHub发现了玉...

尐桀
2014/10/31
0
1
使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScrip...

green001
2014/04/01
0
2
使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScrip...

i33
2013/03/15
0
0
seajs如何整合jquery

转自:http://www.tuicool.com/articles/bmuaEb 今天早上初尝seajs,发现一个非常蛋疼的事情,使用官方demo中的jquery是没有问题, 下载官方最新版jquery 2.1.1发现console.log($)返回null,...

风一样的世界
2015/01/28
0
0
sea.js最佳实践一基础框架搭建

我是个比较懒的人,基本不怎么写东西,表达也不是很好。最近辞职在家,闲得有点慌,觉得还是写点东西比较好。之前工作中用到了一个js模块加载器,觉得相当不错。今天就写点关于sea.js的东西。...

何吕
2013/06/17
0
7

没有更多内容

加载失败,请刷新页面

加载更多

Java12的新特性

Java语言特性系列 Java5的新特性 Java6的新特性 Java7的新特性 Java8的新特性 Java9的新特性 Java10的新特性 Java11的新特性 Java12的新特性 Java13的新特性 序 本文主要讲述一下Java12的新特...

go4it
10分钟前
1
0
深入解密比Guava Cache更优秀的缓存-Caffeine

1.前言 读这篇文章之前希望你能好好的阅读: 你应该知道的缓存进化史 和 如何优雅的设计和使用缓存? 。这两篇文章主要从一些实战上面去介绍如何去使用缓存。在这两篇文章中我都比较推荐Caffe...

咖啡拿铁的技术分享
12分钟前
1
0
Java B2B2C多用户商城 springcloud架构 --Eureka服务器搭建及配置

第一步,创建一个普通的springboot项目 以下方法都可以快速创建一个boot项目: 1. 浏览器访问http://start.spring.io/,填写信息,下载zip包,加压到你的ide的工作空间直接使用。 2. 使用ide...

明理萝
24分钟前
0
1
为什么阿里巴巴禁止在 foreach 循环里进行元素的 remove/add 操作

· Oracle 撒手,宣布对个人用户 (Personal Users) , Java 8 官方支持时间持续到 2020 年 12 月;对商业用户(Commercial Users),2019 年 1 月之后不再提供免费更新。 · 红帽喊话,计划在...

Java填坑路
26分钟前
0
0
在 Ali Kubernetes 系统中,我们这样实践混沌工程

在传统的软件测试中,我们通常通过一个给定的条件来判断系统的反馈,通过断言来判断是否符合预期,测试条件和结果通常比较明确和固定。而混沌工程,是通过注入一些“不确定”因素,象放进了一...

阿里云官方博客
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部