本文實例講述了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>
新聞熱點
疑難解答
圖片精選
