javascript 面向?qū)ο?實現(xiàn)namespace,class,繼承,重載
更新時間:2009年10月29日 22:50:06 作者:
這幾天老大天天嚷嚷要重構(gòu)我們寫的javascript,抱怨代碼太混亂,可讀性差,維護(hù)困難,要求javascript也按面對象的模型來重構(gòu)。
由于組里項目大多的javascript,css等客戶端工作是另一同事在負(fù)責(zé),該同事又特忙無法重構(gòu),老大也就只是提建議并未立即實施重構(gòu)。但是我前些日子也改過些許客戶端的小bug,確實那代碼看得讓人有些云里霧里,不知身在哪山,輕易不敢動代碼,于是就自己動手鼓搗起我曾又愛又恨的javascript來,自己寫一個簡單的js實現(xiàn)namespace,繼承,重載等面向?qū)ο蟮奶匦?歡迎拍磚灌水
.定義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";
//擴(kuò)展屬性
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 面向?qū)ο蟮膶崿F(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>
源代碼打包下載
.定義namespace
Namesapce.js
復(fù)制代碼 代碼如下:
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
復(fù)制代碼 代碼如下:
//注冊命名空間
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";
//擴(kuò)展屬性
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!"
}
測試代碼
復(fù)制代碼 代碼如下:
<html>
<title>javascript 面向?qū)ο蟮膶崿F(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>
源代碼打包下載
您可能感興趣的文章:
- JavaScript面向?qū)ο笾甈rototypes和繼承
- Javascript面向?qū)ο缶幊蹋ǘ?構(gòu)造函數(shù)的繼承
- 徹底理解js面向?qū)ο笾^承
- javascript 面向?qū)ο笕吕砭氈屠^承
- JS實現(xiàn)面向?qū)ο罄^承的5種方式分析
- Javascript面向?qū)ο缶幊蹋ㄈ?非構(gòu)造函數(shù)的繼承
- JS 面向?qū)ο笾^承---多種組合繼承詳解
- javascript 面向?qū)ο笕吕砭氈^承與多態(tài)
- javascript 面向?qū)ο蠓庋b與繼承
- javaScript面向?qū)ο罄^承方法經(jīng)典實現(xiàn)
- 《javascript設(shè)計模式》學(xué)習(xí)筆記二:Javascript面向?qū)ο蟪绦蛟O(shè)計繼承用法分析
相關(guān)文章
JavaScript 基于原型的對象(創(chuàng)建、調(diào)用)
在我們寫js代碼的時候,內(nèi)部對象是不可避免的要引用,但是光靠這些對象是不夠的,所以需要我們自己定義對象,這個時候通常用到的對象是第三種,即基于原型的對象,下面就如何創(chuàng)建自己的對象,定義對象的方法、屬性,調(diào)用對象給出詳細(xì)的說明。2009-10-10討論javascript(一)工廠方式 js面象對象的定義方法
看《javascript高級程序設(shè)計》有感2009-12-12js面向?qū)ο笤O(shè)計用{}好還是function(){}好(構(gòu)造函數(shù))
js面向?qū)ο笤O(shè)計用{}好還是function(){}好,大家給予了回復(fù),感覺不錯,特分享給大家。2011-10-10JavaScript 常見對象類創(chuàng)建代碼與優(yōu)缺點分析
這幾種javascript類定義方式中,最常用的是雜合prototype/constructor 和 動態(tài)prototype方式。2009-12-12