seajs 模块化开发总结

 

改造一个现有的老项目 ，直接使用seajs进行模块化开发

 

下载seajs github上面

 

引用jquery模块

正常jQuery作为window下的方法 全局属性

window下只实现了 $ 和 window.jQuery

 具体实现方法

1.定义jquery模块

这里定义jquery的ID  后面加载的require都要使用这个jquery,同时搜索define.amd 改成 define.cmd 

define('jquery',[],function (requrie,exports,module) {

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.2.min.map
*/

jquery源码

})

 

2.定义入口文件init.js

var jQuery = require('jquery');   　　这里的jquery就是上面定义的模块ID （标红加粗字体）

window.jQuery = $ = jQuery; 　　    赋给全局对象window 只有添加到window变量下才能正常使用

 

 3.html页面引用

先引用sea.js

<script src="__TMPL__/public/assets/js/sea.js"></script>

然后定义jquery别名

seajs.config({
alias:{
'jquery':'jquery-1.10.2'  此文件位置相对于sea.js
}
});

定义入口js

seajs.use('./themes/zlhcec/public/assets/js/init.js');

如下图

 

 

sea.js和其他文件的目录结构 都在同一目录下

 

 

 

 

参考文档

使用SeaJS实现模块化JavaScript开发

seajs API 文档