requirejs 关于shim的使用方式

一直在搞移动开发，很久没写过有关javaScript的文章了，最近公司开发了自己的web框架，用到了requirejs，之前用过，借此复习一下，特别是依赖问题。

requirejs具有以下是异步加载，当然已经加载的不会再次加载，这是非常好的一种优化。当然，我们这里来看看shim的作用。

导出非AMD模块化函数（模块化）

hello.js

function sayHello(name)
{
  alert('Hi '+name);
}

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    hello: 'hello'  //相对于baseUrl的方式导入hello.js ,并且给一个别名
  },
  shim: {
    hello: { exports: 'sayHello' } //因为是一个函数，使用export即可
  }
});

requirejs(['hello'], function(hello) { //function参数接收导出的函数名,实际是sayHello函数
  hello();
});

导出一个函数，意味着什么？意味着我们得到了一个javaScript类，所以已经满足了绝大多数需求。

但是有一个问题，在app.js中写了很多function，整合成一个function有点费劲，想直接导出如何做？

办法如下：

hello.js

function sayHi(name)
{
  alert('Hi '+name);
}
function sayHello(name)
{
  alert('Hiello  '+name);
}

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    hello: 'hello'
  },
  shim: {
    hello: {
      init: function() {        //这里使用init将2个
       return {
          sayHi: sayHi,
          sayHello: sayHello
        }
      }
    }
  }
});

requirejs(['hello'], function(hello) {
  hello.sayHi('zhangsan');
  hello.sayHello('lisi');
});

当然，我们也可以导出jQuery

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    myjquery: 'lib/jquery/jquery'//在jQuery路径一个别名
  },
  shim: {
    myjquery: { exports: 'jQuery' }  //表示要导出js中的的myjquery中实际对象是jQuery
  }
});

requirejs(['myjquery'], function(jq) {
  alert(jq);
});

解决jQuery操作符$冲突问题

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    myjquery: 'lib/jquery/jquery' //使用
  },
  shim: {
    myjquery: {
      init: function() {        
          return jQuery.noConflict(true);
          }
      }
    }
  }
});
requirejs(['myjquery'], function(jq) {
  alert($);
});

2.依赖有序导入

requirejs.config({  
    shim: {  
    'jquery.ui.core': ['jquery'],  //表示在jQuery导入之后导入，表示此模块依赖于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' 
        }
});    

requirejs(['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 ) {}	   
      });		
 });

当然，下面的例子更直观


require.config({
	baseUrl: 'resource/js/app',
	urlArgs: "v=" +  (new Date()).getHours(),
	paths: {
		'map': 'http://api.map.baidu.com/getscript?v=2.0&ak=F51571495f717ff1194de02366bb8da9&services=&t=20140530104353',
		'css': '../../../../web/resource/js/lib/css.min',
		'jquery': '../../../../web/resource/js/lib/jquery-1.11.1.min',
		'angular': '../../../../web/resource/js/lib/angular.min',
		'bootstrap': '../../../../web/resource/js/lib/bootstrap.min',
		'underscore': '../../../../web/resource/js/lib/underscore-min',
		'moment': '../../../../web/resource/js/lib/moment',
		'filestyle': '../../../../web/resource/js/lib/bootstrap-filestyle.min',
		'daterangepicker': '../../components/daterangepicker/daterangepicker',
		'datetimepicker': '../../components/datetimepicker/bootstrap-datetimepicker.min',
		'webuploader' : '../../../../web/resource/components/webuploader/webuploader.min',
		'jquery.jplayer': '../../../../web/resource/components/jplayer/jquery.jplayer.min',
		'hammer': '../lib/hammer.min',
		'iscroll': '../lib/iscroll-lite',
		'swiper': '../../components/swiper/swiper.min',
		'calendar': '../lib/calendar',
		'jquery.qrcode': '../../../../web/resource/js/lib/jquery.qrcode.min'
	},
	shim:{
		'angular': {
			exports: 'angular',
			deps: ['jquery']
		},
		'bootstrap': {
			exports: "$",
			deps: ['jquery']
		},
		'iscroll': {
			exports: "IScroll"
		},
		'filestyle': {
			exports: '$',
			deps: ['bootstrap']
		},
		'daterangepicker': {
			exports: '$',
			deps: ['bootstrap', 'moment', 'css!../../components/daterangepicker/daterangepicker.css']
		},
		'datetimepicker': {
			exports: '$',
			deps: ['bootstrap', 'css!../../components/datetimepicker/bootstrap-datetimepicker.min.css']
		},
		'map': {
			exports: 'BMap'
		},
		'webuploader': {
			deps: ['jquery', 'css!../../../../web/resource/components/webuploader/webuploader.css', 'css!../../../../web/resource/components/webuploader/style.css']
		},
		'jquery.jplayer': {
			exports: "$",
			deps: ['jquery']
		},
		'calendar': {
			exports: "$",  //表示以jQuery对象‘’合并‘’的方式导入
			deps: ['jquery']
		},
		'jquery.qrcode': {
			exports: "$",
			deps: ['jquery']
		}
	}
});

想到这里，有问题以后再补充。

来源：oschina

链接：https://my.oschina.net/u/2256215/blog/668548

标签

jquery

require