Wang Wei's Blog

源码学习总结

1. 函数柯里化的使用，如patch部分。

2. 工具类纯函数的封装和解耦，不管多小的功能，如判断值是否有效，!== null || !== undefined 也可以封装成纯函数。

3. 代码中节点的处理使用了深度优先的思想和递归。

4. 闭包。善用闭包，将简单的暂存操作也可以提取成闭包进行代码优化。

5. 策略模式。options的合并策略。

6. 链表数据结构。类似链表的数据结构建立组件间的父子关系。

7. 确保函数只执行一次。

   export function once (fn: Function): Function {
     let called = false
     return function () {
       if (!called) {
         called = true
         fn.apply(this, arguments)
       }
     }
   }

patch

patch 的整体流程： createComponent -> 子组件初始化 -> 子组件 render -> 子组件patch

activeInstance 为当前激活的 vm 实例；vm.$vnode 为组件的占位 vnode；vm._vnode 为组件的渲染 vnode。

基本数据类型

指简单的数据段。基本数据类型存储在栈内存中。

不能给基础数据类型添加属性。

• 存储原始数据类型
• 按值访问
• 存储的值大小固定
• 由系统自动分配内存空间
• 空间小，运行效率高
• 先进后出，后进先出

String

ES6

Array.prototype.flat()

拉平数组，变成一维的数组，返回一个新数组。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flat()的参数默认为1，表示只会拉平1层。如果要拉平多层则传入参数，表示想要拉平的层数。

发布订阅者模式

1. 消息中心：负责存储消息与订阅者的对应关系，有消息触发时，负责通知订阅者
2. 订阅者：去消息中心订阅自己感兴趣的消息
3. 发布者：满足条件时，通过消息中心发布消息

实现

var broastEvent = {
    // 消息监听队列
    clientList: {},
    // 订阅（监听）消息
    listen: function(observer, action) {
        if (clientList[observer]) { // 如果已经存在订阅消息了
            this.clientList[observer].push(action) // 新增监听
        } else {
            this.clientList[observer] = [].concat(action)
        }
    },
    // 发布（触发）消息
    trigger: function(observer, ...args) {
        const actionList = this.clientList[observer] || []
        if (actionList.length > 0) {
            actionList.forEach(fn => {
                fn(...args)
            })
        }
    },
    // 移除消息监听
    remove: function(observer) {
        this.clientList && delete this.clientList[observer]
    }
}


// 测试
broastEvent.listen('some', function (...args) {
    console.log('some: ', args, this)
}.bind(this))

broastEvent.listen('some2', (...args) => {
    console.log('some2: ', args, this)
})
setTimeout(() => {
    broastEvent.trigger('some', 123, 234)
    broastEvent.trigger('some2', 123, 234)
    broastEvent.remove('some2')
}, 2000)
setTimeout(() => {
    broastEvent.trigger('some2', 123, 234)
    broastEvent.trigger('some', 123, 234)
}, 5000)
// some:  [ 123, 234 ] {}
// some2:  [ 123, 234 ] {}
// some:  [ 123, 234 ] {}

参考《你不知道的JavaScript（中卷）》第2章28页

引用就像一种特殊的指针，是来指向变量的指针（别名）。如果参数不声明为引用的话，参数值总是通过值复制的方式传递，即便对复杂的对象值也是如此。

JavaScript 中没有指针，引用的工作机制也不尽相同。在 JavaScript 中变量不可能成为指向另一个变量的引用。

JavaScript 引用指向的是值。如果一个值有 10 个引用，这些引用指向的都是同一个值， 它们相互之间没有引用 / 指向关系。

JavaScript 对值和引用的赋值 / 传递在语法上没有区别，完全根据值的类型来决定。

进程Process

进程是资源分配和调度的最小单位。

进程有独立的地址空间。

一个程序至少有一个进程，一个进程至少有一个线程。

线程Thread

方法1 setTimeout

function timeoutify(fn, delay) {
    var intv = setTimeout(function() {
        intv = null;
        fn(new Error("Timeout!"));
    }, delay);

    return function() {
        // 还没有超时
        if (intv) {
            clearTimeout(intv);
            fn.apply(this, arguments);
        }
    }
}

方法2 promise

// 使用promise.race 竞速 promise状态一旦决议就无法改变
function test() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            console.log('test')
            resolve('test')
        }, 3000)
    })
}

function timeoutfn() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            console.log('timeoutfn')
            resolve('timeoutfn')
        }, 4000)
    })
}

Promise.race([
    test(), 
    timeoutfn()
]).then(res => {
    console.log('race end')
}).catch(err => {
    console.log('race err')
})

方法1

进行序列化JSON.stringify(obj)，如果存在循环引用，会报错。

function isCyclic(obj) {
    try {
        JSON.stringify(obj)
        return true
    } catch(e) {
        return false
    }
}

方法2

使用递归方法进行检测是否存在循环引用

防抖的原理：触发事件，但在事件触发 n 秒后才执行，如果在一个事件触发的 n 秒内又触发了这个事件，那就以新的事件时间为准，n 秒后才执行。总之，就是要等触发完事件 n 秒内不再触发事件，才执行。

应用场景：input输入

实现

function debounce(func, wait, immediate) {
    var timeout = null, result;
    return function() {
        var context = this; // 修改this指向，避免指向window
        var args = argumenets; // 传参
        
		if (timeout) clearTimeout(timeout); // 等触发完事件n秒后执行
        if (immediate) { // 立即执行第一次 immediate判断是否立即执行
            // 如果已经执行过，不再执行
            var callNow = !timeout; // !null = true   !12 = false
            timeout = setTimeout(function() {
                func.apply(context, args)
            }, wait)
            if (callNow) { // 第一次执行
                result = func.apply(context, args)
            }
        } else {
            timeout = setTimeout(function() {
                func.apply(context, args)
            }, wait)    
        }
        return result; // 只有立即执行模式才能返回结果
    }
}

添加取消模式