seajs + easyui
* *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)其他问题后续总结补充...
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。