本文實例講述了seajs和requirejs模塊化。分享給大家供大家參考，具體如下：
如今，webpack、gulp等構件工具流行，有人說seajs、requirejs等純前端的模塊化工具已經被淘汰了，我不這么認為，畢竟純前端領域想要實現模塊化就官方來講，還是有一段路要走的。也因此純前端的模塊化工具依然有價值，而且就我了解一些中小企業一直都在用純前端的模塊化手段。
如今，重新關注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：
個人總結的不同是：
CMD，seajs 推崇依賴就近，AMD ，requirejs推崇依賴前置，實際是兩者在簡單實現上，是可以一致的。就比如本文的例子。
seajs比如requirejs小很多。
更多關于JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
