← 全部文章

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需要安装在你本地的机器上,安装步骤如下:

  1. 需要安装nodejs,可以直接去官方网站下载安装包download,选择一个适合自己电脑的版本即可。
  2. 运行npm install -g grunt-cli,将grunt-cli模块装到你的电脑中。
  3. 运行npm install -g grunt-init,将grunt-init装到你电脑中。
  4. 运行grunt init cell-grunt-template,安装cell-grunt-template,一个grunt的脚手架工具,可以省去你自定义package.json和Gruntfile.js的工作。
  5. 安装自己喜欢得方式写代码
  6. 在项目的根目录下,执行grunt,程序会自动压缩合并你的代码,这时可以看一下压缩合并的过程是否出错,以及合并之后的效果。
  7. 如果没问题的话,可以提交测试或者上线。
写于 2014.07.23继续阅读 ↗