seajs 使用心得二【原创】

seajs使用心得二【原创】 web前端 杭州-小白

之前我也有写一篇文章介绍了seajs的简单入门使用, https://www.xiaobai8.com/Blog/700.html,不过这个已经是针对seajs前期的版本了.

现在seajs都升级到了2.2了,构建方式也是用了grunt 构建.

摘要:

1.Windows下使用grunt构建.

2.关于使用jquery.

3.关于使用jquery插件.

一:Windows下使用grunt构建
1.安装nodejs  
2.安装grunt-cli (参考:http://gruntjs.com/)

npm install -g grunt-cli

3.通过命令提示行进入目录(我这里是进入的scripts目录):
这个目录要准备:package.json 和 Gruntfile.js 这两个文件.
(关于如何配置:参考来源:https://github.com/seajs/seajs/issues/672 和
http://hi.baidu.com/liuda101/item/54bcf8d0b6a65602d68ed057 和 
http://gruntjs.com/configuring-tasks#files )

4.安装grunt,目前最新的是直接在此目录使用如下命令:

npm install

会自动检索package.json包里面的版本.并自动安装.

5.Gruntfile.js如果前面已经配置好.构建命令:

grunt build

6.构建完成 index.html 使用如下:

未构建前使用

seajs.use(“application/testApp/application”);

构建后使用

seajs.use(“appjs/testApp/application”);

二: 关于使用jquery

jquery1.7+本身支持amd的但是不支持cmd,你就需要在源码的最后把amd改成CMD的就Ok了,

详情请看CMD模块定义规范 https://github.com/seajs/seajs/issues/242

比如我seajs引入的是 demo/app/seajs/sea.js 那么seajs的基本路径是 demo/app/

那么此时我们的jquery的目录存放地址是demo/app/jquery/1.10/jquery.js , 那么它的标识应该就要改成 jquery/1.10/jquery.

eg:

之前:

if ( typeof define === "function" && define.amd ) {
	define( "jquery", [], function () { return jQuery; } );
 }

之后:

if ( typeof define === "function" && define.cmd ) {
	define( "jquery/1.10/jquery", [], function () { return jQuery; } );
}

三: 关于使用jquery插件

包装 jquery-tabs.js 插件:

define(function(require, exports, module) {
	return function(jQuery) {
		(function($) {
			$.fn.tabs = function(content, options) {
				//your code
			};
			$.fn.tabs.defaults = {
				//your code
			};
		})(jQuery);
	};
});

使用插件:

var $ = require("jquery");
require("./jquery-tabs")($);

这个时候后面就可以使用插件了 .jquery插件的名字最好不要有像这样jquery.min.js这样,grunt build的时候处理插件依赖的时候,名字最后貌似错掉了变成了jquery.js.所以我建议是jquery-min.js这个样子的名字就不会错了.

由于篇幅原因 可以查看此项目的源码地址 https://github.com/lovexiaobai/HelloSeajs/

备注:此项目源码里面有jquery插件的包装方式和jquery本身的包装方式可供参考.

以上仅仅是目前项目的代码可以正常运行起来,但是有些东西和使用变化更新很快,需要大家自己去把握和斟酌咯,我这里只是简单的记录一下.

小白 2013-09-05