您当前的位置:首页 > 电脑百科 > 软件技术 > 软件技术

前端常用设计模式

时间:2020-03-16 13:31:30  来源:  作者:

前端常见的设计模式主要有以下几种:
1. 单例模式
2. 工厂模式
3. 策略模式
4. 代理模式
5. 观察者模式
6. 模块模式
7. 构造函数模式
8. 混合模式

  • 单例模式
    这种设计模式的思想是确保一个类只有唯一实例,一般用于全局缓存,比如全局window,唯一登录浮窗等。采用闭包的方式实现如下:
  •  
前端常用设计模式

 

  • 工厂模式
    工厂模式是创建对象的常用设计模式,为了不暴露创建对象的具体逻辑,将逻辑封装在一个函数中,这个函数就称为一个工厂。本质上是一个负责生产对象实例的工厂。工厂模式根据抽象程度的不同可以分为:简单工厂,工厂方法和抽象工厂。通常用于根据权限生成角色的场景,抽象工厂方法的实现如下:
//安全模式创建的工厂方法函数
let UserFactory = function(role) {
  if(this instanceof UserFactory) {
    var s = new this[role]();
    return s;
  } else {
    return new UserFactory(role);
  }
}

//工厂方法函数的原型中设置所有对象的构造函数
UserFactory.prototype = {
  SuperAdmin: function() {
    this.name = "超级管理员",
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理']
  },
  Admin: function() {
    this.name = "管理员",
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据']
  },
  NormalUser: function() {
    this.name = '普通用户',
    this.viewPage = ['首页', '通讯录', '发现页']
  }
}

//调用
let superAdmin = UserFactory('SuperAdmin');
let admin = UserFactory('Admin') 
let normalUser = UserFactory('NormalUser')
  • 策略模式
    策略模式的本意将算法的使用与算法的实现分离开来,避免多重判断调用哪些算法。适用于有多个判断分支的场景,如解决表单验证的问题。你可以创建一个validator对象,有一个validate()方法。这个方法被调用时不用区分具体的表单类型,它总是会返回同样的结果——一个没有通过验证的列表和错误信息。实现方式如下:
// 对于vip客户
function vipPrice() {
    this.discount = 0.5;
}
 
vipPrice.prototype.getPrice = function(price) {
  return price * this.discount;
}
// 对于老客户
function oldPrice() {
    this.discount = 0.3;
}
 
oldPrice.prototype.getPrice = function(price) {
    return price * this.discount;
}
// 对于普通客户
function Price() {
    this.discount = 1;
}
 
Price.prototype.getPrice = function(price) {
    return price ;
}

// 上下文,对于客户端的使用
function Context() {
    this.name = '';
    this.strategy = null;
    this.price = 0;
}
 
Context.prototype.set = function(name, strategy, price) {
    this.name = name;
    this.strategy = strategy;
    this.price = price;
}
Context.prototype.getResult = function() {
    console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price));
}

var context = new Context();
var vip = new vipPrice();
context.set ('vip客户', vip, 200);
context.getResult();   // vip客户 的结账价为: 100

var old = new oldPrice();
context.set ('老客户', old, 200);
context.getResult();  // 老客户 的结账价为: 60

var Price = new Price();
context.set ('普通客户', Price, 200);
context.getResult();  // 普通客户 的结账价为: 200
  • 代理模式
    代理模式是为其他对象提供一种代理,也就是当其他对象直接访问该对象时,如果开销较大,就可以通过这个代理层控制对该对象的访问。常见的使用场景为懒加载,合并http请求和缓存。代理模式的实现如下:
(function(){
    // 目标对象,是真正被代理的对象
    function Subject(){}
    Subject.prototype.request = function(){};

    function Proxy(realSubject){
        this.realSubject = realSubject;
    }
    Proxy.prototype.request = function(){
        this.realSubject.request();
    };
}());
  • 观察者模式
    也叫发布订阅模式,在这种模式中,一个订阅者订阅发布者,当一个特定的事件发生的时候,发布者会通知(调用)所有的订阅者。实现代码如下:
var EventCenter = (function(){
    var events = {};
    function on(event, handler){
        events[event] = events[event] || [];
        events[event].push({
            handler: handler
        });
    }

    function fire(event, args){
        if (!events[event]) {return}
        for (var i = 0; i < events[event].length; i++) {
            events[event][i].handler(args);
        }
    }

    function off(event){
        delete events[event];
    }

    return {
        on: on,
        fire: fire,
        off: off
    }
})();

EventCenter.on('event', function(data){
console.log('event received...');
});
  • 模块模式
    模块模式可以指定类想暴露的属性和方法,并且不会污染全局。采用闭包的形式,实现如下:
var Person = (function() {
    var name = 'xxx'
    function sayName() {
        console.log(name)
    }
    return{
        name: name,
        sayName: sayName
    }
})()
  • 构造函数模式和混合模式
    构造函数和混合模式就是js中继承的两种实现方式,前者通过构造函数的形式定义类,通过new新增实例。而后者是将构造函数的引用属性和方法放到其原型上,子类是父类原型的一个实例。


Tags:前端   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者:maomincoding 来源:前端历劫之路 前言说起文档,我们可能会第一时间会想起很多技术文档,比如Vue.js文档、React.js文档、TypeScript文档,它们都有相似的布局和样式。那么,作为...【详细内容】
2021-12-23  Tags: 前端  点击:(8)  评论:(0)  加入收藏
作者:damyxu,腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足...【详细内容】
2021-12-16  Tags: 前端  点击:(17)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  Tags: 前端  点击:(20)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  Tags: 前端  点击:(15)  评论:(0)  加入收藏
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: 前端  点击:(15)  评论:(0)  加入收藏
本文参考内容:京东凹凸实验室前端代码规范 :https://guide.aotu.io/docs/js/react.html vue风格指南:https://cn.vuejs.org/v2/style-guide/index.htm HTML规范<!-- HTML文件...【详细内容】
2021-12-02  Tags: 前端  点击:(20)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: 前端  点击:(19)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个由百度开源的低代码前端框架&mdash;&mdash;amis...【详细内容】
2021-11-05  Tags: 前端  点击:(68)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: 前端  点击:(34)  评论:(0)  加入收藏
很多新手司机倒车一直秉承着驾校遗留习惯的执念,就是要找个特别准的点打轮倒车。在直角倒车入库时,一般垂直距离需要大于1.5米,才能保证在点位准确的情况下,顺利完成倒车入位。...【详细内容】
2021-11-01  Tags: 前端  点击:(41)  评论:(0)  加入收藏
▌简易百科推荐
现在很多手机的摄像头都会比电脑的高,因此有不少小伙伴想要在有些时候用手机摄像头代替电脑摄像头,那么具体应该如何操作呢?下面就和小编一起来看看连接手机摄像头的方法吧。更...【详细内容】
2021-12-28  装机吧    Tags:Win10   点击:(2)  评论:(0)  加入收藏
今天教大家通过windows的CMD终端查看WIFI密码 使用管理权限打开CMD 查看本机连接过WIFI名称netsh wlan show profiles 查询某一个WIFI的密码比如这里我想查询猪猪侠的...【详细内容】
2021-12-27  吉祥同学学安全    Tags:wifi密码   点击:(1)  评论:(0)  加入收藏
从本质上来讲,PE系统最广泛的用途只是用来安装系统。通过其内置的Ghost软件来调用第三方的GHO系统镜像来完成系统的安装。从表面来看,最终的系统是否纯净、是否安全,与Gho镜像...【详细内容】
2021-12-27  u盘装系统    Tags:pe工具   点击:(3)  评论:(0)  加入收藏
Safari是苹果在iPhone和iPad上的默认网络浏览器。虽然我们天天都在使用,但是,你是否深入研究了Safari的所有功能和设置?"无痕浏览"、"阅读器"视图和下载文件等标准选项只是其...【详细内容】
2021-12-16  趣玩公社    Tags:Safari   点击:(21)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  GitHub精选    Tags:插件   点击:(23)  评论:(0)  加入收藏
给电脑安装软件,最让人担心的就是安装到“拖家带口”的,而这样的手法正是国产软件惯用的!全家桶自动安装、软文弹窗等等,这些让我们讨厌的却是软件的直接收入来源。 那么在你安...【详细内容】
2021-12-15  老毛桃winpe    Tags:软件   点击:(18)  评论:(0)  加入收藏
不知道你是否遇到过这么一种情况:在一个A4大小的图框画一个接近满框的图形,在打印的时候却发现图形很小根本不符合模型空间的实际情况。看似明显是比例问题,但又不知道究竟是什...【详细内容】
2021-12-14  设计师小仁君    Tags:CAD   点击:(21)  评论:(0)  加入收藏
哈喽大家好! 前几天一个朋友向我疯狂吐槽。 快到年底了,公司要统计年度数据。 需要把一月到十二月份,十二张表格的数据,全部汇总到一个表格内。 这样的数据汇报每年都会有,每到年...【详细内容】
2021-12-14  秋叶Excel    Tags:Excel   点击:(23)  评论:(0)  加入收藏
我发现最近不少小叶子的留言都和 Excel 相关,我寻思是时候出一期解决 Excel 疑难杂症的小合集了。于是毛毛在众多问题中,挑了三个被问次数最多的有关 Excel 的问题,今天就来给...【详细内容】
2021-12-14  叶PPT    Tags:Excel   点击:(30)  评论:(0)  加入收藏
大家好,我是Stark-C。油猴简介【油猴】一款免费的浏览器扩展和最为流行的用户脚本管理器,它是一个附加组件(扩展程序),让用户安装一些脚本使大部分HTML为主的网页改变得更方便易...【详细内容】
2021-12-13  什么值得买    Tags:油猴   点击:(46)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条