当前位置: 首页 > news >正文

【阅读笔记】JavaScript设计模式与开发实践2--闭包与单例、策略模式

目录

      • 闭包与高阶函数
        • Function 扩展函数
        • 柯里化函数
      • 单例模式
        • 透明的单例模式
        • 惰性单例
      • 策略模式
        • 策略模式发展
        • 策略模式实现

闭包与高阶函数

Array.prototype.sort 接受一个函数当作参数,用户可以自行在该函数内指定排序方式

// 由小到大排序
let res = [1, 4, 2].sort((a, b) => {return a - b;
});
console.log(res);

Function 扩展函数

通过对 Function 原型执行扩展,可以达到类似装饰器的效果,这也是 AOP 风格的体现

Function.prototype.before = function (beforefn) {var __self = this; // 保存原函数的引用return function () {// 返回包含了原函数和新函数的"代理"函数beforefn.apply(this, arguments); // 执行新函数,修正thisreturn __self.apply(this, arguments); // 执行原函数};
};Function.prototype.after = function (afterfn) {var __self = this;return function () {var ret = __self.apply(this, arguments);afterfn.apply(this, arguments);return ret;};
};var func = function () {console.log(2);
};func = func.before(function () {console.log(1);}).after(function () {console.log(3);});func(); // 1,2,3

柯里化函数

currying 又称部分求值。一个 currying 的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值

var currying = function (fn) {var args = [];// 当调用柯里函数时不带任何参数,直接执行所有栈中函数// 当调用柯里函数时带入了参数,就会向args压入一个新的带参函数return function () {if (arguments.length === 0) {return fn.apply(this, args);} else {[].push.apply(args, arguments);return arguments.callee;}};
};// 将cost写成一个IIFE函数,之后其将转变为柯里函数
var cost = (function () {var money = 0;return function () {for (var i = 0, l = arguments.length; i < l; i++) {money += arguments[i];}return money;};
})();var cost = currying(cost); // 转化成currying函数cost(100); // 未真正求值
cost(200); // 未真正求值
cost(300); // 未真正求值
alert(cost()); // 求值并输出:600

单例模式

透明的单例模式

传统单例模式,需要你知道当前对象是单例的,且可以调用 getInstance 方法获取其实例

可以使用代理的方式管理单例,而对象本身不处理代理相关逻辑

var CreateDiv = function (html) {this.html = html;this.init();
};CreateDiv.prototype.init = function () {var div = document.createElement("div");div.innerHTML = this.html;document.body.appendChild(div);
};// 使用代理创建以及识别单例
var ProxySingletonCreateDiv = (function () {var instance;return function (html) {if (!instance) {instance = new CreateDiv(html);}return instance;};
})();var a = new ProxySingletonCreateDiv("sven1");
var b = new ProxySingletonCreateDiv("sven2");alert(a === b); // true

惰性单例

将获取单例的方法单独抽离出来,通过此方法获取对象的单例

var getSingle = function (fn) {var result;return function () {return result || (result = fn.apply(this, arguments));};
};

策略模式

策略模式的目的就是将算法的使用与算法的实现分离开来

策略模式发展

假设有这么一个场景:需要通过员工名字及其薪水计算奖金

经典方法需要每次接收对应的两个参数,方法内需要大量的 ifelse 做逻辑覆盖,并且缺乏弹性违背开闭原则;


策略模式实现

var strategies = {S: function (salary) {return salary * 4;},A: function (salary) {return salary * 3;},B: function (salary) {return salary * 2;},
};var calculateBonus = function (level, salary) {return strategies[level](salary);
};console.log(calculateBonus("S", 20000)); // 输出:80000
console.log(calculateBonus("A", 10000)); // 输出:30000
http://www.lryc.cn/news/38971.html

相关文章:

  • 设计模式(二十)----行为型模式之责任链模式
  • 数据持久化层--冷热分离
  • Ubuntu16.04系统 VSCode中python开发插件的安装
  • buuctf-pwn write-ups (12)
  • Linux- 系统随你玩之--网络上的黑客帝国
  • Python每日一练(20230312)
  • 人生又有几个四年
  • 第九章:Java集合
  • 嵌入式学习笔记——STM32的USART通信概述
  • MySQL性能优化
  • C语言/动态通讯录
  • 我用Compose做了一个地图轮子OmniMap
  • STM32之SPI
  • 02 深度学习环境搭建
  • PHP导入大量CSV数据的方法分享
  • 代码看不懂?ChatGPT 帮你解释,详细到爆!
  • 【MyBatis】篇三.自定义映射resultMap和动态SQL
  • 什么是API?(详细解说)
  • 比cat更好用的命令!
  • MySQL、HBase、ElasticSearch三者对比
  • Vue+ElementUI+Vuex购物车
  • Android 录屏 实现
  • 【CSAPP】家庭作业2.55~2.76
  • Python操作MySQL数据库详细案例
  • MicroBlaze系列教程(8):AXI_CAN的使用
  • 网络安全领域中八大类CISP证书
  • stm32学习笔记-5EXIT外部中断
  • MySQL Workbench 图形化界面工具
  • 雪花算法(SnowFlake)
  • Linux防火墙