转载自: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 });