LRU（最近最少使用）缓存机制在前端开发中的实际应用

一、 需求：检查项里面配有摄像头。可重复配置，初始化播放前三个视频，然后点播放视频a，
1. a如果和当前列表重复，则此视频高亮。并且将a的顺序调到最后面
2. A如果是新视频，则替换列表中最前面操作的视频

二、业务调用
初始化三个视频

let len = 3
this.cameraNodes = new LRUcache(len)
 for(var i=0; i<len; i++){
     //这里闭包传入i 保证i是正确的0，1.。。而不是都是len
     (function(i){
         //使用延时是因为要ref.init有接口调用，
         setTimeout(() => {
             let { deviceCode, deviceName } = this.allCameraList[i],
                 cameraItem = this.cameraNodes.get(deviceCode),
                 ref = {}

             if (!cameraItem) {  
                 ref = this.$refs.sVideo[i]
                 cameraItem = {
                     deviceCode,
                     deviceName,
                     ref,
                     refIndex: i
                 }

                 this.cameraNodes.put(deviceCode, cameraItem)
                 ref.init({ deviceCode, deviceName })

             } else {
                 i--   //前三个也可能会重复。如若重复。i不作自增
             }
         }, 1000)
     }).bind(this)(i)
 }

三、 LRU设计实现
设计一个队列keys、 缓存对象cache，len：播放列表数

1. keys是一个大小为len的队列数组 ，按照操作的先后顺序 存下视频的key，
2. cache 存下key对应的值

var LRUCache = function(max) {
    this.max = max
    //存入key: value
    this.cache = Object.create(null)
    //队列先入先出 保存当前坑位对应的key  最新的操作在最后面  
    this.keys = []
}

LRUCache.prototype.put = function(key, value) {
    //新的值如果存在，等同于get操作
    if(!this.get(key)){
        //超出最大值 队列最先的值要被替换
        if(this.keys.length >= this.max) {
            let changedDevice = this.cache[this.keys[0]]
            
            //和业务dom有关的逻辑： 当发生覆盖之后 将dom和index赋值
            value.ref = changedDevice.ref
            value.refIndex = changedDevice.refIndex

            this.cache[this.keys[0]] = null
            this.keys.shift()
        } 
        this.cache[key] = value
        this.keys.push(key)
    }
}

LRUCache.prototype.get = function(key) {
    let value = this.cache[key]

    //取已经存在的元素，将元素提到最后，
    if(value) {
        remove(this.keys, key)
        this.keys.push(key)
    }
    
    return value || null
}

function remove(arr, key) {
    let index = arr.indexOf(key)

    arr.splice(index, 1)
}

export default LRUCache