JS 常见知识点(设计模式)

JS原生 专栏收录该内容
5 篇文章 0 订阅

概念

  • 是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结

    • 为什么要用?
      • 为了代码的可重用性、让代码更容易被他人理解、保证代码的可靠性。设计模式使代码的编写真正的工程化

常用设计模式

  • 构造器模式,模块化模式,暴露模块模式,单例模式,中介者模式,原型模式,命令模式,外观模式,工厂模式,Mixin模式,装饰模式,亨元(Flyweight)模式,MV*模式,组合模式,适配器模式,外观模式,观察者模式,迭代器模式,惰性初始模式,代理模式,建造者模式,…

  • 设计模式是在面向对象编程中被使用

    • 面向对象:内功
    • 设计模式:招式

工厂模式

  • 批量创建对象

  • 特点:原料对象,属性或方法的加工,返回

  • 语法:

    • 构造函数创建对象

          function Fn(){
              this.name = "admin"
          }
          var f = new Fn();
      
    • 封装成函数

          function fn(){
              var obj = {};
              obj.name = "admin";
              return obj;
          }
          var f = fn();
      

单例模式

  • 只能创建单个对象,和工厂模式相对
  • 特点:每次创建得到的都是同一个对象
  • 单个对象
    • var obj = {};
  • 利用构造函数实现单例模式

组合模式

  • 将类或对象按照一定的关系,组合起来。可以实现批量执行的功能。
  • 一般应用在动态的html结构上
  • 组合成树状结构,对象节点
    • 根对象
    • 枝对象:具有子对象的节点
    • 叶对象:不具有子对象的节点
  • 节省操作
  • 性能消耗大
  • 先创建一个,组合器
    • 在组合对象

适配器模式

  • 适配器,将原本不符合接口的数据或信息,包装成符合的数据或信息,这个包装,就叫适配器

  • 工厂:手机,平板(非通话)

    • 只有一个测试部门
    • 按照最全的功能测试
      • 手机:打电话,玩游戏,听音乐
      • 平板:玩游戏,听音乐
  • 适配器的意义,多数应用在系统接口使用,也就是别人提供了一个功能,但要求传入一个A类型的参数,而我们手里的数据是B类型的,如果我们想使用这个功能。那么有两种解决办法:

    1. 把自己的原代码进行修改,让B类型改为A类型,这是非常蠢的做法。
    2. 我们把B类型的数据进行一个包装,让它看起来符合类型A,这个包装函数,就是适配器。

观察者模式(发布订阅者)

  • 订阅者(观察方,接收对象):接收信息
  • 发布者(被观察方,主体对象):发布信息
  • js中的事件监听式绑定事件和触发

代理模式

  • 代理,委托

  • 系统功能A,系统调用,会产生数据的传输

  • 给系统功能A做个代理,让系统调用代理

  • 代理功能自定义完成,截获,另作他用,另行加工

  • 事件委托

  • 服务器代理

策略模式

  • 功能的执行方式
  • 策略,战术,计划
  • 提前将可能发生的情况都考虑到位,并给出对应的解决方案
  • 场景:
    • 轮播图中左右按钮的区分
    • 左右移动方向的确定
    • 小标被点击时的方向

MVC模式

- M:model:模型,数据
- V:view:视图
- C:ctrl:控制器

1. 用户/系统调用控制器发起指令
2. 控制器接收到指令,根据指令调用对应的模型
3. 模型返回数据,控制器保存数据
4. 控制器根据指令,调用对应的视图
5. 将保存的数据,发给视图
6. 视图做数据的渲染
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值