GhostStories 2015-07-07
随着程序的增加,前台代码变的越来越复杂,重复的js 模块会变多,文件间的依赖也会变复杂,会经常出现引用了一个文件就忘了它所依赖的文件是哪个。seajs 很好的解决了这个问题,它属于模块级管理,能搞让我们引用文件时减少文件间的依赖。
如果用过nodejs 的话,会发现seajs的用法和nodejs的模块语法相似,使用简单
1.下载seajs 文件,下载地址http://seajs.org/docs/#downloads
2.将文件放到工程文件里,并在页面上引用
<script type="text/javascript" src="/javascripts/libs/seajs/2.2.0/sea.js"></script>
3.定义自己的模块
创建文件a.js
define( 'myModule', function(require, exports, module ){ module.exports ={ init:function(){} }; })
4.页面调用
<script type="text/javascript"> seajs.use('myMoudle', function(practiceStarter) { practiceStarter.init('first'); }); </script>
这个就完成的了页面调用,但是这个只是单一的文件加载没有看到页面的模块化,seajs 最大的好处就是把文件间的依赖写在文件中,前台不需要关心
例如 a.js的运行需要b.js
b.js
define(function(require, exports, module ){ var Other = function(){ } module.exports = Other; })
在a.js中引入b.js
define( 'myModule', function(require, exports, module ){ module.exports ={ init:function(){ var Other = require('b_path') } }; })
如果页面上要引入多个模块可以
<script type="text/javascript"> seajs.use(["/javascripts/editor_layout.js", "/javascripts/paper_practice_starter.js"], function(editor_layout, practiceStarter) { }); </script>
也可以在页面上在seajs.use 前加入
seajs.config({ base: '/' //或者 . });
指定加载文件的其实位置,如果不设置,默认为当前页面的上级目录