javascript 面向對象,實現(xiàn)namespace,class,繼承，重載

更新時間：2009年10月29日 22:50:06 作者：

這幾天老大天天嚷嚷要重構我們寫的javascript,抱怨代碼太混亂，可讀性差，維護困難，要求javascript也按面對象的模型來重構。

由于組里項目大多的javascript，css等客戶端工作是另一同事在負責，該同事又特忙無法重構，老大也就只是提建議并未立即實施重構。但是我前些日子也改過些許客戶端的小bug，確實那代碼看得讓人有些云里霧里，不知身在哪山，輕易不敢動代碼，于是就自己動手鼓搗起我曾又愛又恨的javascript來，自己寫一個簡單的js實現(xiàn)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 面向對象的實現(xiàn) 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>