设计模式与实践

2019-11-24 本文已影响0人 fanstastic

多态：同一操作作用于不同对象上面，可以产生不同的解释和不同的执行结果。给不同的对象发送同一个消息，这些对象会根据消息给出不同的反馈。

首先我们把不变的部分抽离出来，就是所有动物都会发出叫声

let makeSound = (animal) => { animal.sound() }
var Duck = function () {}
Duck.prototype.sound = () => { console.log(ggg) }
class Duck {
  sound () {
    
  }
}

类型检查和多态
现在使用java实现

public class Duck {
 public void makeSound() {
   // ggg
 }
}  
public class AnimalSound {
 public void makeSound( Duck duck ) {
   duck.makeSound();
 }
}

此时，我们只能让鸭叫，为了解决这种问题，静态类型的面向对象语言可以设计为向上转型；当给一个类变量赋值时，这个变量的类型既可以这个类本身，也可以是使用这个类的超类。
使用继承得到多态效果，是让对象表现出多态性的最常用手段。
我们首先创建一个Animal抽象类，再分别让Duck和chicken都继承自Animal抽象类
js的根对象是Object.prototype

对象没有原型，只能说对象的构造器有原型，对象把请求委托给构造器的原型，
js给对象提供了一个proto的隐藏属性，proto默认会指向它的构造器的原型对象，proto就是就是对象和构造器原型对象联系起来的纽带。

当对象a需要继承对象b的能力时，可以让a的构造器的原型指向对象b，达到继承的效果

var obj = {}
function A() {}
A.prototype = obj

当我们期望得到一个类继承另一个类的时候的时候

function A () {}
A.prototype = { name: 'hhh' }

function B() {}
B.prototype = new A()

实例在查找属性时，先查找实例本身，在查找实例的构造函数，在查找构造函数的原型继承的构造函数的实例。。。。
原型链并不是无限长，终点是Object.prototype = undefined
通过Object.create(null)可以创建一个没有原型对象的对象

this, call, apply

js的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。
func.apply(null, [1, 2, ,3])
func.call(null, 1, 2, 3) 改变函数里的this，后续的参数是func执行时的参数
第一个参数代表this在func中的指向
如果是null，浏览器默认指向null

document.getElementById = () => {}
func.prototype.bind = function(context) {
  return () => {
      this.call(context, ...arguments)
  }
}

在bind函数内部，先把func函数引用保存，然后返回一个新的函数，执行func的时候，实际上执行的是新函数。在执行的内部才是执行原来的func函数，并且指定context对象为func函数体内的this。

借用其他对象的方法

借用构造函数

var A = function(name) {
  this.name = name
}

var B = function() {
  
}

闭包
闭包和变量作用域，生存周期密切相关。函数执行会形成作用域，变量的搜索会随着执行函数的作用域链逐层搜索.
var Tv = {
open: function() {

}
}
高阶函数

函数可以作为参数被传递
函数可以作为返回值输出

判断数据类型
var isString = (obj) => Object.prototype.toString.call(obj) == '[object string]'
var isArray = (obj) => Object.prototype.toString.call(obj) == '[Object array]'
var isNumber = (obj) => Object.prototype.toString.call(obj) == '[Object Number]'
单例模式

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

高阶函数实现aop
在js中实现aop，都是把一个函数“动态植入”到另一个函数中，我们使用原型扩展

Function.prototypr.before = function(beforefn) {
  var _self = this; // 这_sel里的this指向调用的对象
  return function() {
     beforeFn()
      return _self.apply(this)
  }
}
var func = function() {
  console.log(2)
}

func = func.before(function() {
    console.log(1)
}).after(function() { console.log(3) })

func()

调用before的是func这个函数

curry

let cost = (function(){
  var args = []
  return () => {
    
  }
})()

var currying = function(fn) {
  var args = []
  return fucntion() {
      // 根据参数判断是求值还是保存值 
  }
}

Function.prototype.uncurry = function() {
  var self = this;
  return function() {
    var obj = Array.prototype.shift.call(arguments)
    return self.apply(obj)
  }
}

函数节流
面临的问题是函数被触发的频率太高。
throttle函数的原理是将即将被执行的函数用settimeout延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来的函数请求。

var throttle = (fn, interval) => {
  var self = fn;
  timer, // 用一个标识标识定时器是否结束
  firsttime
  return (...args) => {
     if (firsttime) {
          self()
          return firsttime = false
      }   
      // 如果定时器存在，说明上一次的执行还没有结束
      if (timer) {
          return false
      }
      timer = setTimeout (() => {
           // 每次定时器一执行就清除当前定时器
          clearTimeout(timer)
          timer = null;
          
      }, interval || 500)
  } 
}

分时函数
函数被频繁调用时，可以使用节流，当一个列表中有成千上百的好友时，当创建列表时，要创建成千上百个的节点会让浏览器卡死
所以我们需要一个timechunk函数，它可以让创建节点的工作分批进行，比如1s创建一千个，改成每隔200ms创建8个节点。

var timeChunk  = (ary, fn, count) => {
  var obj, t;
  var len=ary.length
  var start = () => {  }
  return () => {
    t = serInterval(() => {
        if (!ary.length) { claearInterval(t) }
    })
  }
}

单例模式
单例模式的定义是：一个类只有一个实例，并提供一个全局的访问点
线程池，全局缓存，浏览器中的window对象唯一的登录浮窗,用一个变量标志当前是否已经为某个类创建过对象，下一次获取类的实例时，直接返回之前创建的对象

// 通过闭包保存单例标识
  function A (name) { this.name = name }
    A.prototype.getIns = (() => { var ins = null;return (name) => {
         if (!ins) { ins = new A(name) }   return ins
    }})()

透明的单例模式

var Create = (() => {
  var instance;
  // 构造函数执行的时候，如果存在实例，则直接返回实例
  var Create = function (html) {
    if (instance) return instance
    this.html = html
    this.init = ()
    return instance = this
  }
  Create.prototype.init = () => { var div = document.createElement('div')
      div.innerHTML = this.html
      document.body.appendChild(div)    
 }
  return  Create
})()

var a = new Create('sc')
var b = new Create('sv')

将创建instance从构造函数中抽离出来

var proxyCreate = (() => { var instance = null; return (html) => {
      van instance;
      if (!instance) instance = new Create(html)
      return instance
} })()

策略模式
本质是多种途径达到目的地
策略模式的定义是：定义一系列算法，把它们一个个封装起来，并且可以使它们相互替换。
使用策略模式计算奖金
一个策略模式至少由两部分组成。第一部分是策略类，策略类封装了具体的算法，并负责具体的计算过程。第二部分是环境类context，context接受客户的请求，随后把请求委托给策略类。context中要维持对某个策略对象的引用。
首先我们封装策略类，将具体的计算过程封装在策略类中.

var performanceS = function() {}
performanceS.prototype.calculate  = function(salary) {
    return salary * 4;
}

var performanceA = function() {}
performanceS.prototype.calculate  = function(salary) {
    return salary * 3;
}

var performanceB = function() {}
performanceS.prototype.calculate  = function(salary) {
    return salary * 2;
}

vae Bonus = function () {
  this.salary = null;
  this.stratery = null;
}

Bonus.prototype.setSalary = function(salary) { this.salary = salary }
Bonus.prototype.setStratery = function(stratery) { this.stratery = stratery }
Bonus.prototype.getBonus = function() { return this.stratery.calculate(this.salary) }

通过使用策略模式重构的代码，我们消除了源程序中大片的条件分支语句。

实现动画效果的原理
动画片是把一些差距不大的原画以较快的帧数播放
表单校验
首先把校验封装成对象

var strategies = {
  isNoneEmpty: (value, errorMsg) => { if (!value) return errorMsg},
  minLength: () => 
}
 var validataFunc = () => {
  var validator = new Validator()
  validator.add(regis.userName, 'isNoneEmpty', 'userName不能为空')
  var errorMsg = validator.start()
  return errorMsg
}

当我们往validator对象里添加完一系列的校验规则之后，通过start方法来启动校验，

var Validator = function(){ this.cache = [] }
Validator.prototype.add = (dom, rule, errorMsg) => {
   var ary = rule
}
Validator.prototype.start = () => {
  for (var i=0, validatorFunc; )
}

代理模式
代理模式是为一个对象提供一个代用品或者占位符

var Flower = function(){}
var xiaoming = {
  sendFlower: function(target) {
      var flower = new Flower()
      target.receiveFlower(flower)
   }
}
var B = {
  receiveFlower: (flower) => {
    A.listenGoodMood(() => {
      A.receiveFlower(flower)
    })
  }
}
xiaoming.sendFlower(B)

保护代理和虚拟代理
代理B可以帮助代理A过滤掉一些请求，比如年龄太大，这种请求可以直接在代理B中被拒绝。这种代理叫保护代理。
另外，假设现实中的花价格不菲，new Flower也是一个代价昂贵的操作，可以放到A心情好的时候去创建。虚拟代理可以把一些开销很大的操作，延迟到真正需要的时候去创建。
使用虚拟代理实现图片的预加载
代理和本体接口的一致性
如果有一天，我们不需要再预加载，那么就不再需要代理对象，可以直接选择请求本体。其中关键是代理对象和本体都对外提供了setSrc方法，在客户看来，代理对象和本体是一致的，代理接手请求的过程对于用户透明，用户不清楚代理和本体的区别，这样有两个好处：

用户可以放心的使用代理，它只关心是否能得到想要的结果。
在任何使用本体的地方都可以替换成使用代理

在java等语言中，代理和本体都需要显示的实现同一个接口，一方面接口保证了它们会使用同样的方法，另一方面，通过接口向上转型，避开编译器的类型检查，代理和本体将来可以被替换使用。

虚拟代理合并请求
虚拟代理在惰性加载中的应用
未真正加载js之前的代码

let cache = []
let minConsole = {
  log: (...args) => {cache.push(() => {  })}
}

当用户按下f2的时候

设计模式与实践

this, call, apply

猜你喜欢

热点阅读