Javascript编码原则与各司其职 | 青训营笔记

        这是我参与「第五届青训营」伴学笔记活动的第三天，今天所学习到的内容有Javascript编码原则与各司其职。

各司其职

        所谓各司其职就是HTML、CSS、JS各自完成自己的作用，HTML定义结构，CSS定义表现，JS负责行为，而结构表现行为分离是前端工程师需要掌握的基本原则。这样写代码能更加容易辨认、改动，项目交替能让别人更容易理解代码的原始含义。一个职业前端工程师更应该对自己的代码负责，在代码实现过程中可以应当避免不必要由JS直接操作样式，可以用class来表示状态，纯展示类交互寻求零JS方案。

编码原则之组件封装

        组件的设计原则：具有封装性、正确性、扩展性、复用性。方案步骤：1.结构设计、2.展现效果、3.行为设计(API与控制流)、4插件化、5模板化、6抽象化

编程抽象

        1.过程抽象，常用高阶函数例子：

Once

function once(fn) {
    return function(...args) {
        if(fn) {
            const ret = fn.apply(this, args);
            fn = null;
            return ret
        }
    }
}

Throttle

function throttle(fn, time = 500) {
    let timer;
    return function(...args) {
        if (timer === null) {
            fn.apply(this, args);
            timer = setTimeout(() => {
                timer = null
            }, time);
        }
    }
}

Debounce

function debounce(fn, dur) {
    dur = dur || 100;
    var timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(()=> {
            fn.apply(this, arguments);
        }, dur);
    }
}

Consumer/2

function consumer(fn, time) {
    let tasks = [],
        timer;

    return function(...regs) {
        tasks.push(fn.bind(this, ...regs));
        if(timer === null) {
            timer = setInterval(()=> {
                tasks.shift().call(this)
                if(tasks.length <= 0) {
                    clearInterval(timer)
                    timer = null
                }
            }, time)
        }
    }
}

Iterative

const isIterable = obj => obj != null
    && typeof obj[Symbol.iterator] === 'function'

function iterative(fn) {
    return function(subject, ...rest) {
        if(isIterable(subject)) {
            const ret = []
            for(let obj of subject){
                ret.push(fn.apply(this, [obj, ...rest]));
            }
            return ret
        }
        return fn.apply(this, [obj, ...rest]);
    }
}

        2.命令式和声明式，声明式天生比命令式拓展性强