面向对象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 相关文章推荐
javascript 学习笔记(onchange等)
Nov 14 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
JavaScript实现数值自动增加动画
Dec 28 Javascript
微信小程序支付前端源码
Aug 29 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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中mt_rand()随机数函数用法
2014/11/24 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JS location几个方法小姐
2008/07/09 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Python用户自定义异常的实现
2020/12/25 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
自我评价个人范文
2013/12/16 职场文书
实习单位接收函模板
2014/01/10 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
党员检讨书
2014/10/13 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python