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);