面向对象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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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 Class 文章
2007/04/04 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python使用response.read()接收json数据的实例
2018/12/19 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python requests使用socks5的例子
2019/07/25 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
python raise的基本使用
2020/09/10 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
给女儿的表扬信
2014/01/18 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
南京大屠杀观后感
2015/06/02 职场文书
中学教师教学工作总结
2015/08/13 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB