requirejs中 shim

使用requireJS的shim参数，完成jquery插件的加载

时间 2014-10-31 13:59:10  CSDN博客

原文  http://blog.csdn.net/aitangyong/article/details/40653335

主题 jQueryRequireJS

没有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和其插件的加载，不会有全局变量污染问题

http://www.bubuko.com/infodetail-671521.html 有例子讲解

eps和exports的含义。exports很好理解，就是模块的返回值。main.js中exports的值，一定要与dateUtil.js和stringUtil.js中暴露出的全局变量名称一致。很显然dateUtil.js和stringUtil.js这2个模块的返回值，就是暴露出的全局变量window.DateUtils和window.StringUtils，requireJS框架就是将这些全局变量的值返回，作为模块的返回结果。如果dateUtil.js或stringUtil.js中暴露了多个全局变量，那么exports可以指定其中任何的一个，作为模块的返回结果。不过一般的框架，都只会使用1个全局变量，这样冲突的可能性会减少，毕竟全局变量越少越好。deps是指定所要依赖的其他js模块