javascript 面向?qū)ο?實(shí)現(xiàn)namespace,class,繼承，重載
更新時(shí)間：2009年10月29日 22:50:06 作者：
這幾天老大天天嚷嚷要重構(gòu)我們寫(xiě)的javascript,抱怨代碼太混亂，可讀性差，維護(hù)困難，要求javascript也按面對(duì)象的模型來(lái)重構(gòu)。
由于組里項(xiàng)目大多的javascript，css等客戶(hù)端工作是另一同事在負(fù)責(zé)，該同事又特忙無(wú)法重構(gòu)，老大也就只是提建議并未立即實(shí)施重構(gòu)。但是我前些日子也改過(guò)些許客戶(hù)端的小bug，確實(shí)那代碼看得讓人有些云里霧里，不知身在哪山，輕易不敢動(dòng)代碼，于是就自己動(dòng)手鼓搗起我曾又愛(ài)又恨的javascript來(lái)，自己寫(xiě)一個(gè)簡(jiǎn)單的js實(shí)現(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
//注冊(cè)命名空間
Namespace.register("MyCompany");
//1.類(lèi):雇員
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.類(lèi):程序員
MyCompany.Developer = function(empName){
//繼承父類(lèi)屬性
MyCompany.Employee.call(this,empName);
//覆蓋父類(lèi)屬性
this.Position = "developer";
//擴(kuò)展屬性
this.Technology = "C#";
}
//繼承父類(lèi)原型方法
MyCompany.Developer.prototype = new MyCompany.Employee();
//覆蓋父類(lèi)方法
MyCompany.Developer.prototype.Work = function(){
return "I'm a "+ this.Position +",i'm good at "+ this.Technology +",i'm coding all day!"
}
測(cè)試代碼
<html>
<title>javascript 面向?qū)ο蟮膶?shí)現(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ù)制代碼 代碼如下:
//注冊(cè)命名空間
Namespace.register("MyCompany");
//1.類(lèi):雇員
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.類(lèi):程序員
MyCompany.Developer = function(empName){
//繼承父類(lèi)屬性
MyCompany.Employee.call(this,empName);
//覆蓋父類(lèi)屬性
this.Position = "developer";
//擴(kuò)展屬性
this.Technology = "C#";
}
//繼承父類(lèi)原型方法
MyCompany.Developer.prototype = new MyCompany.Employee();
//覆蓋父類(lèi)方法
MyCompany.Developer.prototype.Work = function(){
return "I'm a "+ this.Position +",i'm good at "+ this.Technology +",i'm coding all day!"
}
測(cè)試代碼
復(fù)制代碼 代碼如下:
<html>
<title>javascript 面向?qū)ο蟮膶?shí)現(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實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析
- Javascript面向?qū)ο缶幊蹋ㄈ?非構(gòu)造函數(shù)的繼承
- JS 面向?qū)ο笾^承---多種組合繼承詳解
- javascript 面向?qū)ο笕吕砭氈^承與多態(tài)
- javascript 面向?qū)ο蠓庋b與繼承
- javaScript面向?qū)ο罄^承方法經(jīng)典實(shí)現(xiàn)
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記二：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法分析
相關(guān)文章
不錯(cuò)的JavaScript面向?qū)ο蟮暮?jiǎn)單入門(mén)介紹
JavaScript是一門(mén)OOP，而有些人說(shuō)，JavaScript是基于對(duì)象的。2008-07-07
js類(lèi)中獲取外部函數(shù)名的方法與代碼...2007-09-09
Javascript面向?qū)ο髷U(kuò)展庫(kù)代碼分享
最近一直在用js做項(xiàng)目，遇到了許多需要應(yīng)用面向?qū)ο髞?lái)設(shè)計(jì)的功能，由于js對(duì)OOP的原生支持還不是很完善，所以就寫(xiě)了一個(gè)面向?qū)ο蟮臄U(kuò)展庫(kù)用做底層支持，現(xiàn)在把它單獨(dú)整理出來(lái)，完善了一些功能，在這里分享一下2012-03-03
JavaScript中沒(méi)有類(lèi)的概念，與類(lèi)相關(guān)的繼承的概念更是無(wú)從談起，但是我們可以通過(guò)特殊的語(yǔ)法來(lái)模擬面向?qū)ο笳Z(yǔ)言中的繼承。2011-07-07
手把手教你自己寫(xiě)一個(gè)js表單驗(yàn)證框架的方法
其實(shí)我自己也就能簡(jiǎn)單用用js而已，但是呢，相對(duì)很多初學(xué)者來(lái)說(shuō)多懂了點(diǎn)Know How所以斗膽孟浪一下，將一些所得記錄下來(lái)，以供更多的初學(xué)者能夠知道一個(gè)東西的實(shí)現(xiàn)過(guò)程，省去在源碼里摸索的過(guò)程。2010-09-09
javascript 面向?qū)ο?實(shí)現(xiàn)namespace,class,繼承，重載
這幾天老大天天嚷嚷要重構(gòu)我們寫(xiě)的javascript,抱怨代碼太混亂，可讀性差，維護(hù)困難，要求javascript也按面對(duì)象的模型來(lái)重構(gòu)。2009-10-10
javascript中類(lèi)的定義及其方式(《javascript高級(jí)程序設(shè)計(jì)》學(xué)習(xí)筆記)
javascript也是一種面向?qū)ο蟮木幊陶Z(yǔ)言。但是javascript中的類(lèi)相關(guān)的東西(類(lèi)的定義，原型鏈，繼承等)卻不是很好理解，特別是繼承。2011-07-07
JavaScript面向?qū)ο笾o態(tài)與非靜態(tài)類(lèi)
使用JavaScript面向?qū)ο笸耆鲇谂既唬驗(yàn)榇蟛糠謺r(shí)間我都是在無(wú)圖形界面的環(huán)境下工作，有時(shí)候就算是介入了web客戶(hù)端的工作的時(shí)候，在寫(xiě)js和ajax時(shí)，最多的也只是寫(xiě)寫(xiě)function，從沒(méi)有考慮過(guò)要使用JavaScript面向?qū)ο筮@么高級(jí)的技巧。2010-02-02
一個(gè)小型的框架，想制作自己框架的朋友可以參考下，他們的實(shí)現(xiàn)原理，快速的個(gè)性定制自己的框架。2009-03-03
面向?qū)ο蟮腏avascript之二(接口實(shí)現(xiàn)介紹)
接口是面向?qū)ο驤avascript工具箱中最有用的特性之一。我們都知道GOF在設(shè)計(jì)模式中說(shuō)到：面向接口編程，而非面向?qū)崿F(xiàn)編程2012-01-01