使用 Sea.js 进行模块化开发还能够带来非常多优点:
-
模块的版本号管理。
通过别名等配置,配合构建工具,能够比較轻松地实现模块的版本号管理。
-
提高可维护性。模块化能够让每一个文件的职责单一,很有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能。能比較明显地提升效率。
-
前端性能优化。
Sea.js 通过异步载入模块,这对页面性能非常故意。
Sea.js 还提供了 combo、flush 等插件,配合服务端,能够非常好地对页面性能进行调优。
-
跨环境共享模块。
CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本号。能够非常方便实现模块的跨server和浏览器共享。
seajs的文件结构 :
以上步骤完毕,接下来演示一个怎样简单的使用seajs
第一步:
define
用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:define(function(require,exports,module){ var _msg = 'not set msg!'; exports.setMsg = function(msg){ _msg = msg; }; exports.getMsg = function(){ return _msg; }; });
第一个參数:require用来获取指定的接口,注意require仅仅接受字符串直接是量作为參数
第二个參数:exports用来在模块内部对外部提供接口
第三个參数:module与exports类似,用来在模块内部对外提供接口
第二步:
当模块定义好了。那么就把刚才配置好的模块配置入seajs。
seajs.config
seajs.config({ alias:{ 'init':"modul/init.js" } });
init表示模块的id是自己定义的,“modul/init.js”是模块的相对路径能够省略js。注意:模块的绝对路径是seajs-2.3.0/dist/modul/init.js
seajs.use
用来在页面中载入一个或多个模块。
seajs.use("init", function(init){ //设置值 init.setMsg('Hello World'); alert(init.getMsg()); });
效果:
HTML页面的代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- 导入seajs-2.3.0这个文件 --> <script type="text/javascript" src="seajs-2.3.0/dist/sea.js"></script> <script type="text/javascript"> //配置seajs seajs.config({ alias:{ 'init':"modul/init.js" } }); //使用seajs seajs.use("init", function(init){ //设置值 init.setMsg('Hello World'); alert(init.getMsg()); }); </script> </head> <body> <h1>Test seajs</h1> </body> </html>