seajs+easyui实战

897371388

浏览: 528680 次

最近访客更多访客>>

u012363178

ncx1259988

心杀心

lzj89566062

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1025)

社区版块

存档分类

2013-11 ( 336)
2013-10 ( 118)
2013-09 ( 56)
更多存档...

*
 *author Benjamin
 *date   2013-11-24
 *content seajs+easyui使用
 */


/**
 * 首先来看看在seajs中jquery和jquery插件如何使用
 */
1.jquery.js
define(function(require,exports,module)){

	//原jquery.js代码

	module.exports = $.noConflict(true);
}
2.jquery.combobox.js

依赖关系如下：
jquery.combobox.js    依赖 jquery.combo.js
jquery.combo.js       依赖 jquery.panel.js、jquery.validatebox.js
jquery.validatebox.js 依赖 jquery.tooltip.js

那怎么封装jquery.combobox.js及依赖的插件呢？
1)jquery.combobox.js
define(function(require,exports,module){
	return function($){
		require("plugins/jquery.combo");
		//插件代码
	}
});
2)jquery.combo.js
define(function(require, exports, module) {
	return function($) {
		require("plugins/jquery.validatebox")($);
		require("plugins/jquery.panel")($);
		//原jquery.combo.js代码
	}
});
3)jquery.validatebox.js
define(function(require, exports, module) {
	return function($) {
		require("plugins/jquery.tooltip")($);
		//原jquery.validatebox.js代码
	}
});

4)jquery.panel.js、jquery.tooltip.js
define(function(require, exports, module) {
	return function($) {
		//原jquery.validatebox.js/jquery.panel.js代码
		(function($){
			......
		})(jQuery);
		//注意此处要把jQuery改为$,要不就在init.js中把实参改为jQuery
	}
});

/**
 * 相关实例
 */
a)index.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
</head>
<body>
	<select id="sel_refresh">
		<option value="0">不刷新</option>
		<option value="60">1分钟</option>
		<option value="120">2分钟</option>
	</select>
<script type="text/javascript" src="sea.js"></script>
<script type="text/javascript">
seajs.use("./init",function(init){
	init.initPage()
});
</script>
</body>
</html>
b)init.js
define(function(require,exports,module){
	//加载依赖模块
	var $ = require("jquery");
	require("./plugins/jquery.combobox")($);

	//私有属性和方法
	var name = "Benjamin_private";
	var setName = function(name){
		console.log("My name is "+ name);
	}
	
	//公有属性和方法
	module.exports = {
		name     : "Benjamin_public"
		initPage : function(){
			$("#sel_refresh").combobox({
				width:150,
				onSelect:function(rec){
					console.log(rec);
				}
			});
		},
		setName : function(name){
			console.log("My name is "+ name);	
		}
	}
});
c)jquery.combobox.js及依赖插件代码参见上面

/**
* 问题
*/
a)使用seajs+easyui 时 easyui框架的 jquery.parse.js 基本上每个控件都有用到，所以建议每个控件添加依赖时都增加这个依赖；更改这个文件时要注意，其文件中两个闭包都要更改实参。
b)避免缓存设置
可以在链接后加个时间戳，也可以直接配置
seajs.config({
debug : 2;
});

c)其中的各控件样式文件在此实例中没有设置按模块加载，自己可设置
d)其他问题后续总结补充...

分享到：