requireJS中的shim——以加載jQuery插件為例

    沒有requireJS框架之前，如果我們想使用jquery框架，會在HTML頁面中通過<script>標簽加載，這個時候jquery框架生成全局變量$和jQuery等全局變量。如果項目中引用了requireJS框架，采用模塊化的方式加載jquery，那么jquery不會再添加全局變量$和 jQuery 。現在問題來了，雖然jquery框架已經開始支持AMD規范，但是jquery的眾多插件還是不支持AMD，仍然像以前一樣需要使用全局變量$。jquery插件大多都是如下結構：

(function( $, undefined ) {

})( jQuery );

    如果我們項目中使用了jquery插件，但是jquery框架是通過requireJS加載的（不會添加全局變量$），那怎么完成jquery插件的加載呢？使用傳統的方，在HTML頁面中通過<script>加載jquery插件，肯定是不行的。這個時候我們需要使用到

requireJS的shim參數，來完成jquery插件的加載。下面我們以加載jquery-ui的slider插件為例：

requirejs.config({
  shim: {
  'jquery.ui.core': ['jquery'],
  'jquery.ui.widget': ['jquery'],
  'jquery.ui.mouse': ['jquery'],
  'jquery.ui.slider':['jquery']
    },
  paths : {
    jquery : 'jquery-2.1.1/jquery',
    domReady : 'require-2.1.11/domReady',
    'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',
    'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',
    'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',
    'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider'
  }
});


    
require([ 'jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'],
    function($) {
      
      $("#slider" ).slider({
           value:0,
           min: 0,
           max: 4,
           step: 1,
           slide: function( event, ui ) {}	   
      });		
                
    });

　　在path參數中，我們設置了模塊名稱(可以隨意指定)和js文件路徑的映射，然后在shim參數中，指定了模塊名稱和它的依賴數組，上面我們的jquery插件只依賴於jquery框架。通過這種方式，就可以使用requireJS完成jquery和其插件的加載，不會有全局變量污染問題。