使用requireJS的shim參數 解決插件 jquery.ui 等插件問題


沒有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和其插件的加載,不會有 全局變量污染問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM