本文实例讲述了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>
新闻热点
疑难解答
图片精选
