requirejs 關於shim的使用方式

一直在搞移動開發，好久沒寫過有關javaScript的文章了，最近公司開發了本身的web框架，用到了requirejs，以前用過，藉此複習一下，特別是依賴問題。

requirejs具備如下是異步加載，固然已經加載的不會再次加載，這是很是好的一種優化。固然，咱們這裏來看看shim的做用。

1. 導出非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']
		}
	}
});

想到這裏，有問題之後再補充。