Posted in Javascript onMay 23, 2012
JQury框架绝对是页面开发的首选,代码短小强悍,缺点就是面向对象特性不足,所幸有不少插件!至于Ext就是一个庞然大物了,高度面向对象,类似于MFC的庞大API和控件库,运行起来,浏览器就累得够呛,开发也够呛,使用代码来创建界面绝对是个糟糕的方式,Javascript的弱语言类型使得Ext开发就像行走在雷区,减少bug的唯一方法就是不要写出bug,一旦出现bug,调试将是一件极为痛苦的事情 !在几千行代码里跟踪、跳转真让人抓狂!
Javascript做面向对象开发的时候,总是会用到很多模拟面向对象特性的方法,这些方法就构成了支撑面向对象Javascript的核心代码,以下就是部分代码,其中参考了很多JQuery与Ext的核心代码,用来学习还不错,也可以做一些小的开发!
/* 功能:核心脚本方法 作者:LQB 2008-12-22 */ var JCore = {//构造核心对象 version:1.0, $import:function(importFile){ var file = importFile.toString(); var IsRelativePath = (file.indexOf("$")==0 ||file.indexOf("/")==-1);//相对路径(相对于JCore) var path=file; if(IsRelativePath){//计算路径 if(file.indexOf("$")==0) file = file.substr(1); path = JCore.$dir+file; } var newElement=null,i=0; var ext = path.substr(path.lastIndexOf(".")+1); if(ext.toLowerCase()=="js"){ var scriptTags = document.getElementsByTagName("script"); for(var i=0;ilength;i++) { if(scriptTags[i].src && scriptTags[i].src.indexOf(path)!=-1) return; } newElement=document.createElement("script"); newElement.type="text/javascript"; newElement.src=path; } else if(ext.toLowerCase()=="css"){ var linkTags = document.getElementsByTagName("link"); for(var i=0;ilength;i++) { if(linkTags[i].href && linkTags[i].href.indexOf(path)!=-1) return; } newElement=document.createElement("link"); newElement.type="text/css"; newElement.rel="Stylesheet"; newElement.href=path; } else return; var head=document.getElementsByTagName("head")[0]; head.appendChild(newElement); }, $dir : function(){ var scriptTags = document.getElementsByTagName("script"); for(var i=0;ilength;i++) { if(scriptTags[i].src && scriptTags[i].src.match(/JCore/.js$/)) { path = scriptTags[i].src.replace(/JCore/.js$/,""); return path; } } return ""; }(), $ : function(element){ return (typeof(element) == 'object' ? element : document.getElementById(element)); }, browser : { isFirefox:navigator.userAgent.toLowerCase().indexOf ('gecko') != -1, isChrome:navigator.userAgent.toLowerCase().indexOf ('chrome') != -1, isOpera:navigator.userAgent.toLowerCase().indexOf ('opera') != -1, isIE:navigator.userAgent.toLowerCase().indexOf ('msie') != -1, isIE7:navigator.userAgent.toLowerCase().indexOf ('7.0') != -1 }, onReady: function(newFunction){ if(typeof(newFunction) == 'undefined') return false; this.domReady = false; if(typeof(functions) == 'undefined') var functions = []; functions.push(newFunction); var initial = function(){//执行事件列表 for(var i=0; i< functions.length;i++){ functions[i](); } } this.ready = function(){//加载事件 if(this.domReady) initial(); var Browser = JCore.browser; if (Browser.isFirefox || Browser.isOpera || Browser.isChrome) {//FX try { document.removeEventListener('DOMContentLoaded', initial); }catch(e){} document.addEventListener('DOMContentLoaded', initial, false); this.domReady = true; } else if (Browser.isIE) {//IE var timer = window.setInterval(function(){ try { var IsReady = false; document.body.doScroll("left"); IsReady=true; initial(); window.clearInterval(timer); this.domReady = true; } catch (e){ if(IsReady){//文档加载已经完毕,抛出异常说明是调用的方法出错 var ErrorMsg = "onReady的方法中发生错误!/r/n"; ErrorMsg+="错误信息:"+e.message+"/r/n"; ErrorMsg+="错误描述:"+e.description+"/r/n"; ErrorMsg+="错误类型:"+e.name+"/r/n"; alert(ErrorMsg); window.clearInterval(timer); } } } , 5); } } this.ready(); }, apply:function(oDes, oSrc,bReplace){//为对象拷贝其它对象的属性,bReplace可选 if(oDes && oSrc && typeof(oSrc) == 'object'){ for(var p in oSrc){ if(bReplace == false && oDes[p] != null) { continue; } oDes[p] = oSrc[p]; } } return oDes; }, override : function(origclass, overrides){//为类增加重载方法,eg:override(function class(){},{A:function(){},B:function(){}}); if(overrides){ var p = origclass.prototype; for(var method in overrides){ p[method] = overrides[method]; } } }, extend :function(){ // inline overrides var inlineOverride = function(o){ for (var m in o) { this[m] = o[m]; } }; /*需要实现重载的基类方法需要在父类prototype中定义; * 在子类中方法的可见度:子类构造中的属性>父类构造中的属性>子类prototype定义的属性==overrides>父类prototype定义的属性 * 由于overrides方法被附加到子类的prototype中,所以:子类prototype定义的属性与overrides,两者后定义的可见 * extend方法将重写子类的prototype,因此在子类的prototype上定义属性则必须在extend()方法调用之后再定义才有效 * 对于一个类:构造中定义的属性>prototype定义的属性 * *类派生的准则: * 1.建议把基类中可重写的方法定义在基类prototype中 * 2.如果在派生类的prototype中定义属性方法,必须在extend()方法之后 * 3.在派生类的构造中调用基类的构造: * if(Sub.superclass) //sub即子类的名称 * Sub.superclass.constructor.call(this, Args);//Args即父类的构造方法的参数 * 4.注意数组的浅拷贝问题 *示例: * var ClassA=function(){this.Show=function(){alert("Hello World!");}}; * var ClassB=function(){}; * JCore.extend(ClassB,ClassA); * var ObjectB = new ClassB(); * ObjectB.Show(); */ return function(subFn, superFn, overrides){//子类,父类,重载方法(可选) var F = function(){}, subFnPrototype, superFnPrototype = superFn.prototype; F.prototype = superFnPrototype; subFnPrototype = subFn.prototype = new F(); subFnPrototype.constructor = subFn; subFn.superclass = superFnPrototype;//父类 if (superFnPrototype.constructor == Object.prototype.constructor) { superFnPrototype.constructor = superFn; } subFn.override = function(obj){//override JCore.override(subFn, obj); }; subFnPrototype.override = inlineOverride; if(overrides) JCore.override(subFn, overrides); return subFn; }; }(),//括号不可少,表示调用内部返回的方法 namespace : function(ns){//eg: JCore.namespace("JCore", "JCore.util"); var args=arguments, o=null, i, j, d, rt; for (i=0; ilength; ++i) {//遍历参数 d=args[i].split(".");//遍历点分隔符 rt = d[0]; eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';'); for (j=1; jlength; ++j) { o[d[j]]=o[d[j]] || {}; o=o[d[j]]; } } }, isEmpty : function(value){ return value === null || typeof(value) === 'undefined' || value === ''; }, idSeed : 0, id : function(el, prefix){ prefix = prefix || "JCore-gen"; el = this.$(el); var id = prefix + (this.idSeed++); return el ? (el.id ? el.id : (el.id = id)) : id; } }; /*--------------------------------------------Function对象扩展-------------------------------------------*/ var FunctionExtendMethod ={ createCallback : function(/*args...*/){//此参数即创造者的参数 /*示例:function func1(arg1,arg2){alert(arg1+arg2);} * var myfunc = func1.createCallback(1,2); * myfunc();//即调用了func1 **/ var args = arguments; var method = this; return function(/*args...*/) {//如果在调用时传了参数,则创建时传的参数无效 var callArgs = arguments.length>0 ? arguments : args; return method.apply(window, callArgs); }; }, createDelegate : function(argsArray,scope){//参数可选 //参数一个数组,与createCallback区别:createCallback参数是可变参数,createDelegate的argsArray参数必须是数组 var method = this; return function(/*args...*/) {//如果在调用时传了参数,则创建时传的参数无效 var callArgs = typeof(argsArray)=="undefined"?[]:argsArray; callArgs = arguments.length>0 ? arguments : callArgs; return method.apply(scope||window, callArgs); }; }, defer : function(millis/*,args...*/){//参数:延迟时间(毫秒),可选参数列表 /*示例:function func1(arg1,arg2){alert(arg1+arg2);} * func1.defer(1000,1,2);//延迟1秒调用了func1(1,2) **/ var callArgs = Array.prototype.slice.call(arguments, 1); var fn = this.createDelegate(callArgs); if(millis){ return setTimeout(fn, millis); } fn(); return 0; }, createInterceptor : function(fcn, scope){ if(typeof fcn != "function"){ return this; } var method = this; return function() { fcn.target = this; fcn.method = method; if(fcn.apply(scope || this || window, arguments) === false){ return; } return method.apply(this || window, arguments); }; } }; JCore.apply(Function.prototype,FunctionExtendMethod); /*--------------------------------------------String对象扩展----------------------------------------*/ var StringExtendMethod ={ trim : function(){//去掉首尾空格 return this.replace(/(^/s*)|(/s*$)/g,"");//将字符串前后空格,用空字符串替代。 }, replaceAll : function (AFindText,ARepText){//替换所有,replace只替换第一个 raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText); }, htmlEncode : function(){//编码HTML和解码Html。过滤掉双引号,单引号,符号&,符号<,符号 return this.replace(/&/g,"&").replace(/<").replace(/>/g,">").replace(//"/g,""").replace(//'/g,"'"); }, htmlDecode : function(){ return this.replace(//&/;/g, '/&').replace(//>/;/g, '/>').replace(//</;/g, '/<').replace(//"/;/g, '/'').replace(//&/#39/;/g, '/''); }, format : function(){ var args=arguments; return this.replace(//{(/d+)/}/g, function(m, i){ return args[i]; }); }, convertWarpSymbol : function(){ var reg1,reg2,reg3; if(this.toLowerCase().indexOf("")!=-1){ reg1 = / /gi; reg2 = //gi; return this.replace(reg1," ").replace(reg2,"/r/n"); } else{ reg1 = / /g;reg2 = //r/n/gi; return this.replace(reg1," ").replace(reg2," "); } }, IsNum : function(){ var reg = /^/d+$/g; return reg.test(this); } }; JCore.apply(String.prototype,StringExtendMethod); JCore.apply(String,{//静态方法 trim : function(str){//去掉首尾空格 return str.replace(/(^/s*)|(/s*$)/g,"");//将字符串前后空格,用空字符串替代。 } }); /*--------------------------------------------Array对象扩展----------------------------------------*/ var ArrayExtendMethod ={//去掉数组中重复的元素 strip : function(){ if(this.length<2) return [this[0]]||[]; var arr=[]; for(var i=0;i<this.length;i++){ var repeat=false; for(var j=0;jlength;j++){ if(this[i]===arr[j]) repeat=true; } if(!repeat) arr.push(this[i]); } return arr; }, exists : function(item){ for( var i = 0 ; i < this.length ; i++ ){ if( item === this[i]) return true; } return false; }, indexOf : function(item){ for (var i = 0; i < this.length; i++){ if(this[i] === item) return i; } return -1; }, remove : function(item){ var index = this.indexOf(item); if(index != -1){ this.splice(index, 1); } return this; } }; JCore.apply(Array.prototype,ArrayExtendMethod); /*--------------------------------------------Date对象扩展----------------------------------------*/ var DateExtendMethod ={//返回时间间隔(毫秒) getElapsed : function(date) { return Math.abs((date || new Date()).getTime()-this.getTime()); } }; JCore.apply(Date.prototype,DateExtendMethod);
面向对象Javascript核心支持代码分享
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@