返回顶部

浅谈javascript代码的编写的解耦合的必要性

来源:无 发布时间:2016-03-22

前话:

我一直认为js解耦是一个很高级的问题,同时我相信在其它编程语言领域,解耦也是很重要的课题。所以这里只记录我现在对解耦初级的理解,说的不对的地方希望后期能通过不断的实践学习弥补。

现实的需求

因为在公司是一个人负责前端页面这一块的工作,页面不赶的时候还好,可是有时候需求给得很急的时候,你往往就需要加班完成工作了。时间长了,就想到一个提高效率的法子,能不能把前后两个项目相差不太大的地方重复利用起来?毕竟有时项目需求只是很小的变化,完全可以利用先前写过的页面。这样能充分提高工作效率,还能锻炼自己的分析能力。于是我照着这种思路开始去工作,可是发现套起来很困难。究其原因就是前面的代码之间的耦合性太强了。怎么理解耦合性这一概念:我现在的理解是这样的,你写的代码彼此之间的关系“太铁了”,以致于用它其他页面就会报错或者完全不能用。没有了扩展性了,说白一点,就是自己写的代码被写死了,动一下则会伤筋动骨。也许现在很小的代码量我们会觉得这种关系不会很重要而不会放在心上,但是如果写一个复杂的插件的话,这种代码结构带来的问题肯定可想而知的,非常严重的。

解耦的好处

第一:可扩展性强。这点是显而易见的,因为解耦的思想本来就是要把代码彼此之间的“耦合性”减弱。举一个例子,现实中,人物A和人物B的关系如果很强的话,那么这时人物A想进来破坏这种关系,不是不可能,至少不用一些方式是很困难的。解耦的思想就是把这种关系减弱了,现在人物A可以和人物甚至人物D、人物E等很好的融合在一起。看下面的代码,需求是客户端用户触发一个事件的时候,需执行execute函数,该函数需同时去调用另外的两个函数a和b!

方法一:function execute(){
a();
b();
};
function a(){//函数体省略};
function b(){//函数体省略};
这里,execute函数和a及b的关系耦合性太强了,代码细粒度不够,从而代码变得很难扩展,因为execute函数只能执行a和b所能做的事情。

方法二:function execute(fun1,fun2){
fun1();
fun2();
};
function a(){//函数体省略};
function b(){//函数体省略};
execute(a,b);
这里,excute不仅能执行a、b函数所能做的事情,还能执行传入其他的函数所能执行的事情,当然了,因为这里只是举例子,并没有对代码的严谨性做一些处理。比如需要判断的两个参数是否是函数,不过足以说明代码耦合性太强带来的扩展性差的问题了!

第二:可复用性强了。这一点得益于代码的耦合性变弱之后,相应的代码你可以在不同的地方使用了。看下面的代码,需求目前是这样的,定义一个函数,然后获取一个通过dom的id值获取一个节点,然后在执行其他的需求:

方法一:function fun1(){
var dom = document.getElementById("domId");
//后续代码省略
};
fun();//调用
首先这种代码,把fun1和id为domId的关系固定死了,导致后期可能同样的需求你又得重新写一个函数了!

方法二:function fun2(id){
var dom = (typeof id === "string")?document.getElementById(id):id;
//后续代码省略>
};
fun2("domId");//调用
这种方式定义的函数,弱化了方法和id为domId的关系,现在函数在其他地方也能用了,利用率高了,代码量小了,便于后期管理和维护了。

第三,代码的分离性较好,更容易后期维护,保证代码兼容性较好。这一点尤其在大型的项目或插件开发过程中有点尤其明显。怎么理解这一点,你的代码耦合性如果较低的话,更利于你代码中“架构”和“具体实现”的分离。就像盖房子一样,你现在可以把房子的整体房子架构搭起来,然后其它装修什么的可以放到后面做,这两个过程现在是分开的,而且关系并不冲突和矛盾的,这样有利于你思维的分离,更专心去做实现的事情,而不会在一个问题上纠结半天。这部分的内容是比较复杂的,希望后期通过不断实践领会!

我在这里只能以我现在能知道的讲述了js领域解耦简单的部分,断断是不可能几句话能说明清除的。我相信解耦还有很多我现在不能知道的。后期会不断完善这方面的技能!

持续更新中…………………………