seajs & grunt
在前端开发的过程中,我们需要面对这么几个问题:
- 相同或相似功能和模块的重复开发
- 静态资源的合并和上线优化
- 不同模块之间的依赖关系处理
- 开发效率的提升和bug数量的减少
这里说一下我比较推荐的开发模式:
使用seajs作为js代码组织工具
- 首先可以解决模块之间的依赖关系处理;
- 其次,因为采用模块化开发的形式,所以相同或相似功能的模块,可以避免重复开发(不过这要求模块的职能要单一,粒度也足够细);
- 再次,可以避免全局变量随便定义导致的错误。
使用grunt作为工程化流程的工具
- 首先,可以有大量的第三方task可用
- 其次,使用grunt已经经过了很多公司工程化的考验,比较可靠
- 再次,可以节约人肉合并和优化的工作,减轻不必要重复工作量
seajs使用说明:
详细内容可以参考seajs.org,这里只说明一下几个需要注意的点:
-
使用
seajs作为加载器,意味着你的页面中只用通过script标签载入一个seajs即可,其余模块都可以通过seajs加载到页面中。具体配置方法如下:seajs.config({ 'alias' : { 'path/to/file' : 'path/to/file' } });在
alias对象中,冒号左侧的为模块Id,右侧为模块真实路径,为了避免歧义,所以在合并模块的task中,将模块Id定义为模块的路径.但是要明确这点:这两个值之间没有必然关系,id是可以随便定义的,只不过我们为了简化规则,将其定义成了路径而已。
-
所谓模块化开发,就是指要将不同的功能从大段的代码中抽离出来,通过
对外方法的形式,使得模块调用者可以方便的调用,而不用担心其他问题。初期使用seajs进行模块化开发,只需要记住如下的形式即可:define(function (requires,exports,module) { // 通过require,加载你所依赖的模块 var Mod = require(ModId); // your code // 通过exports提供对外的方法 exports.yourFun = your function });
Grunt使用说明:
Grunt不是一个代码层级的管理工具,代码层级的管理工具是seajs;Grunt是一个工程化的流程管理工具。
想了解更多,可以看看:关于Grunt的一切
Grunt需要安装在你本地的机器上,安装步骤如下:
- 需要安装
nodejs,可以直接去官方网站下载安装包download,选择一个适合自己电脑的版本即可。 - 运行
npm install -g grunt-cli,将grunt-cli模块装到你的电脑中。 - 运行
npm install -g grunt-init,将grunt-init装到你电脑中。 - 运行
grunt init cell-grunt-template,安装cell-grunt-template,一个grunt的脚手架工具,可以省去你自定义package.json和Gruntfile.js的工作。 - 安装自己喜欢得方式写代码
- 在项目的根目录下,执行
grunt,程序会自动压缩合并你的代码,这时可以看一下压缩合并的过程是否出错,以及合并之后的效果。 - 如果没问题的话,可以提交测试或者上线。
写于 2014.07.23继续阅读 ↗