博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS设计模式(一)
阅读量:5265 次
发布时间:2019-06-14

本文共 3048 字,大约阅读时间需要 10 分钟。

刚入职时,看过一段时间的设计模式,似懂非懂。不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化、linux、数据库、服务器等的相关知识。

虽然各种模式非常有用,但我们编写业务代码的时候,往往不需要去预先猜测是否需要使用模式,当发现不方便维护和扩展的时候,再编写也不迟。

设计模式的学习主要参考《JavaScript设计模式与开发实践》一书,很多笔记也会从该书抄录。开始JS设计模式的学习。

1.原型模式

  原型模式既是一种设计模式,也是一种编程泛型。原型模式是JS最基础的继承实现,在这儿就不多讲了,写一下JS原型继承的基本原则:

  所有的数据都是对象;

  要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它;

  对象会记住它的原型;

  如果对象无法响应某个请求,它会把这个请求委托给它自己的原型。

2.单例模式

  在写单例模式前,先补一个this的知识点。

  document.getElementById这个方法名实在太长,我们大概尝试过用一个短的函数代替它:

var getId = id => document.getElementById(id);    getId('div1');

  我们也许思考过为什么不能用下面更简单的方式:

var getId = document.getElementById;    getId('div1');

  在Chrome、IE10中执行会发现报错。因为许多引擎的document.getElementById方法内部实现用到了this。这个this本来期望指向document,但用getId来引用document.getElementById后,变成了普通函数调用,this指向了window。

 

  正式开始单例模式。

  单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

  相比于传统的面相对象语言,JS的单例模式很容易实现:

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

  说下这个单例的使用方法。假如我们要在页面里创造一个唯一的登录窗口,给窗口刚创建的时候是隐藏的,通过点击按钮后会显示出来,下面是代码:

var createLoginLayer = function (){            var div = document.createElement('div');            div.innerHTML = '我是登录窗口';            div.style.display = 'none';            document.body.appendChild(div);            return div;        };        var createSingleLoginLayer = getSingle(createLoginLayer);        document.getElementById('loginBtn').onclick = function (){            var loginLayer = createSingleLoginLayer();            loginLayer.style.display = 'block';        };

  这就是这个单例的使用。在本例中,getSingle 返回的return result || (result = fn.apply(this, arguments));可以改成return result || (result = fn()); ,因为apply作用在了window上,而且没有传参,若需要传参的话,还是用apply吧。

 

3.策略模式

  策略模式的定义:定义一系列的算法,把它们一个一个封装起来,并且使它们可以相互替换。以年底绩效考核发奖金为例,绩效为S的员工4倍工资,A的2.7倍工资,B的2倍工资。现在写一段代码,来计算员工的年终奖。

var strategies = {            S: function  (salary) {                return salary * 4;            },            A: function  (salary) {                return salary * 2.7;            },            B: function  (salary) {                return salary * 2;            }        };        var calculateBonus = function  (level, salary) {            return strategies[level](salary);        };        console.log(calculateBonus('S', 20000));

  策略模式的程序至少由两部分组成。第一部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。第二个部分是环境类,环境类接受客户的请求,随后把请求委托给某一个策略类。要做到这点,说明环境类中要维持对某个策略对象的引用。

 

4.代理模式

  代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。代理模式的变体种类非常多,这是写个比较简单的来理解。一个求积程序,可以把它脑补为一个复杂的计算。

var proxyMult = (function  () {            var cache = {};            return function  () {                var args = Array..prototype.join.call(arguments, ',');                if (args in cache) {                    return cache[args];                }                return cache[args] = mult.apply(this,arguments);            }                    })();        proxyMult(1, 2, 3, 4);        proxyMult(1, 2, 3, 4);

 

  

转载于:https://www.cnblogs.com/zhansu/p/6155140.html

你可能感兴趣的文章
实现MyLinkedList类深入理解LinkedList
查看>>
自定义返回模型
查看>>
C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 客户端多网络支持
查看>>
HDU 4122
查看>>
Suite3.4.7和Keil u3自带fx2.h、fx2regs.h文件的异同
查看>>
打飞机游戏【来源于Crossin的编程教室 http://chuansong.me/account/crossincode 】
查看>>
[LeetCode] Merge Intervals
查看>>
【翻译自mos文章】当点击完 finishbutton后,dbca 或者dbua hang住
查看>>
Linux编程简介——gcc
查看>>
一种高效的序列化方式——MessagePack
查看>>
2019年春季学期第四周作业
查看>>
2019春第十周作业
查看>>
解决ThinkPHP关闭调试模式时报错的问题汇总
查看>>
【APT】SqlServer游标使用
查看>>
关于ExecuteNonQuery()返回值为-1
查看>>
Firefox修復QQ快速登錄
查看>>
PAT——1060. 爱丁顿数
查看>>
分布式技术追踪 2017年第二十期
查看>>
git添加公钥后报错sign_and_send_pubkey: signing failed: agent refused operation的解决办法
查看>>
Linux环境变量永久设置方法(zsh)
查看>>