前端模块化管理工具seajs已经广泛使用在国内前端开发中,我也算在好几个项目中使用了几次,从1.3.1~3.0.0也碰到了一些问题,现在想就主要的两种使用方式进行总结,也就使用中的问题给出一些解决方案。
首先,我们来看看常用的两种seajs使用方式,一种是使用seajs.use直接将js模块引入进来,另一种是先用<script>标签先将js引入进来,再由seajs.use引用(需要有id):
比如:对以下目录结构
seajs-test
|-----js
|----- |-----a.js
|-----seajs-3.0.0.js
|-----seajs-test.html
可以采用如下方式对a.js进行加载:
a.js如下:
define('a.id', function() {
console.log('i am a.js');
return {
hello: function() {
console.log('a.js says hello!');
}
}
});
<!-- 第一种方式 -->
<script>
seajs.use('./js/a.js', function(p) {
p.hello();
})
</script>
<!-- 第二种方式 -->
<script src="./js/a.js"></script>
<script>
seajs.use('a.id', function (p) {
p.hello();
});
</script>
方式一优点:
1、简单方便
2、代码量少,可以减少script的数量
缺点:
1、当文件地址变更的时候,相对路径和绝对路径的方式不好进行修改
2、将项目所有js文件都压缩合并后,难以加载。
方法二优点:
1、可以利用script标签管理js文件的加载
2、利于script文件的压缩合并,压缩后依然可以通过id加载
缺点:
1、需要给每一个配置文件都加上id
2、代码量较多
个人还是比较喜欢第二种方法,因为现在对代码进行合并压缩对于较大型的网站都是标配,另外对模块加上id的工作也可以通过自动化工具按照规则来生成,不会占用太多工作量。
而具体怎么使用seajs批量加载文件,将在seajs使用小结(二)中进行讨论