注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

jQuery 插件的模块化  

2011-05-19 22:10:45|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
来源:射雕

jQuery 插件非常丰富。在传统使用方式里,比如 jquery-fancybox, 我们需要在页面中显式引入:

1<script src="/js/jquery.min.js"></script>
2<script src="/js/jquery.easing-1.3.pack.js"></script>
3<script src="/js/jquery.mousewheel-3.0.4.pack.js"></script>
4<script src="/js/jquery.fancybox-1.3.4.js"></script>
5<link rel="stylesheet" href="/js/jquery.fancybox-1.3.4.css"/>

fancybox 依赖 easing 和 mousewheel, 因此还引入了这两个插件文件。当使用的插件越多,依赖关系越复杂时,上面的 script 列表会越难维护。

模块化

我们看下在 seajs 里如何做。

看 demo: FancyBox 1.3.4 | Demonstration

页面源码里,引入的 script 只剩下一处:

1<script src="http://seajs.com/build/sea.js" data-main="./init"></script>


来看 init.js:

1/* init.js */
2define(function(require) {
3  var $ = require('jquery');
4  require('./fancybox/jquery.fancybox-1.3.4.js')($);
5 
6  // snip...
7});

init 依赖 jquery 和 fancybox, 因此 require 了这两个模块。

require('./fancybox/jquery.fancybox-1.3.4.js') 返回的是 function, 其代码为:

1/* jquery-fancybox-1.3.4.js */
2define(function(require) { return function($) {
3  require('./jquery.easing.1.3.js')($);
4  require('./jquery.mousewheel.js')($);
5  require('./jquery.fancybox-1.3.4.css');
6 
7  // snip...
8}});

jQuery 插件的机制是往 $ 或 $.fn 上添加插件成员。在 seajs 里,我们可以将插件包装成一个函数。这样,在使用时,传入需要被扩展的 jQuery 实例就好。

对于不依赖其它插件的 jquery 插件,模块化包装就更简单了:

1/* jquery.mousewheel.js */
2define(function() { return function($) {
3  // snip..
4}});

通过这种方式,我们可以将任何 jquery 插件封装成 seajs 的模块!

共享模式

上面的方式可以概括为:

1var $ = require('jquery');
2require('some-jquery-plugin')($);

这是一种共享模式,一旦添加某个插件功能到 jQuery 后,其他模块里,require('jquery') 返回的 jquery 对象会自动拥有已经添加过的插件功能。这种共享模式可以对 jquery 的插件进行集中管理。比如对于具体项目,可以在 init.js 文件里:

1/* init.js */
2define(function(require) {
3  var $ = require('jquery');
4  require('jq-plugin-a')($);
5  require('jq-plugin-b')($);
6  require('jq-plugin-c')($);
7 
8  // snip...
9});

这样,在其它模块中,通过 require('jquery') 就可以得到添加过所需要的所有插件功能的 jquery 对象。

子类模式

当项目很复杂,jquery 插件之间有可能存在冲突。为了尽可能避免冲突,我们可以通过 jQuery 子类来解决:

1var $ = require('jquery').sub();
2require('some-jquery-plugin')($);

通过 sub 方法,每个依赖 jquery 的模块,都可以得到 jQuery 的一个子类。插件往这个子类添加成员,因此各个模块之间的 jquery 是独立的了,彼此不会影响。

延续习惯

无论是共享模式还是子类模式,都不会破坏插件本身的使用方式,原来是怎么调用的,现在依旧怎么用。唯一不同的是引入方式。模块化之前,我们需要手动引入 script 标签来解决;模块化之后,我们通过 require 来管理加载和依赖。

小结

通过这种包装,我们就可以在 seajs 里使用任何 jquery 插件了,并且通过 snode, 还可以让 jquery 的插件在 node 环境中运行。

一切就这么简单。看起来没什么变化,但变化就在其中! 

  评论这张
 
阅读(4992)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017