2019.8.12 - 8.18中你学到什么？

[ghost]

No description provided.

[Yangfan2016]

20190813

数组偏平化 flatten

方法一 递归

function flatten(arr, res) {
    res = res || [];
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (Array.isArray(item)) {
            return flatten(item, res);
        }
        res.push(item);
    }
    return res;
}

方法二 reduce

function flatten(arr) {
    return arr.reduce((acc,cur)=>{
        return acc.concat(Array.isArray(cur) ? flatten(cur) : cur);
    }
    , []);
}

方法三 迭代器

Array.prototype[Symbol.iterator] = function() {
    let arr = this;

    function getFirst(brr) {
        let first = brr[0];
        // 空数组
        if (first === void 0) {
            return;
        }
        // 如果 item 还是数组，则继续递归
        if (Array.isArray(first)) {
            return getFirst(first);
        } else {
            // 否则，返回第一个元素，并从数组中删除
            return brr.shift();
        }
    }

    return {
        next() {
            let first = getFirst(arr);
            let done = false;
            // 如果元素 为 undefined 则遍历结束
            if (first === void 0) {
                done = true;
            }

            return {
                done,
                value: first
            }

        }
    };
}
;

function flatten(arr) {
    let res = [];
    for (let i of arr) {
        res.push(i);
    }
    return res;
}

方法四 生成器

function* flat(arr) {
    for (let item of arr) {
        if (Array.isArray(item)) {
            // 如果在 Generator 函数内部，调用另一个 Generator 函数。需要在前者的函数体内部，自己手动完成遍历
            // ES6 提供了yield*表达式，作为解决办法，用来在一个 Generator 函数里面执行另一个 Generator 函数
            yield* flat(item);
        } else {
            yield item;
        }
    }
}

function flatten(arr) {
    let res = [];
    // flat() 由于 Generator 函数就是遍历器生成函数
    for (let i of flat(arr)) {
        res.push(i);
    }
    return res;
}

指定层级的扁平化 deep flatten

function flattenShallow(arr) {
    return [].concat(...arr);
}
function flattenDeep(arr, deep=1) {
    let res = arr;
    while (deep--) {
        res = flattenShallow(res);
    }
    return res;
}

函数柯里化 curry

function curry(fn) {
    let args = [];

    return function next() {
        args = [...args, ...arguments];

        if (args.length >= fn.length) {
            res = fn.apply(null, args);
            args = [];
            return res;
        }
        return next;
    }
}

function sum(a, b, c) {
    return a + b + c;
}

var s = curry(sum);
var r = s(1)(2)(3);
console.log(r); // 6
r = s(1, 2)(3);
console.log(r); // 6
r = s(1)(2, 3);
console.log(r); // 6

[careteenL]

搞懂webpack-hmr热模块替换原理

• 传送门
• hmr是什么
• hmr运用场景是什么
• 如何配置使用hmr
• 分析webpack打包流程
• hmr流程图
• debug源码分析服务端代码
• debug源码分析客户端代码
• 实现一版简易的hmr
• 总结

[Yangfan2016]

20190815

LazyMan

• 封装
• 类
• 发布订阅
• 异步事件

(()=>{
    class LazyMan {
        constructor(name) {
            this.tasks = [];

            const task = ()=>{
                console.log(`I'm ${name}`);
                this.publish();
            }
            ;

            this.subscribe(task);

            Promise.resolve().then(()=>{
                this.publish();
            });
        }
        subscribe(task, isFirst=false) {
            if (isFirst) {
                this.tasks.unshift(task);
            } else {
                this.tasks.push(task);
            }
        }
        publish() {
            const task = this.tasks.shift();
            task && task();
        }
        eat(sth) {
            const task = ()=>{
                console.log(`It's eating ${sth}`);
                this.publish();
            }
            ;
            this.subscribe(task);
            return this;
        }
        sleep(time) {
            const task = ()=>{
                setTimeout(()=>{
                    console.log(`It's sleeping ${time} s`);
                    this.publish();
                }
                , time * 1e3);
            }
            ;
            this.subscribe(task);
            return this;
        }
        sleepFirst(time) {
            const task = ()=>{
                setTimeout(()=>{
                    console.log(`It's sleeping before ${time} s`);
                    this.publish();
                }
                , time * 1e3);
            }
            ;
            this.subscribe(task, true);
            return this;
        }
    }

    window.LazyMan = (name)=>{
        return new LazyMan(name);
    }
    ;
}
)();

LazyMan("Nick").sleep(1).eat('dinner').sleepFirst(2).eat('supper');

// It's sleeping before 2 s
// I'm Nick
// It's sleeping 1 s
// It's eating dinner
// It's eating supper

[Yangfan2016]

20190816

组合函数 compose

function compose(...fns) {
   return function (...arg) {
       let res; // 保存上次的执行结果
       // reduceRight 可以实现倒序遍历
       return fns.reduceRight((res,fn,index)=>{
           // 如果是最后一个函数，则执行
           if (index===fns.length-1) {
               return fn(...arg);
           }
           // 否则将上次的执行结果作为参数传入
           return fn(res);
       },res);
   };
}

function toUpperCase(str) {
    return str.toUpperCase()
}
function split(str) {
    return str.split('');
}
function reverse(arr) {
    return arr.reverse();
}
function join(arr) {
    return arr.join('');
}
function wrap(...args) {
    return args.join('\r\n')
}

var str ='emosewa si nijeuj';

var turnStr = compose(toUpperCase,join,reverse,split);
turnStr(str)

[ghost]

学习vue ssr

将 https://github.com/vuejs/vue-hackernews-2.0 迁移到了webpack4环境

再准备将express升级为koa2

[ghost]

https://github.com/BengBu-YueZhang/custom-vue-ssr

[Yangfan2016]

20190819

数组结构生成树结构

function constructorTree(list) {
    let map = list.reduce((acc,cur)=>{
        acc[cur["id"]] = cur;
        return acc;
    }
    , {});

    return list.reduce((tree,cur)=>{
        if (cur.pid === null) {
            tree = cur;
        } else {
            let parent = map[cur["pid"]];
            parent.childern = parent.childern || [];
            parent.childern.push(cur);
        }
        return tree
    }
    , {});
}

var users = [{
    id: 2,
    pid: 1,
    name: "c1"
}, {
    id: 1,
    pid: null,
    name: "root"
}, {
    id: 3,
    pid: 2,
    name: "c2"
}, {
    id: 4,
    pid: 2,
    name: "c3"
}];

constructorTree(users);

树结构偏平化数组结构

function flattenTree(data) {
    let list = Array.isArray(data) ? data : [data];

    return list.reduce((acc,{id, pid, name, childern=[]})=>{
        return acc.concat(flattenTree(childern), {
            id,
            pid,
            name
        });
    }
    , []);
}


var tree = {
    "id": 1,
    "pid": null,
    "name": "root",
    "childern": [{
        "id": 2,
        "pid": 1,
        "name": "c1",
        "childern": [{
            "id": 3,
            "pid": 2,
            "name": "c2"
        }, {
            "id": 4,
            "pid": 2,
            "name": "c3"
        }]
    }]
};

flattenTree(tree);