面向对象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 相关文章推荐
js传值 判断
Oct 26 Javascript
jquery实现图片切换代码
Oct 13 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
在node中如何使用 ES6
Apr 22 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php判断当前操作系统类型
2015/10/28 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Python ORM编程基础示例
2020/02/02 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
软件工程师面试题
2012/06/25 面试题
《生命 生命》教学反思
2014/04/19 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
大学生工作自荐书
2014/06/16 职场文书
门面房租房协议书
2014/08/20 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
java版 简单三子棋游戏
2022/05/04 Java/Android