对jQuery做的修改

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>&nbsp;(" + 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\">&nbsp;(" + (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);