使用requireJS的shim参数，完成jquery插件的加载
来源：程序员人生 发布时间：2014-11-18 08:10:04 阅读次数：2938次
没有requireJS框架之前，如果我们想使用http://www.wfuyu.com/jquery/框架，会在HTML页面中通过<script>标签加载，这个时候http://www.wfuyu.com/jquery/框架生玉成局变量$和jQuery等全局变量。如果项目中援用了requireJS框架，采取模块化的方式加载http://www.wfuyu.com/jquery/，那末http://www.wfuyu.com/jquery/不会再添加全局变量$和jQuery。现在问题来了，虽然http://www.wfuyu.com/jquery/框架已开始支持AMD规范，但是http://www.wfuyu.com/jquery/的众多插件还是不支持AMD，依然像之前1样需要使用全局变量$。http://www.wfuyu.com/jquery/插件大多都是以下结构：
(function( $, undefined ) {
})( jQuery );
如果我们项目中使用了http://www.wfuyu.com/jquery/插件，但是http://www.wfuyu.com/jquery/框架是通过requireJS加载的（不会添加全局变量$），那怎样完成http://www.wfuyu.com/jquery/插件的加载呢？使用传统的方，在HTML页面中通过<script>加载http://www.wfuyu.com/jquery/插件，肯定是不行的。这个时候我们需要使用到
requireJS的shim参数，来完成http://www.wfuyu.com/jquery/插件的加载。下面我们以加载http://www.wfuyu.com/jquery/-ui的slider插件为例：
requirejs.config({
shim: {
'http://www.wfuyu.com/jquery/.ui.core': ['http://www.wfuyu.com/jquery/'],
'http://www.wfuyu.com/jquery/.ui.widget': ['http://www.wfuyu.com/jquery/'],
'http://www.wfuyu.com/jquery/.ui.mouse': ['http://www.wfuyu.com/jquery/'],
'http://www.wfuyu.com/jquery/.ui.slider':['http://www.wfuyu.com/jquery/']
},
paths : {
http://www.wfuyu.com/jquery/ : 'http://www.wfuyu.com/jquery/⑵.1.1/http://www.wfuyu.com/jquery/',
domReady : 'require⑵.1.11/domReady',
'http://www.wfuyu.com/jquery/.ui.core' : 'http://www.wfuyu.com/jquery/-ui⑴.10.4/development-bundle/ui/http://www.wfuyu.com/jquery/.ui.core',
'http://www.wfuyu.com/jquery/.ui.widget' : 'http://www.wfuyu.com/jquery/-ui⑴.10.4/development-bundle/ui/http://www.wfuyu.com/jquery/.ui.widget',
'http://www.wfuyu.com/jquery/.ui.mouse' : 'http://www.wfuyu.com/jquery/-ui⑴.10.4/development-bundle/ui/http://www.wfuyu.com/jquery/.ui.mouse',
'http://www.wfuyu.com/jquery/.ui.slider' : 'http://www.wfuyu.com/jquery/-ui⑴.10.4/development-bundle/ui/http://www.wfuyu.com/jquery/.ui.slider'
}
});
require([ 'http://www.wfuyu.com/jquery/', 'domReady','http://www.wfuyu.com/jquery/.ui.core','http://www.wfuyu.com/jquery/.ui.widget','http://www.wfuyu.com/jquery/.ui.mouse','http://www.wfuyu.com/jquery/.ui.slider'],
function($) {
$("#slider" ).slider({
value:0,
min: 0,
max: 4,
step: 1,
slide: function( event, ui ) {}
});
});
在path参数中，我们设置了模块名称(可以随便指定)和js文件路径的映照，然后在shim参数中，指定了模块名称和它的依赖数组，上面我们的http://www.wfuyu.com/jquery/插件只依赖于http://www.wfuyu.com/jquery/框架。通过这类方式，就能够使用requireJS完成http://www.wfuyu.com/jquery/和其插件的加载，不会有全局变量污染问题。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
