前端模块化管理工具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>
以上两种方式都可以将a.js中定义的模块引入页面,在实践中,发现,虽然这两种方式功能一样,但是在具体运行中还是有一些不同,私下里总结了这两种方法的几个优缺点。
方式一优点:
1、简单方便
2、代码量少,可以减少script的数量
缺点:
1、当文件地址变更的时候,相对路径和绝对路径的方式不好进行修改
2、将项目所有js文件都压缩合并后,难以加载。
方法二优点:
1、可以利用script标签管理js文件的加载
2、利于script文件的压缩合并,压缩后依然可以通过id加载
缺点:
1、需要给每一个配置文件都加上id
2、代码量较多
个人还是比较喜欢第二种方法,因为现在对代码进行合并压缩对于较大型的网站都是标配,另外对模块加上id的工作也可以通过自动化工具按照规则来生成,不会占用太多工作量。
而具体怎么使用seajs批量加载文件,将在seajs使用小结(二)中进行讨论
分享到:
相关推荐
NULL 博文链接:https://bijian1013.iteye.com/blog/2259862
自己在公司需要使用seajs,就学习了seajs写了个手册和demo,欢迎阅读。
SeaJS Web 端的js 模块加载器
seajs-2.3.0.zip
knockout seajs .net中实战应用
提供了前端框架seajs的简要使用说明
seajs源文件以及一个帮助文档,文档介绍比较详细
seajs源码
seajs-2.2.0源码
seajs下载,包含自己总结的用法和规范
第一次接触的可以下来看看,会用的就没必要下载了
seajs-5分钟上手。。。。。。...................................................。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
seajs-css.js 用于seajs加载css文件,上课用的课件资源,大家有需要的可以随时下载。版本是非常好用的,作为一个学习模块化我们必须的知识插件
本文实例讲述了JavaScript 模块化开发...SeaJs使用 引入sea.js的库 如何变成模块? define 如何调用模块? exports 和 seajs.use 如何依赖模块? require //html: [removed][removed] <script type="text/javascr
seajs入门完整案例,适合新手学习! seajs入门完整案例,适合新手学习!
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。
用于seajs的预加载使用,有需要的小伙伴可以免费下载使用。方便大家多多分享免费的资源,有问题随时给我们留言。希望能帮助大家解决更多的问题
主要是做了一个基于node环境中,seajs的配置以及一些实例和利用grunt进行资源的打包压缩合并的构建
前端开源库-grunt-react-seajsgrunt react seajs,一个将react组件转换为seajs模块的grunt插件
Bootstrap和seajs结合的分页器,绝对好用嗷