requireJS 簡要介紹和完整例子

阿新 • • 發佈：2019-01-12

從事前端開發工作的大概都有所耳聞 requireJS 這個框架，以前都是使用而已沒時間寫一些記錄，今天有空就寫一下，順便寫個例子；

什麼是 requireJS ？

requireJS 是用JavaScript編寫的JS框架，主要功能是可以按不同的先後依賴關係對 JavaScript 等檔案的進行載入工作，可簡單理解為JS檔案的載入器，它非常適合在瀏覽器中使用，它可以確保所依賴的JS檔案載入完成之後再載入當前的JS檔案，這在大量使用JS檔案的專案中可確保各個JS檔案的先後載入順序，確保避免了以前因某些原因某個檔案載入慢而導致其它載入快的檔案需要依賴其某些功能而出現某函式或某變數找不到的問題，這點非常有用，也是 requireJS 的主要價值所在吧；

快速簡要了解要點：

1,require會定義三個變數：define,require,requirejs，其中require ===requirejs，一般使用require更簡短,頁面載入同時不阻塞渲染;
2,define(function(){...}); 從名字就可以看出這個api是用來定義一個模組;
3,require(['aModule','bModule'],function(a,b){...}) 載入依賴模組，並執行載入完後的回撥函式;
4,在使用requirejs時，載入模組時不用寫.js字尾，當然也是不能寫字尾;
5,require.config({...}) 是用來配置模組載入位置和設定基本路徑等;
6,載入requirejs指令碼的script標籤加入了data-main

屬性，這屬性指定在載入完reuqire.js後，就用requireJS載入該屬性值指定路徑下的JS檔案並執行，所以一般該JS檔案稱為主JS檔案，類似C或Java語言中main函式的功能，然後把require.config的配置加該主檔案後可使每一個頁面都使用這個配置，然後頁面中就可直接使用require來載入所有的短模組名即可，這樣即可在一個地方配置所有地方使用，同時模組別名的使用和管理也都比較方便；例如： < script data-main="js/main" src="js/require.js">< /script>
7,當script標籤指定data-main屬性時，require會預設的將data-main指定的js為根路徑

;
8,require載入的模組一般都需要符合AMD規範,即使用define來申明模組;
9,載入非AMD規範的js，這時候就需要用到另一個功能：shim; 例如：

require.config({
    paths:{
    	"underscore":"http://www.xxx.com/xpath/xFile.js"
    }
    ,shim: {
        "underscore" : {
            exports : "_";
        }
    }
});

好了，簡要介紹就到這。

下面看一個實際例子

這個例子的設計要求是 workjs01.js 檔案依賴 jquery, workjs02.js 依賴 workjs01.js，只有等依賴檔案載入完了，最後在頁面打出提示資訊，

1，首先看例子檔案目錄結構：

//-------------------------------------------------
userExample01
    |---- *.html //html頁面
    |----scripts    
    |       |---- *.js //main.js, require.js等
            |----lib   //各個第三方框架
            |     |----jquery
            |            |---- *.js
            |----work  //各個業務工作JS檔案
                   |---- *.js

//-------------------------------------------------

2，HTML 檔案 index.html 注意看 requireJS 載入方式之一，見 script 標籤，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>requireJS</title>
<style type="text/css">
*{font-family:"微軟雅黑","microsoft Yahei",verdana;}
.text01{line-height:20px;font-size:13px;font-family:verdana;}
pre{margin:0px;padding:2px 0px;font-size:13px;font-family:verdana;}
.div01{border:1px solid red;text-align:left;padding:5px;
}
</style>
</head>

<body>
<h4>requireJS 例子 example 01</h4>
<div id="loadMsgCon" class="div01"></div>
<script data-main="scripts/main" src="scripts/require_v2.1.11.js"></script> <!--注意 requireJS 檔案對應即可,同時data-main屬性值寫對即可-->
</body>
</html>

2，主檔案 main.js 一般用這個進行主檔案，進行各個檔案按一定先後完成各個檔案的載入；推薦注意檔案個註釋說明和書寫格式，方便養成良好習慣和程式碼規範；

//1，about require js config//配置資訊
;
require.config({
	//define all js file path base on this base path
	//actually this can setting same to data-main attribute in script tag
	//定義所有JS檔案的基本路徑,實際這可跟script標籤的data-main有相同的根路徑
	baseUrl:"./scripts" 

	//define each js frame path, not need to add .js suffix name
	//定義各個JS框架路徑名,不用加字尾 .js
	,paths:{ 
		"jquery":["http://libs.baidu.com/jquery/2.0.3/jquery", "lib/jquery/jquery-1.9.1.min"] //把對應的 jquery 這裡寫對即可
		,"workjs01":"work/workjs01" 
		,"workjs02":"work/workjs02"
		,"underscore":"" //路徑未提供，可網上搜索然後加上即可
	}
	
	//include NOT AMD specification js frame code
	//包含其它非AMD規範的JS框架
	,shim:{ 
		"underscore":{
			"exports":"_"
		}
	}
	
});

//2，about load each js code basing on different dependency
//按不同先後的依賴關係載入各個JS檔案
require(["jquery","workjs01"],function($,w1){
	require(['workjs02']);
});

3，業務檔案之一， workjs01.js 注意語法看看模組是怎麼寫的，推薦注意檔案各個註釋說明和書寫格式，方便養成良好習慣和程式碼規範

define(['jquery'],function($){  //注意模組的寫法
	//1,define intenal variable area//變數定義區
	var myModule = {}; //推薦方式
	var moduleName = "work module 01";
	var version = "1.0.0";
	
	//2,define intenal funciton area//函式定義區
	var loadTip = function(tipMsg, refConId){
		var tipMsg = tipMsg || "module is loaded finish.";
		if(undefined === refConId || null === refConId || "" === refConId+""){
			alert(tipMsg);
		}else{
			$('#' + (refConId+"")).html(tipMsg);
		}
	};
	
	//3,should be return/output a object[exports/API] if other module need
	//如有需要暴露(返回)本模組API(相關定義的變數和函式)給外部其它模組使用
	myModule.moduleName = moduleName;
	myModule.version = version;
	myModule.loadTip = loadTip;	
	return myModule;
	
	/*
	//this is same to four line code upper//跟上面四行一樣
	return {
		"moduleName":"work module 01"
		,"version":"1.0.0"
		,loadTip:loadTip
	};
	*/
	
});

4，業務檔案之一， workjs02.js 推薦注意檔案個註釋說明和書寫格式，方便養成良好習慣和程式碼規範；

define(['workjs01'],function(w01){
	//1,define intenal variable area//變數定義區
	var moduleName = "work module 02";
	var moduleVersion = "1.0.0";
	
	//2,define intenal funciton area//函式定義區
	var setHtml = function(refId,strHtml){
		if(undefined === refConId || null === refConId || "" === refConId+""){
			return;
		}else{
			$('#' + (refId + "")).html(strHtml+"");
		}
	};
	
	//3,auto run when js file is loaded finish
	//在JS載入完,可在本模組尾部[return之前]執行某函式,即完成自動執行
	w01.loadTip("本頁檔案都載入完成，本頁設計 workjs01.js 檔案依賴jquery, workjs02.js 依賴 workjs01.js","loadMsgCon");
	
	//4,should be return/output a object[exports/API]
	//如有需要暴露(返回)本模組API(相關定義的變數和函式)給外部其它模組使用
	return {
		"moduleName":moduleName
		,"version": moduleVersion
	}
	
});

注意，對應的 requireJS 和 jquery 這裡沒有給出，到對應的網上或官網下載放到對應目錄，注意修改檔名對應即可，參見對應地方的註釋；

好了，例子介紹到這就完了，還算簡單吧？呵呵，我把這個例子完整打包上傳到我的空間，歡迎點選這裡下載，拍磚討論...

值得注意的是本例雖然簡單，但是基本包含了實際大部分 requireJS 知識點，註釋也非常清楚，同時注意檔案的組織結構，requireJS的配置的定義，呼叫關係，模組的寫法，模組內部的寫法，依賴檔案的載入和呼叫，以及模組如何自動執行某個函式等等。可能部分有疏漏,，拍磚討論...

requireJS 簡要介紹和完整例子

requireJS 簡要介紹和完整例子

seaJS 簡要介紹和完整例子

轉Android進程間通信（IPC）機制Binder簡要介紹和學習計劃

遞歸的簡要介紹和理解

linux中關於文件系統的簡要介紹和一般操作

Android系統匿名共享記憶體Ashmem（Anonymous Shared Memory）簡要介紹和學習計劃

Android WebView簡要介紹和學習計劃

Android應用程式的Activity啟動過程簡要介紹和學習計劃

Dalvik虛擬機器垃圾收集機制簡要介紹和學習計劃

Android之A面試題②Activity啟動過程簡要介紹和學習計劃

Android程序間通訊（IPC）機制Binder簡要介紹和學習計劃

Socket.IO for Unity 簡要介紹和簡單應用

Chromium網頁載入過程簡要介紹和學習計劃

老羅的Android之旅——Android應用程式的Activity啟動過程簡要介紹和學習計劃

Android視窗管理服務WindowManagerService的簡要介紹和學習計劃

Android應用程式視窗（Activity）實現框架簡要介紹和學習計劃

(一)關於spring security的簡要介紹以及相關配置和jar包認識

OPENCV SVM介紹和自帶例子

Nginx 之 Nginx安裝和配置文件簡要介紹

spring boot入門 -- 介紹和第一個例子

requireJS 簡要介紹和完整例子

相關推薦