javascript 面向对象,实现namespace,class,继承,重载


Posted in Javascript onOctober 29, 2009

由于组里项目大多的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>

源代码打包下载
Javascript 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
轻松搞定js表单验证
Oct 13 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
js的三种继承方式详解
Jan 21 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 #Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 #Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 #Javascript
jquery 选择器部分整理
Oct 28 #Javascript
JavaScript 全角转半角部分
Oct 28 #Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 #Javascript
javascript 时间比较实现代码
Oct 28 #Javascript
You might like
Use Word to Search for Files
2007/06/15 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python 处理图片像素点的实例
2019/01/08 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
应届毕业生如何写求职信
2014/02/16 职场文书
大班亲子运动会方案
2014/06/10 职场文书
英文演讲稿开场白
2014/08/25 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
教师先进事迹材料
2014/12/16 职场文书
委托书格式要求
2015/01/28 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
人事任命通知
2015/04/20 职场文书
写给女朋友的保证书
2015/05/09 职场文书
房贷收入证明范本
2015/06/12 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
小学记事作文之200字
2019/08/06 职场文书
详解Redis主从复制实践
2021/05/19 Redis
Python连续赋值需要注意的一些问题
2021/06/03 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript