代码要写成别人看不懂的样子（二）

最新推荐文章于 2024-08-02 17:27:20 发布

原创最新推荐文章于 2024-08-02 17:27:20 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 同时被 2 个专栏收录

60 篇文章

订阅专栏

设计模式

28 篇文章

订阅专栏

文章目录

前言

上一期我们，浅尝辄止，稍微介绍了下代码如何写才能更高级，更有内涵，主要是需要配合继承，或是某些数据特性来说。这一节咱们放个大招，运用兵法来写代码，保证初学者看不懂，既便能看懂，也不知道为什么这样做，即便知道为什么这样做，没有系统学习过的人也做不好，也说不出个所以然来。

这部兵法就是– 设计模式 。
在这里插入图片描述

何为设计模式？

古有云：“何谓虽练无益？今一营之卒为炮手者常十也。不知兵法五兵迭用，当长以卫短，短以救长，一也。”

（翻译成人话）

意思就是训练要有意义，不能瞎练。类比到我们写代码，就是要按照一定的章法，什么时候改写什么，怎么写，要符合核心思想，这样写出来的代码，美观，漂亮，可维护性强，不易出错，而且关键的是，别人看不懂。

那么核心思想是什么，就是 根据你的目的去筛选要使用的设计模式 ，比如说现在有一个需求，让你给一个天气预报的功能块下方增加一个 PM 指数的展示，当然你可以直接在天气预报的方法最下面增加一个展示 PM 值的小方法。

不过这样就污染了原先的函数，导致函数功能不单一，第一不好维护，第二，复用不方便。当有别处需要使用天气功能，但是不想添加 PM 值的时候，该函数又得修改，判断是何处调用的，来确定要不要执行 PM 方法。

那么该怎么解决这个问题，才是符合兵法的呢？

我们可以给 Function 函数的原型上设置一个 after 方法，让这个方法在执行完函数后触发，这样把显示 PM 的方法放到 after 里面，不会对原函数造成污染，而且需要的时候，加上 after 函数，不需要的时候，我们就不使用 after ，也保证了原函数的复用性。

具体做法如下：

//在执行函数 前 执行
Function.prototype.before = function (beforefn) {
	let _self = this;                         //保存原函数引用
	return function () {                      //返回包含了原函数和新函数的"代理函数"
		beforefn.apply(this, arguments);      //执行新函数，修正this
		return _self.apply(this, arguments);  //执行原函数
	}
};

//在执行函数 后 执行
Function.prototype.after = function (afterfn) {
	let _self = this;
	return function () {
		var ret = _self.apply(this, arguments);
		afterfn.apply(this, arguments);
		return ret;
	}
};

上面在Function的原型上，增加了两个方法，一个 before ，一个 after ， before 会在函数执行前先执行， after 会在函数执行后立即执行。

使用的时候只需要指定对应的函数即可，如下：

let func = function () {
    console.log('天气预报')；
}
func = func.before(function () {
	console.log('天气预报之前执行的函数');
}).after(function () {
	console.log('之后执行的PM方法');
});
func();//天气预报之前执行的函数
	   //天气预报
	   //之后执行的PM方法