11月29号-12月5号：node文本切割、instanceof、链表、CSS3D天空盒子、文字环绕图片外边、nvs和vue响应式原理

1node文本切割

let path = require('path')
let fs = require('fs')
let fileName = '2016-16'

function fileSplit(inputFile, splitSize, outPath, ext) {
    let i = 0
    function wf(data, index) {
        console.log(index, 'index')
        fs.writeFile(path.join(outPath, `${fileName}-${index + 1}${ext}`), data, async err => {

        })
    }
    function copy(start, end, size) {
        return new Promise((resolve, reject) => {
            if (start >= size) {
                resolve()
            } else {
                if (end > size - 1) { end = size - 1 }
                const readStream = fs.createReadStream(inputFile, { start, end })
                let data = Buffer.from([])
                readStream.on('data', chunk => {
                    data = Buffer.concat([data, chunk])
                })
                readStream.on('end', async () => {
                    // console.log('data', data.toString())
                    let dataString = data.toString()
                    let arr = dataString.split('16-16-')
                    arr.shift()
                    console.log('arr', arr.length)
                    for (let index = 0; index < arr.length; index++) {
                        const item = arr[index];
                        let newString = '16-' + item
                        newString = newString.slice(newString.indexOf('\r\n')).trim()
                        // const buf = Buffer.from(newString)

                        // console.log(buf, 'ste')
                        await wf(newString, index)
                    }



                    // console.log('index', index)


                })
                readStream.on('err', err => {
                    reject(err)
                })
            }
        })
    }
    return new Promise((resolve, reject) => {
        return fs.stat(inputFile, async (err, stat) => {
            if (err) { return reject(err) }

            const size = stat.size
            await copy(0, splitSize - 1, size)
            resolve(i)
        })
    })
}

fileSplit(path.join(__dirname, './src/16年作文16-21/MET2016-16.txt'), 1024 * 1024, __dirname + `/${fileName}`, '.txt').then(i => {
    console.log(i)
}).catch(err => {
    console.log(err)
})

2.instanceof

instanceof 能在obj原型链上找到object的原型对象

3.链表

环形链表

var hasCycle = function(head) {
  // 快慢指针初始化指向 head
  let slow = head;
  let fast = head;
  // 快指针走到末尾时停止
  while (fast && fast.next) {
    // 慢指针走一步，快指针走两步
    slow = slow.next;
    fast = fast.next.next;
    // 快慢指针相遇，说明含有环
    if (slow == fast) {
      return true;
    }
  }
  // 不包含环
  return false;
};

每当慢指针slow前进一步，快指针fast就前进两步。
如果fast最终遇到空指针，说明链表中没有环；
如果fast最终和slow相遇，那肯定是fast超过了slow n圈，说明链表中含有环。

4.CSS3D天空盒子

https://juejin.cn/post/6997697496176820255

5.文字环绕图片外边

shape-outside；shape-margin
background-clip: text;

5.nvs 切换默认版本的方法：

nvs rm [version1] ，nvs link [version2]， nvs rm [version1]
先nvs ls 查看本地下载的弄得版本列表，# 在哪个node版本前就是默认版本，>在哪个node版本前就是当前使用版本，使用nvs rm [version1] 移除当前默认版本的状态，使用nvs rm [version2]选择默认版本号，再移除原先版本nvs rm [version1]

6.动画animation和requestAnimationFrame
animation: name duration timing-function delay iteration-count direction;
name:keyframe名称，duration动画的时间，time-function动画的速度曲线，delay动画开始前的延迟，iteration-count应该播放的次数，direction是否应该轮流方向播放动画
requestAnimationFrame由系统决定回调函数的执行时机。60Hz的刷新频率，每次刷新的间隔中会执行一次回调函数，不会引起丢帧，卡顿，与屏幕的刷新频率同步执行

6.vue响应式原理

1.概念：
1.数据驱动，
2.响应式的核心原理：
2.1.vue2:给data属性赋值一个对象，利用object.defineProperty会把对象的属性设置get和set，当调用属性和设置属性时候，数据劫持更新视图,（遍历循环对象的属性赋值，递归）
2.2.vue3:proxy代理data的属性
3.发布订阅模式和观察者模式：
3.1发布订阅模式：发布者，订阅者，调度中心。
3.2观察者模式：vue响应式也用了。发布者：[] ，添加观察者的数组中，发布通知；观察者：updata，
1.模拟vue：
接受初始化参数，把data注入vue中并转成gerrer/setter（_proxyData）；
*.observer：调用observer监听data的所有属性，（对象中的属性也是响应式；
给属性赋值对象，对象的属性也是响应式的,）；
*.compiler：调用compiler解析指令或主差值表达式；
*.dep：每个响应式都会创建一个dep，收集响应式依赖的watch对象（观察者模式中的发布者）
dep类观察者模式，依赖get的时候添加观察者，set中通知watcher更新视图，watcher更新视图，
*.watch: