面试加分项之 如何提高代码的可扩展性

前言

面试的过程中，除了一些必考点之外，还会经常出现一些“综合能力的考验”，例如：你是如何保证自己的代码质量？或者说你平常是如何提高自己代码的可扩展性的？如果在此之前你没有研究过，没有充分的准备，在这个问题上，很可能你就失去了一次相当加分的机会；那么接下来，为你奉上新鲜热辣的专题之：《如何提高代码的可扩展性》。

1.提高可扩展性的目的

1.1 为了面对产品经理“日益变更”的“合理”需求。

1.2 减少对已写完的代码修改的难度，总不能让你自己都不想看之前自己写过的代码吧。

2.什么是好的可扩展性

核心思想：充分解耦。 2.1 做到面对需求的变更，不需要重写代码

2.2 代码的修改不会引起大规模变动

2.3 方便加入新模块

3.更好的更改代码方法：

两种设计模式：

3.1 针对接口的修改：适配器模式

目的：通过写一个适配器，来代替替换
应用场景：面临接口不通用的问题
核心思想：基于老接口，包装成新接口
基本结构：例如：
var log = (function(){
	return window.console.log
}())
log(1234) //1234

应用示例：
需求：项目之前用的a框架，现在要改成b框架，
两个框架功能类似但有几个方法有区别（例如功能相近，但方法名不一样），需再改动小的情况下灵活适配b框架。
例如：

1.框架变更：将$.css 改成 A.c
window.A = $;
A.C = (function(){
	return $.css.apply(arguments)
})
2.“参数适配”：为了避免参数不适配产生问题，很多框架需要一个参数适配操作。
 2.1 检测参数（参数是保证代码健壮性的第一要求）
    function fn1(obj){
      var _defaultObj = {
      	name:"默认星",
        familyName:"默认张"
      }
      for (var item in _defaultObj){
      //检测传入参数，如果对应属性有值，会覆盖，若无值，则采用默认参数，防止必要参数因为缺失影响程序执行。
      	_defaultObj[item] = obj[item] || _defaultObj[item] 
      }
      console.log(`欢迎${_defaultObj.familyName}${_defaultObj.name}`)
    }

3.2 针对方法的修改：装饰者模式

装饰者模式的目的：不重写方法实现扩展的方法
装饰者模式的应用场景：当一个方法需要扩展，但是又不方便修改方法的时候
核心思想：不直接修改原先定义的函数，而采用一个新的函数调用原先的a.b方法，
在调用之后再执行需要“扩展”的代码
基本结构：
举例：现有需求如下，有一个第三方的模块a，含有方法b，在不能修改模块a的基础上，如何扩展模块b？

var a = {
	b:function(){
    	console.log(123)
    }
}
function useB(){
	a.b();
	xxx //扩展的业务逻辑
}

实战示例：
1.需求:接手了一个老项目，如果对一个已经写好的click事件，
在不改变原先执行触发的情况下，添加一些click触发后要执行的其他的逻辑操作
var decoration = function(dom,addFn){ //dom代表传入的dom对象,addFn代表需扩展的事件
    var _old = dom.onclick;
    if (typeof dom.onclick == 'function'){
       dom.onclick = function(){
	   		_old()
        	addFn()
		}
    
    }
}
decoration(dom,function(){ //只需调用decoration,即可不改变原先点击事件基础上实现扩展。
    console.log('扩展操作')
})

3.3 针对方法与调用的修改：命令模式

核心思想：在调用方法与实现层之间添加一个命令层
命令模式的目的：解耦函数与调用，让双方互不干扰
命令模式的应用场景：调用的命令充满不确定性
基本结构：
var command = (function(){
	var action = {
    	//实现层
    }
    return function excute(){
    	//命令层代码
    }
}())

以上就是针对代码可扩展性的学习笔记，希望能对您有所帮助。