使用requireJS的shim參數，完成jquery插件的加載
來源：程序員人生 發布時間：2014-11-18 08:10:04 閱讀次數：3133次
沒有requireJS框架之前，如果我們想使用http://www.jyygyx.com/jquery/框架，會在HTML頁面中通過<script>標簽加載，這個時候http://www.jyygyx.com/jquery/框架生玉成局變量$和jQuery等全局變量。如果項目中援用了requireJS框架，采取模塊化的方式加載http://www.jyygyx.com/jquery/，那末http://www.jyygyx.com/jquery/不會再添加全局變量$和jQuery。現在問題來了，雖然http://www.jyygyx.com/jquery/框架已開始支持AMD規范，但是http://www.jyygyx.com/jquery/的眾多插件還是不支持AMD，依然像之前1樣需要使用全局變量$。http://www.jyygyx.com/jquery/插件大多都是以下結構：
(function( $, undefined ) {
})( jQuery );
如果我們項目中使用了http://www.jyygyx.com/jquery/插件，但是http://www.jyygyx.com/jquery/框架是通過requireJS加載的（不會添加全局變量$），那怎樣完成http://www.jyygyx.com/jquery/插件的加載呢？使用傳統的方，在HTML頁面中通過<script>加載http://www.jyygyx.com/jquery/插件，肯定是不行的。這個時候我們需要使用到
requireJS的shim參數，來完成http://www.jyygyx.com/jquery/插件的加載。下面我們以加載http://www.jyygyx.com/jquery/-ui的slider插件為例：
requirejs.config({
shim: {
'http://www.jyygyx.com/jquery/.ui.core': ['http://www.jyygyx.com/jquery/'],
'http://www.jyygyx.com/jquery/.ui.widget': ['http://www.jyygyx.com/jquery/'],
'http://www.jyygyx.com/jquery/.ui.mouse': ['http://www.jyygyx.com/jquery/'],
'http://www.jyygyx.com/jquery/.ui.slider':['http://www.jyygyx.com/jquery/']
},
paths : {
http://www.jyygyx.com/jquery/ : 'http://www.jyygyx.com/jquery/⑵.1.1/http://www.jyygyx.com/jquery/',
domReady : 'require⑵.1.11/domReady',
'http://www.jyygyx.com/jquery/.ui.core' : 'http://www.jyygyx.com/jquery/-ui⑴.10.4/development-bundle/ui/http://www.jyygyx.com/jquery/.ui.core',
'http://www.jyygyx.com/jquery/.ui.widget' : 'http://www.jyygyx.com/jquery/-ui⑴.10.4/development-bundle/ui/http://www.jyygyx.com/jquery/.ui.widget',
'http://www.jyygyx.com/jquery/.ui.mouse' : 'http://www.jyygyx.com/jquery/-ui⑴.10.4/development-bundle/ui/http://www.jyygyx.com/jquery/.ui.mouse',
'http://www.jyygyx.com/jquery/.ui.slider' : 'http://www.jyygyx.com/jquery/-ui⑴.10.4/development-bundle/ui/http://www.jyygyx.com/jquery/.ui.slider'
}
});
require([ 'http://www.jyygyx.com/jquery/', 'domReady','http://www.jyygyx.com/jquery/.ui.core','http://www.jyygyx.com/jquery/.ui.widget','http://www.jyygyx.com/jquery/.ui.mouse','http://www.jyygyx.com/jquery/.ui.slider'],
function($) {
$("#slider" ).slider({
value:0,
min: 0,
max: 4,
step: 1,
slide: function( event, ui ) {}
});
});
在path參數中，我們設置了模塊名稱(可以隨便指定)和js文件路徑的映照，然后在shim參數中，指定了模塊名稱和它的依賴數組，上面我們的http://www.jyygyx.com/jquery/插件只依賴于http://www.jyygyx.com/jquery/框架。通過這類方式，就能夠使用requireJS完成http://www.jyygyx.com/jquery/和其插件的加載，不會有全局變量污染問題。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
