返回列表 发新帖

[科技] 前端常用设计模式

[复制链接]

18

主题

18

帖子

36

积分

耍耍新手

Rank: 1

积分
36
发表在  2020-1-11 10:48:57 | 显示全部楼层 | 阅读模式
求关注
前端常见的计划模式重要有以下几种:
1. 单例模式
2. 工厂模式
3. 策略模式
4. 署理模式
5. 观察者模式
6. 模块模式
7. 构造函数模式
8. 混合模式

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

105245wxltvlh9l1vvlr8t.jpg




  • 工厂模式
    工厂模式是创建对象的常用计划模式,为了不袒露创建对象的具体逻辑,将逻辑封装在一个函数中,这个函数就称为一个工厂。本质上是一个负责生产对象实例的工厂。工厂模式根据抽象程度的差别可以分为:简朴工厂,工厂方法和抽象工厂。通常用于根据权限生成脚色的场景,抽象工厂方法的实现如下:
//安全模式创建的工厂方法函数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客户 的结账价为: 100var old = new oldPrice();context.set ('老客户', old, 200);context.getResult();  // 老客户 的结账价为: 60var 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].handler(args);        }    }    function off(event){        delete events[event];    }    return {        on: on,        fire: fire,        off: off    }})();EventCenter.on(&#39;event&#39;, function(data){console.log(&#39;event received...&#39;);});

  • 模块模式
    模块模式可以指定类想袒露的属性和方法,而且不会污染全局。采取闭包的情势,实现如下:
var Person = (function() {    var name = &#39;xxx&#39;    function sayName() {        console.log(name)    }    return{        name: name,        sayName: sayName    }})()

  • 构造函数模式和混合模式
    构造函数和混合模式就是js中继承的两种实现方式,前者通过构造函数的情势定义类,通过new新增实例。而后者是将构造函数的引用属性和方法放到其原型上,子类是父类原型的一个实例。

声明:信息来源于主流新闻平台,如有侵权联系管理员删除(我爱旅游网 www.cysua.com)。
回复

使用道具 举报

12

主题

79

帖子

91

积分

铁牌耍客

Rank: 2

积分
91
发表于 2020-1-11 12:49:20 | 显示全部楼层
路过 帮顶 嘿嘿
回复

使用道具 举报

21

主题

75

帖子

96

积分

铁牌耍客

Rank: 2

积分
96
发表于 2020-1-25 15:18:02 | 显示全部楼层
报告!别开枪,我就是路过来看看的。。。
回复

使用道具 举报

21

主题

89

帖子

110

积分

铁牌耍客

Rank: 2

积分
110
发表于 2020-2-5 12:07:25 | 显示全部楼层
不错 支持一个了
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表