jQuery 基本库确实给我们带来了很多的方便,但是因为其fn的扩展方式在项目中实在是灵活度欠缺;
而widget模式虽然具备了一定的灵活度,但是还是有一定的欠缺
下面是我对jQuery做了修改后写的一些代码
吸收了一部分prototype.js 面向对象的方式,抛弃了widget的扩展模式,抛弃了 tabs.tabs("swidth","12121") 这种调用模式,使用 obj.method(args) 的调用模式
添加了prototype.js 中 function(){}.bind(this,arg1,arg2) 的闭包模式,这样在面向对象中就解决了和jQuery 闭包调用this 的冲突
....
method1:function(){
$.getJSON(window.cp + "/profile/" + dotx.conf.userName + "?act=loadGroup&group=" + groupId,this.showGroup.bind(this));
},
showGroup:function(group){...}
....
完整的模块js 代码
profile.js
;
(function($){
$.dotx = $.dotx || {} ;
$.dotx.Profile = clazz.create();
$.extend($.dotx.Profile.prototype,{
init:function(conf){
this.groupIpt = $("#contact-group");
this.itemsDiv = $("#contact-group-items");
this.addBtn = $("#add-contact-btn");
this.bindEvent();
},
bindEvent:function(){
var t = this ;
this.groupIpt.toggleBtn({
callback:function(groupId,groupName){
t.addBtn.html("<b>添加联系人</b> (" + groupName + ")");
t.loadGroup(groupId);
}
});
},
loadGroup:function(groupId){
var t = this ;
this.itemsDiv.html("loading...");
$.getJSON(window.cp + "/profile/" + dotx.conf.userName + "?act=loadGroup&group=" + groupId,function(group){
t.showGroup(group);
});
},
showGroup:function(group){
this.itemsDiv.empty();
var items = group.items || [];
var i , len = items.length ;
if(len > 0 ){
for(i = 0; i < len ; i ++){
this.addItem(items[i]);
}
}else{
this.itemsDiv.html("分组无联系人");
}
},
addItem:function(item){
var groupId = this.getGroupId();
this.itemsDiv.append("<div id=\"contact-group-item-" + item.id + "\" style=\"height:30px;line-height:30px;border-bottom:1px dashed #ccc;\">"
+ "<span style=\"width:177px;display:inline-block;\" title=\"@" + item.userName + "\">"
+ item.contactName
+ (groupId == "all" ? "<span class=\"desc\"> (" + (item.groupName || "全部") + ")</span>" : "")
+ "</span>"
+ "<a href=\"javascript:profile.deleteContact('" + item.id + "');void(0);\" class=\"link-btn-b\">删除</a></div>");
},
showAddContactWin:function(){
var t = this ;
var txt = "<div id=\"contact-add\"></div>" ;
jQuery.prompt(txt,{
loaded:function(){
$("#contact-add").load(window.cp + "/profile/" + dotx.conf.userName + "?act=contactAdd&group=" + t.getGroupId());
},
buttons: {"关闭": false }
});
},
deleteContact : function(contactId){
if(window.confirm("确定删除该联系人么?")){
jQuery.post(window.cp + "/profile/" + dotx.conf.userName + "?act=deleteContact&contactId=" + contactId,
function(ret){
if(ret)
$("#contact-group-item-" + contactId).remove();
}
);
}
},
searchContacts:function(){
var keyword = $("#contact-search-keyword").val();
var div = $("#contact-group-search-items");
if(keyword){
div.html("Loading...");
div.load(window.cp + "/profile/" + dotx.conf.userName
+ "?act=searchContacts&keyword=" + keyword);
}
},
addContact:function(userId){
var t = this ;
var groupId = this.getGroupId();
$.post(window.cp + "/profile/" + dotx.conf.userName + "?act=addContact&user=" + userId + "&group=" + groupId,function(){
t.loadGroup(groupId);
});
},
getGroupId:function(){
return this.groupIpt.val();
}
});
})($);
base.js 基本包,需要引入
;
(function($){
/* prototype.js 中 的方法绑定模式 ---------------------------------------------------------- */
Function.prototype.bind = Function.prototype.bd = function(){
var method = this ;
var obj = arguments[0];
var args = arguments;
return function(){
var newArgs = [];
var i ,len = args.length ;
if(len > 1){
for(i = 1; i < len ; i ++){
newArgs.push(args[i]);
}
}
len = arguments.length ;
for(i = 0 ; i < len ; i ++){
newArgs.push(arguments[i]);
}
method.apply(obj,newArgs);
}
};
// 面向对象的修改
window["class"] = window.clazz = {
create:function(){
function klass(){
this.init.apply(this, arguments);
}
if (!klass.prototype.init)
klass.prototype.init = function(){} ;
klass.prototype.constructor = klass ;
return klass ;
}
};
})(jQuery);
分享到:
相关推荐
使用jQuery实现动态可编辑表格,代码更少,兼容性更好
Jquery Validate修改版 提示信息以悬浮窗口显示
jbox2.3 由于更新停止,目前在jquery1.8以下使用正常。但由于jquery1.9取消了$.browser.msie方法,导致高版本jquery无法使用。本文件使用其它判断方法替换了$.browser.msie,实测在jquery1.9以上可使用。
轻量级,“写的少,做的多” 包含以下功能: HTML元素选取 HTML元素操作 CSS操作 HTML时间函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX(异步 JavaScript 和 XML。) 2、jQuery优势 目前网络上有大量开源的 JS...
Jquery经典修改增强版本,非常不错。
JQuery alert confirm prompt 修改版
jquery无刷新更改数据库的内容.txt
jQuery做的alert、confirm、prompt弹框 可以自行修改样式
微软压缩版引用地址: ...下载后更改文件名,匹配引用连接名称 适配3.6.1版本 jquery-3.6.1.min.js jquery-3.6.1.min.js 建议网络环境不好或者无网络情况下使用 初学源码加载 程序员编程前端脚本文件压缩包Jquery
jQuery树控件的拖动修改各种特效 Treeview拖动 树拖动
jQuery实现表格动态修改和隐藏jQuery实现表格动态修改和隐藏jQuery实现表格动态修改和隐藏
jQuery数据列表新增或修改删除代码
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"...jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities
jQuery修改标签内容:超链接a标签、span标签、div标签以及form表单标签。
jQuery单击div更改背景颜色
JQuery做的一个简单的图片展示效果,稍作修改可以仿照QQ的图片展示。
资源名称:jQuery 中文手册 1.11.1内容简介:jquery中文手册 自从 2011 第1.7版到现在,这期间进行了很多次修改,因为作者相信:只要用心,哪怕一个小玩意都可以做到极致。 jQuery API 1.4.4 是一部比较详细的中文...
jquery实现点击文字时提供信息编辑并修改修改信息保存至数据库
jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 函数库。 1.2.jQuery的优势 可以简化JavaScript代码 可以像css那样获取元素 可以修改css来控制页面效果 可以兼容常用的浏览器 1.3.jQuery...
1、将jquery-1.6.4-vsdoc.js与jquery-1.6.4.js放在同一目录,然后在vs中添加对jquery-1.6.4.js的引用即可; 2、切记:两个文件的文件名不能修改,并且只要引用jquery-1.6.4.js而不要引用jquery-1.6.4-vsdoc.js。