js面向对象编程 的好处 一直不能懂得求达人解惑
日期：2014-05-16 浏览次数：20433 次
js面向对象编程 的好处 一直不能理解求达人解惑
首先呢，我没学过任何面向对象的程序语言，
平时js 也用jq多，但是觉得 网站大了 功能多了，很多 函数 功能都大同小异，但是每次都要重写。
所以看书说 如果用面向对象的设计方式 去写函数 扩展性就强很多。不要用面向过程。
但是我一直不知道该如何转变。
比如说 今天接到一个需求，页面上有个倒计时。 需要计算 天数 小时 分钟 秒数
但是之前 又写过一个 分钟，秒数的，没有天数 小时的。结果今天这个又重写了。
但是我觉得 以后假如这个方法要去掉日期，只剩下小时，我改了又很麻烦，感觉分离没做好。
请问对我应该如何 改变思维 用面向对象的想法去设计这个方法。方便扩展 。
------解决方案--------------------
试想一下，如果你要做一个选项卡的切换效果，页面上只有一个区域用到了选项卡，没什么问题，可视，当页面上到处都是选项卡的话，你该怎么处理? 往往你面临的情况没有想象中的简单，比如A div中的选项卡 实现自动切换 是正序，B div 的选项卡切换是倒序，如果你利用面向过程，那么改起来正的挺费劲
这个时候就需要把公共的部分抽象出来封装到一起，通过继承 多态的方法实现这样的需求
在面向对象中，你可能只需要传递一个 div id 外加一些控制参数，调用合适的方法来实现效果即可
你可以分三步走
1.将普通方法中的 公共变量 作为对象中的 this 下面的属性
2.将具体的功能函数 以 对象.protype.方法 的形式展示
3.修改方法中this的指向
------解决方案--------------------
js里的面向对象不是用在这方面的。这种组件，要么你写个大而全的，通过参数设定显示什么内容。要么你写个小而精的，显示日期的跟不显示日期的分成两个东西。
如果你页面里有好几个倒计时的组件，每个组件都得有它自己的配置。这个时候就得面向对象了，显示倒计时的方法是核心的，页面里的组件都继承这个方法，而配置是各个组件独立的。
------解决方案--------------------
同意5楼的说法。
你在设计一个方法的时候，就要决定这个方法以后可以复用到什么程度 。 给你一个例子参考 .
比如我这个项目我需要一个人民币换美元的方法 。
过程可能是这样的 ：
1.去某个网页抓货币兑换率表
2.找出人民币换美元的兑换率
3.把原本的钱 乘或除兑换率 去新的钱
用3个方法完成这一项过程。
那么如果以后还要想要用这个方法的话 。我就得考虑哪些是可能改变的 。比如下一个项目可能不是人民币换美元 。
那么我就得把 人民币换美元写成一个变量通过参数来决定.
如果不同的对换必须要去不同的网页用不同的方式抓取 。
那么我们就得传更多的参数去做设置了 ，甚至把整个抓取的方法重写然后用参数去覆盖从前的方法.
首先呢，我没学过任何面向对象的程序语言，
平时js 也用jq多，但是觉得 网站大了 功能多了，很多 函数 功能都大同小异，但是每次都要重写。
所以看书说 如果用面向对象的设计方式 去写函数 扩展性就强很多。不要用面向过程。
但是我一直不知道该如何转变。
比如说 今天接到一个需求，页面上有个倒计时。 需要计算 天数 小时 分钟 秒数
但是之前 又写过一个 分钟，秒数的，没有天数 小时的。结果今天这个又重写了。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p onclick="clearInterval(t1)"><span id="date"></span></p>
<script language=JavaScript>
function time(obj){
var endTime = obj.endTime;
var now = new Date();
var ms = Date.parse(endTime)-now.getTime();
function showTime(){
var s = ms /1000, min = s/60, h = min/60, d = h/24;
var text = parseInt(d,10)+'天'+addZero({time:parseInt(h%24,10)})+'小时'+ addZero({time:parseInt(min%60,10)})+'分'+ addZero({time:parseInt(s%60,10)})+'秒';
document.getElementById('date').innerHTML = text;
ms-=1000;
}
//个位数补0
function addZero(obj){
if(obj.time < 10){
obj.time = '0'+obj.time;
}
return obj.time;
}
return showTime;
}
var showtime = time({endTime:'3/18/2014 23:59:59'});
var t1 = setInterval("showtime()" ,1000);
</script>
</body>
</html>
但是我觉得 以后假如这个方法要去掉日期，只剩下小时，我改了又很麻烦，感觉分离没做好。
请问对我应该如何 改变思维 用面向对象的想法去设计这个方法。方便扩展 。
------解决方案--------------------
试想一下，如果你要做一个选项卡的切换效果，页面上只有一个区域用到了选项卡，没什么问题，可视，当页面上到处都是选项卡的话，你该怎么处理? 往往你面临的情况没有想象中的简单，比如A div中的选项卡 实现自动切换 是正序，B div 的选项卡切换是倒序，如果你利用面向过程，那么改起来正的挺费劲
这个时候就需要把公共的部分抽象出来封装到一起，通过继承 多态的方法实现这样的需求
在面向对象中，你可能只需要传递一个 div id 外加一些控制参数，调用合适的方法来实现效果即可
你可以分三步走
1.将普通方法中的 公共变量 作为对象中的 this 下面的属性
2.将具体的功能函数 以 对象.protype.方法 的形式展示
3.修改方法中this的指向
------解决方案--------------------
js里的面向对象不是用在这方面的。这种组件，要么你写个大而全的，通过参数设定显示什么内容。要么你写个小而精的，显示日期的跟不显示日期的分成两个东西。
如果你页面里有好几个倒计时的组件，每个组件都得有它自己的配置。这个时候就得面向对象了，显示倒计时的方法是核心的，页面里的组件都继承这个方法，而配置是各个组件独立的。
------解决方案--------------------
同意5楼的说法。
你在设计一个方法的时候，就要决定这个方法以后可以复用到什么程度 。 给你一个例子参考 .
比如我这个项目我需要一个人民币换美元的方法 。
过程可能是这样的 ：
1.去某个网页抓货币兑换率表
2.找出人民币换美元的兑换率
3.把原本的钱 乘或除兑换率 去新的钱
用3个方法完成这一项过程。
那么如果以后还要想要用这个方法的话 。我就得考虑哪些是可能改变的 。比如下一个项目可能不是人民币换美元 。
那么我就得把 人民币换美元写成一个变量通过参数来决定.
如果不同的对换必须要去不同的网页用不同的方式抓取 。
那么我们就得传更多的参数去做设置了 ，甚至把整个抓取的方法重写然后用参数去覆盖从前的方法.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
