一,总体概要

OO(面向对象)概念的提出是软件开发工程发展的一次革命,多年来我们借助它使得很多大型应用程序得以顺利实现。如果您还没有掌握并使用OO进行程序设计和开发,那么您无疑还停留在软件开发的石器时代。大多数编程语言,尤其是近年问世的一些语言,都很好的支持了面向对象,您可能对此了如执掌,但是一些语言在OO方面却无法与其它高级语言相比,在这些语言上进行面向对象程序设计和开发会有些困难,例如本文要讨论的JavaScript。JavaScript是一门古老的语言,但是随着近期Web2.0 技术的热捧,这门语言又重新焕发出青春的光辉,借助于JavaScript客户端技术,我们的Web体验变得丰富而又精彩,为了设计和开发更加完善、复杂的客户端应用,我们必须掌握JavaScript上的OO方法,这正是本文要讨论的。

当今 JavaScript 大行其道,各种应用对其依赖日深。web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学习和深入理解。所以,经常出现的情况是,很多做了多年 JS 开发的程序员对闭包、函数式编程、原型总是说不清道不明,即使使用了框架,其代码组织也非常糟糕。这都是对原生 JavaScript 语言特性理解不够的表现。要掌握好 JavaScript,首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的干扰,全面地从函数式语言的角度理解 JavaScript 原型式面向对象的特点。把握好这一点之后,才有可能进一步使用好这门语言。本文适合群体:使用过 JS 框架但对 JS 语言本质缺乏理解的程序员,具有 Java、C++ 等语言开发经验,准备学习并使用 JavaScript 的程序员,以及一直对 JavaScript 是否面向对象模棱两可,但希望知道真相的 JS 爱好者。

言归正传,我们切入主题------Javascript的面向对象编程。要谈Javascript的面向对象编程,我们第一步要做的事情就是忘记我们所学的面向对象编程。传统C++或Java的面向对象思维来学习Javascript的面向对象会给你带来不少困惑,让我们先忘记我们所学的,从新开始学习这门特殊的面向对象编程。既然是OO编程,要如何来理解OO编程呢,记得以前学Java,学了很久都不入门,后来有幸读了《Java编程思想》这本大作,顿时豁然开朗,因此本文也将以对象模型的方式来探讨的Javascript的OO编程。因为Javascript 对象模型的特殊性,所以使得Javascript的继承和传统的继承非常不一样,同时也因为Javascript里面没有类,这意味着Javascript里面没有extends,implements。那么Javascript到底是如何来实现OO编程的呢?好吧,让我们开始吧,一起在Javascript的OO世界里来一次漫游。

二,案例引入

(1)场景人物简介

主人公甲------大耳文老师 (软件行业领域的骨灰级程序猿)

主人公乙------大熊君 (初出茅庐的菜鸟程序员)

关系------ 工作上的上下级,私底下的师徒

(2)话题开展

有一天这师徒二人午饭后闲聊起来,突然聊起ATM取款机,大耳文老师说取款机对人们的日常生活帮助真是很大,同时也提高了银行的生产力,这项发明和我们的软件行业也是分不开的,大熊君说是啊老师,一些实用的操作提供了便捷的功能,这时大耳文老师微微一笑说道,那么你知道这些功能是如何实现的吗,满满自信的大熊君回答说:简单啊就是一些像存钱,取钱,转账的简单功能,老师我现在就写给你看。。。。未完待续

(3)实例讲解,循序渐进

十分钟过后大熊君把一份转账操作部分的代码给老师看,老师笑了(呵呵)

1 functionTransferTransaction(fromAccount,toAccount,balance){2 this.fromAccount =fromAccount ;3 this.toAccount =toAccount ;4 this.balance =balance ;5 } ;6 TransferTransaction.prototype ={7 transfer : function(){8 this.toAccount = this.fromAccount -balance ;9 } ,10 getFromAccount : function(){11 return this.fromAccount ;12 } ,13 getToAccount : function(){14 return this.toAccount ;15 } ,16 getBalance : function(){17 return this.balance ;18 }19 } ;20

21 var tt = new TransferTransaction(1000,3000,100) ;22 tt.transfer() ;23 tt.getToAccount() ;

View Code

老师说道大熊你这代码是有问题的,大熊没有想太多直接回答说,没有啊老师我这是面向对象写的啊,老师很有耐心的说道:先别着急听我给你讲。

首先先不说面向对象就功能而言也是有问题的,假设我的转出账户就是fromAccount要是余额为0那,不就会出现问题了吗,大熊,大熊看了一下很难为情地说奥 是啊  您稍等一下 大熊回去又作修改。。。。未完待续

改完了这下没问题了吧

1 functionTransferTransaction(fromAccount,toAccount,balance){2 this.fromAccount =fromAccount ;3 this.toAccount =toAccount ;4 this.balance =balance ;5 } ;6 TransferTransaction.prototype ={7 transfer : function(){8 if(this.fromAccount

24 var tt = new TransferTransaction(1000,3000,100) ;25 tt.transfer() ;26 tt.getToAccount() ;

View Code

老师看了看说道基本功能是做到,但这样设计是很低效的,并且很多设计原则 也违反了。

大熊疑惑的问到为什么那,老师说如果现在新的需求来了比如根据账户的等级划分会有不同级别的转账金额你如何处理那?比如vip级别最多可以转账5000,Normal级别至多为1000你试试看,好的老师,您稍等。。。。未完待续

1 functionTransferTransaction(fromAccount,toAccount,balance,rank){2 this.fromAccount =fromAccount ;3 this.toAccount =toAccount ;4 this.balance =balance ;5 this.rank =rank ;6 } ;7 TransferTransaction.prototype ={8 transfer : function(){9 var transBalance = 1000;10 if("vpi" == this.rank){11 transBalance = 5000;12 }13 if(this.balance >transBalance){14 throw new Error("您的转账金额超出了规定范围!") ;15 }16 if(this.fromAccount < this.balance){17 throw new Error("余额不足!") ;18 }19 this.fromAccount = this.fromAccount - this.balance ;20 this.toAccount = this.toAccount + this.balance ;21 } ,22 getFromAccount : function(){23 return this.fromAccount ;24 } ,25 getToAccount : function(){26 return this.toAccount ;27 } ,28 getBalance : function(){29 return this.balance ;30 }31 } ;32

33 var tt = new TransferTransaction(1000,3000,20000,"vip") ;34 tt.transfer() ;35 tt.getToAccount() ;

View Code

哈哈哈老师我完成了,很快就写出来了(*^__^*) 嘻嘻……

大耳文老师看了下代码说道,恩改的不错,但依然还是有问题存在的,咱们回头说面向对象,你的代码书写方式确实符合了面向对象的特点,但是思想还停留在过程化的设计思想上。

这时大熊君过来很谦虚的说道请老师指点 。。。 未完待续

几分钟过后老师总结出一些例子中的问题

1.职责多需要分解

2.抽象实体模型

3.依赖性强可扩展低

咱们来一步步分析和重构

首先你的对象完成了很多职责比如 级别过滤 金额比对 异常处理  这些都不属于转账的核心功能  应该划分出来

还有就是 在转账操作时 Account应该是一个实体数据模型  应该独立出来 不应该在具体业务方法中出现 这也违背了(迪米特法则)一种软件设计法则,稍后会提供扩展阅读链接(*^__^*)

重构分为几个步骤去设计:

1,建立Account类

1 functionAccount(balance,rank){2 this.balance =balance ;3 this.rank =rank ;4 } ;5 Account.prototype ={6 getBalance : function(){7 return this.balance ;8 }9 getRank : function(){10 return this.balance ;11 }12 } ;

View Code

2,重新设计TransferTransaction类

1 functionTransferTransaction(fromAccount,toAccoun){2 this.fromAccount =fromAccount ;3 this.toAccount =toAccount ;4 } ;5 TransferTransaction.prototype ={6 transfer : function(balance){7 var transBalance = 1000;8 if("vpi" == this.this.fromAccount.getRank()){9 transBalance = 5000;10 }11 if(this.fromAccount.getBalance() >transBalance){12 throw new Error("您的转账金额超出了规定范围!") ;13 }14 if(this.fromAccount.getBalance()

View Code

3,增加新的转账管理类TransTManager类(主要负责周边功能任务)

1 functionTransTManager(fromAccount,toAccoun){2 this.fromAccount =fromAccount ;3 this.toAccount =toAccount ;4 this.transferTransaction = null;5 } ;6 TransTManager.prototype ={7 transfer : function(balance){8 var transBalance = 1000;9 if("vpi" == this.this.fromAccount.getRank()){10 transBalance = 5000;11 }12 if(this.fromAccount.getBalance() >transBalance){13 throw new Error("您的转账金额超出了规定范围!") ;14 }15 if(this.fromAccount.getBalance()

View Code

4,接下来设计会员的级别类每个等级作为一个类出现(引用策略模式)

1 functionNormalDiscount(){2

3 } ;4 NormalDiscount.prototype ={5 getDiscount : function(){6 return 3000;7 }8 } ;9 functionVIPDiscount(){10

11 } ;12 VIPDiscount.prototype ={13 getDiscount : function(){14 return 5000;15 }16 } ;

View Code

5,经过重构后思维会清晰很多而且更加面向对象了,其实思维往往比语言本身重要得多

以下是完整的案例代码

1 functionAccount(balance,rank){2 this.balance =balance ;3 this.rank =rank ;4 } ;5 Account.prototype ={6 getBalance : function(){7 return this.balance ;8 }9 getRank : function(){10 return this.balance ;11 }12 } ;13

14 functionTransferTransaction(fromAccount,toAccoun){15 this.fromAccount =fromAccount ;16 this.toAccount =toAccount ;17 } ;18 TransferTransaction.prototype ={19 transfer : function(balance){20 this.fromAccount.setBalance(this.fromAccount.getBalance() - balance) ;21 this.toAccount.setBalance(this.toAccount.getBalance() + balance) ;22 } ,23 getFromAccount : function(){24 return this.fromAccount ;25 } ,26 getToAccount : function(){27 return this.toAccount ;28 }29 } ;30

31 functionTransTManager(fromAccount,toAccoun){32 this.fromAccount =fromAccount ;33 this.toAccount =toAccount ;34 this.transferTransaction = null;35 this.rankVendor ={36 "normal": {37 get : function(){38 return 1000;39 }40 } ,41 "vip": {42 get : function(){43 return 5000;44 }45 }46 } ;47 } ;48 TransTManager.prototype ={49 transfer : function(balance){50 var transBalance = this.rankVendor[this.fromAccount.getRank()]["get"]() ;51 if(this.fromAccount.getBalance() >transBalance){52 throw new Error("您的转账金额超出了规定范围!") ;53 }54 if(this.fromAccount.getBalance()

62 var tt = new TransTManager(new Account(5000,"vip"),new Account(3000,"Normal")) ;63 tt.transfer(3000) ;

三,名词解释

(1)迪米特法则:迪米特法则(Law of Demeter)又叫作最少知识原则(Least Knowledge Principle 简写LKP),就是说一个对象应当对其他对象有尽可能少的了解,不和陌生人说话。英文简写为: LoD.

(2)实体模型:实体类一般对应物理意义上的实体,业务类则是对一些业务规则(算法)的封装,比如User,是一个实体类,它有属性,Login这里就算一个业务

四,总结一下

1.类的职责不能多,职责多需要分解

2.抽象实体模型

3.理解oo的特质封装,继承,多态

这时传来了大耳文老师的声音:好了中午休息结束了我们要工作了。。。。。。(此篇章已结束,未完待续(*^__^*) 嘻嘻……)

webatm取款操作_大话JS面向对象之开篇万物皆对象------(ATM取款机引发的深思)...相关推荐

  1. javascript”面向对象编程”- 1万物皆对象

    javascript几乎成了如今web开发人员必学必会的一门语言,但很多人却只停在了一些表单验证等基础操作层面上,在面向对象语言大行其道的当下,我们需要去学习javascript的面向对象的知识,以便 ...

  2. 你还认为JS中万物皆对象?

    经常在国内的各大网站博客上看到一句话,叫做JS中万物皆对象,那是否真是如此? 那么,我们先来捋一捋JS中的数据类型,JS中的数据类型有下面几种 Undefined Null Boolean Numbe ...

  3. js对象:从万物皆对象说起

    经常见很多文章中说:在js中万物皆对象,但真的万物皆对象吗?答案肯定是否定的 先不说概念性的东西,我们随便定义一些变量,然后打印出他们的类型,看如下代码: //先定义一些变量; var iNum = ...

  4. java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)

    原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...

  5. 没有run窗口_学会了面向对象,还怕没有对象?

    面向对象是一种编程思想,我们通过类(构造函数)和对象实现的面向对象编程,满足下述三个特定:封装.继承和多态. 封装 封装创建对象的函数 封装即把实现一个功能的代码封装到一个函数中,以后实现这个功能,只 ...

  6. JS入门篇-万物皆对象

    万物即是对象,这是我看<悟透javascript>第一部分最强烈的印象.接下来我来理一下书中第一部分的脉络. 书中告诉我们,在编程的世界里就是数据和实现的逻辑,接下来讲了在JS中,万物皆是 ...

  7. js检测鼠标是否在操作_原生JS趣味demo:炫酷头像鼠标追随效果的实现

    我们常在一些网页中 可以看到鼠标追随效果 一个简单的图片.动画 甚至一小段文字 都可以作为鼠标跟随的载体 之前咱们的直播课中 老师也讲过相关的canvas追随粒子特效 今天 就让我们一起来用原生js ...

  8. java银行atm存取款系统_各位大佬,如何用JAVA实现银行ATM机的用户登录以及存取款...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 package com.wooyoo.learning.bank; import java.util.Scanner; public class test ...

  9. js面向对象的程序设计 --- 上篇(理解对象)

    前言 ECMAScript中没有类的概念,因此它们的对象与基于类的语言中的对象有所不同. ECMA-262把对象定义为:"无序的集合属性,其属性可以包含基本值,对象或者函数".正因 ...

最新文章

  1. python list去掉引号_python的一些易忘知识点
  2. 隐马尔科夫模型-EM模型-混合理解
  3. 在D-Bus适配器中声明槽
  4. 电脑常见故障处理_彩超常见故障及维修
  5. Vue 教程第一篇——基础概念
  6. 数据库原理--事务(一)
  7. springMVC4(14)各类视图输出实例分析
  8. 【BZOJ】3963: [WF2011]MachineWorks
  9. 移动通信原理、技术与系统——概述
  10. mac日历与iphone日历不无法同步问题
  11. mac + win ,用python一行代码批量下载哔哩哔哩视频
  12. aruba AP密码忘记恢复出厂设定
  13. 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.0
  14. Arduino UNO AT24C32进行字符串数据读写
  15. 设置linux服务器同步时间
  16. 什么是递归查询,迭代查询?
  17. Dubbo——Merger的实现
  18. Python 多项式预测2019年天猫销售额
  19. 艾司博讯:拼多多开专营店需要多少保证金
  20. 综合搜索大全-115搜索

热门文章

  1. spi通信协议_arduino的SPI通信
  2. ZYNQ_MP启动过程分析
  3. 教资面试计算机硬件真题,初中信息技术教资面试真题:保存图文-复制并保存文字...
  4. k2 虚拟服务器,2U虚拟化vGPU云桌面服务器/4片GRID K2/双12核E52651V2/256G内存
  5. [渝粤教育] 四川农业大学 Java程序设计 参考 资料
  6. 在C#开发WPF桌面应用程序调用OCX控件
  7. Qt 容器控件之Tab Widget 使用详解
  8. 外卖跑腿app平台开发
  9. ipad1电池激活(长时间不用,电量过低,无法开机和充电)
  10. Fabric区块链架构说明