面向对象Javascript核心支持代码分享


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 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
前端性能优化及技巧
May 06 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 #Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 #Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 #Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 #Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 #Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 #Javascript
Javascript 面向对象(三)接口代码
May 23 #Javascript
You might like
php如何调用webservice应用介绍
2012/11/24 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python简明入门教程
2015/08/04 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
python实现猜单词游戏
2020/05/22 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
电大会计学自我鉴定
2014/02/06 职场文书
原材料检验岗位职责
2014/03/15 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript