当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 面向对象,实现namespace,class,继承，重载

Javascript
javascript实现的鼠标链接提示效果生成器代码
javascript实现动态CSS换肤技术的脚本
一个即时表单验证的javascript代码
javascript之dhDataGrid Ver2.0.0代码
syntaxhighlighter 使用方法
建立良好体验度的Web注册系统ajax
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
JTrackBar水平拖动效果
用JTrackBar实现的模拟苹果风格的滚动条
非常不错的javascript 图片慢慢下层效果
网上应用的一个不错common.js脚本
alixixi runcode.asp的代码不错的应用
用javascript实现点击链接弹出"图片另存为"而不是直接打开
用javascript实现给图片加链接
document.styleSheets[0].rules 与 cssRules区别
javascript 控制超级链接的样式代码
一个刚完成的layout（拖动流畅，不受iframe影响）
写了一个layout，拖动条连贯，内容区可为iframe
用JS实现网页元素阴影效果的研究总结
js下在password表单内显示提示信息的解决办法

No. « 205 206 207 208 »

技术文章搜索

关键字

Javascript 中的 javascript 面向对象,实现namespace,class,继承，重载

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 309 ::
收藏到网摘: n/a

这几天老大天天嚷嚷要重构我们写的javascript,抱怨代码太混乱，可读性差，维护困难，要求javascript也按面对象的模型来重构。 由于组里项目大多的javascript，css等客户端工作是另一同事在负责，该同事又特忙无法重构，老大也就只是提建议并未立即实施重构。但是我前些日子也改过些许客户端的小bug，确实那代码看得让人有些云里雾里，不知身在哪山，轻易不敢动代码，于是就自己动手鼓捣起我曾又爱又恨的javascript来，自己写一个简单的js实现namespace,继承，重载等面向对象的特性.欢迎拍砖灌水
.定义namespace
Namesapce.js
复制代码 代码如下:

Namespace = new Object();
Namespace.register = function(fullname){
try
{
var nsArray = fullname.split(".");
var strNS = "";
var strEval = "";
for(var i=0;i<nsArray.length;i++){
if(strNS.length >0)
strNS += ".";
strNS += nsArray[i];
strEval += " if(typeof("+ strNS +") =='undefined') " + strNS + " = new Object(); ";
}
if(strEval != "") eval(strEval);
}catch(e){alert(e.message);}
}

.Employee.js
Employee.js
复制代码 代码如下:

//注册命名空间
Namespace.register("MyCompany");
//1.类:雇员
MyCompany.Employee = function(empName){
this.Name = empName;
this.Salary = 1000;
this.Position = "cleaner";
}
MyCompany.Employee.prototype.ShowName = function(){
return "I'm "+this.Name+",my salary is $" + this.Salary;
}
MyCompany.Employee.prototype.Work = function(){
return "I'm a "+ this.Position +",I'm cleaning all day!"
}
//2.类:程序员
MyCompany.Developer = function(empName){
//继承父类属性
MyCompany.Employee.call(this,empName);
//覆盖父类属性
this.Position = "developer";
//扩展属性
this.Technology = "C#";
}
//继承父类原型方法
MyCompany.Developer.prototype = new MyCompany.Employee();
//覆盖父类方法
MyCompany.Developer.prototype.Work = function(){
return "I'm a "+ this.Position +",i'm good at "+ this.Technology +",i'm coding all day!"
}

测试代码
复制代码 代码如下:

<html>
<title>javascript 面向对象的实现 namespace,class,继承，重载</title>
<head>
<script language="javascript" src="namespace.js" type="text/javascript"></script>
<script language="javascript" src="employee.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function showEmployee(){
var emp = new MyCompany.Employee("xiaoming");
showInfo(emp);
}
function showDeveloper(){
var emp = new MyCompany.Developer("Gates");
showInfo(emp);
}
function showInfo(emp){
alert(emp.ShowName());
alert(emp.Work());
}
</script>
</head>
<body>
<input type="button" value="show employee info" onclick="showEmployee();"/><br/><br/>
<input type="button" value="show developer info" onclick="showDeveloper();"/>
</body>
</html>

源代码打包下载