本篇文章給大家分享的是有關如何正確的使用seajs和requirejs模塊，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
模塊化的起因是傳統的直接引入js方法存在問題：
必須通過全局變量共享模塊，有可能會出現命名沖突的問題；
依賴的文件必須手動地使用標簽引入到頁面中。
下面是seajs和requirejs的簡單案例。
seajs 我用的seajs版本是2.2.3
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>極客學院首頁</title>
</head>
<body>
<button id="testbtn0">測試按鈕0</button>
<button id="testbtn1">測試按鈕1</button>
<script type="text/javascript" src="./js/sea.js"></script>
<script type="text/javascript">
seajs.use('./js/main');
</script>
</body>
</html>main.js文件
define(function(require,exports,module){
//引入兩個js文件
require("test0");
require("test1");
})test0.js
define(function(require,exports,module){
var $$=require("common").$$;
var testbtn0=$$("#testbtn0");
testbtn0.addEventListener("click",function(e){
alert(e.target.innerText);
});
})test1.js
define(function(require, exports, module) {
var $$ = require("common").$$;
var testbtn1 = $$("#testbtn1");
testbtn1.addEventListener("click", function(e) {
alert(e.target.innerText);
});
})coomm.js
define(function(rerquire,exports,module){
/*//第一種導出方案
exports.$$=function(tag){
return document.querySelector(tag);
}*/
//第二種導出方案
module.exports={
$$:function(tag){
return document.querySelector(tag);
},
test:"測試數據"
}
//第三種導出方案
/* return {
$$:function(tag){
return document.querySelector(tag);
},
test:"測試數據"
}*/
})以上是為seajs的，而requirejs的直接就是該一下html文件就可以了，真是哭笑不得啊。才發現二者是通過的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>極客學院首頁</title> </head> <body> <button id="testbtn0">測試按鈕0</button> <button id="testbtn1">測試按鈕1</button> <script type="text/javascript" data-main="./js/main" src="./js/require.js"></script> </body> </html>
關于導出接口有三種，分別是exports，用來導出變量；然后是module.exports用于導出對象；最后是return直接返回。
最后對seajs和requirejs的不通點做個總結，選擇seajs作者github：
定位有差異。RequireJS 想成為瀏覽器端的模塊加載器，同時也想成為 Rhino / Node 等環境的模塊加載器。Sea.js 則專注于 Web 瀏覽器端，同時通過 Node 擴展的方式可以很方便跑在 Node 環境中。
遵循的規范不同。RequireJS 遵循 AMD（異步模塊定義）規范，Sea.js 遵循 CMD （通用模塊定義）規范。規范的不同，導致了兩者 API 不同。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規范。
推廣理念有差異。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區采納。Sea.js 不強推，采用自主封裝的方式來“海納百川”，目前已有較成熟的封裝策略。
對開發調試的支持有差異。Sea.js 非常關注代碼的開發調試，有 nocache、debug 等用于調試的插件。RequireJS 無這方面的明顯支持。
插件機制不同。RequireJS 采取的是在源碼中預留接口的形式，插件類型比較單一。Sea.js 采取的是通用事件機制，插件類型更豐富。
以上就是如何正確的使用seajs和requirejs模塊，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
