库

常用函数

 /***** 工具库 *****/
        var getID = function (str) {
            return document.getElementById(str);
        };
        var getClass = function (str, num = 0) {
            return document.getElementsByClassName(str)[num];
        }
        var firstUpper = function (str) {
            return str.slice(0, 1).toUpperCase() + str.slice(1);
        };
        var removeDOM = function (dom) {
            var parentNode = dom.parentNode;
            if (parentNode) {
                parentNode.removeChild(dom);
            }
        };
        var getStyle = function (ele, style) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(ele, null)[style];
            } else {
                return ele.currentStyle[style];
            }
        };
        var installEvent = function (obj) { // 发布-订阅模式/观察者模式
            obj.eventList = [];
            obj.listen = function (key, fn) {
                if (!this.eventList[key]) {
                    this.eventList[key] = [];
                }
                this.eventList[key].push(fn);
            };
            obj.trigger = function () {
                var key = Array.prototype.shift.call(arguments);
                var fns = this.eventList[key];
                if (!fns || fns.length === 0) {
                    return false;
                }
                for (var i = 0, fn; fn = fns[i++];) {
                    fn.apply(this, arguments);
                }
            };
            obj.remove = function (key, fn) {
                var fns = this.eventList[key];
                if (!fns) {
                    return false;
                }
                if (!fn) {
                    fns && (fns.length = 0);
                } else {
                    for (var i = fns.length - 1; i >= 0; i--) {
                        var _fn = fns[l];
                        if (_fn === fn) {
                            fns.splice(i, 1);
                        }
                    }
                }
            }
        };
        var randomNum = function (min, max) {
            return Math.floor(min + Math.random() * (max - min));
        }
        Function.prototype.before = function (beforeFn) {
            var _self = this;
            return function () {
                beforeFn.apply(this, arguments);
                return _self.apply(this, arguments);
            }
        }
        Function.prototype.after = function (afterFn) {
            var _self = this;
            return function () {
                var ret = _self.apply(this, arguments);
                afterFn.apply(this, arguments);
                return ret;
            }
        }
        export {
            getID,
            getClass,      
            firstUpper,     
            removeDOM,
            getStyle,   
            installEvent,
            randomNum
        }

获取 dom 元素节点的偏移量

        var getOffset = function (el) {
            var scrollTop =
                el.getBoundingClientRect().top +
                document.body.scrollTop +
                document.documentElement.scrollTop;
            var scrollLeft =
                el.getBoundingClientRect().left +
                document.body.scrollLeft +
                document.documentElement.scrollLeft;
            return {
                top: scrollTop,
                left: scrollLeft
            };
        };

Fade 特效

        // Fade in
        var fadeIn = function (el) {
            el.style.opacity = 0
            var last = +new Date()
            var tick = function () {
                el.style.opacity = +el.style.opacity + (new Date() - last) / 400
                last = +new Date()
                if (+el.style.opacity < 1) {
                    requestAnimationFrame(tick))
            }
        }
        tick()
        }
        // Fade out
        var fadeOut = function (el) {
            el.style.opacity = 1
            var last = +new Date()
            var tick = function () {
                el.style.opacity = +el.style.opacity - (new Date() - last) / 400
                last = +new Date()
                if (+el.style.opacity > 0) {
                    requestAnimationFrame(tick)
                }
            }
            tick()
        }

获取节点在该父节点下的坐标

        var index = function (el) {
            if (!el) {
                return -1;
            }
            var i = 0;
            while ((el = el.previousElementSibling)) {
                i++;
            }
            return i;
        };

清空子节点

        var empty = function (el) {
            while (el.firstChild) {
                el.removeChild(el.firstChild);
            }
        };

reduce 数据去重

const data = [{
                name: "Kris",
                age: "24"
            },
            {
                name: "Andy",
                age: "25"
            },
            {
                name: "Kitty",
                age: "25"
            },
            {
                name: "Andy",
                age: "25"
            },
            {
                name: "Kitty",
                age: "25"
            },
            {
                name: "Andy",
                age: "25"
            },
            {
                name: "Kitty",
                age: "25"
            }
        ];

        const dataReducer = (prev, cur, idx) => {
            let obj = {};
            const {
                name
            } = cur;
            obj[name] = cur;
            return {
                ...prev,
                ...obj
            };
        };
        const reducedData = data.reduce(dataReducer, {});
        let newData = Object.values(reducedData);

批量生成对象元素

const createList = (item, idx) => {
  let obj = {};
  obj[`a${idx}`] = "data";
  return obj;
};
const listReducer = (acc, cur) => (!acc ? { ...cur } : { ...cur, ...acc });
const obj = Array.from(new Array(20), createList).reduce(listReducer);

常用组合

自建类及其使用

//define
        export default class Background {
            constructor() {
                this.x = 0
            }

            draw() {                
                imgDraw(this.x);
            };
        }

//use 
import Background from './Background';
export default class Controller {
  constructor(){
    this.background = new Background();
  }
}

其他