一些常规操作的js小插件

if (!window.myPlugin) {
    window.myPlugin = {};
}

/**
 * 克隆obj对象,deep默认位true
 */
window.myPlugin.cloneObj = function (obj, deep) {
    if (deep === undefined) {
        deep = true;
    }
    if (Array.isArray(obj)) {
        var newArr = [];
        if (deep) {
            for (var prop in obj) {
                newArr.push(this.cloneObj(obj[prop]));
            }
            return newArr;
        } else {
            return newArr.slice.apply(obj);
        }
    } else if (typeof obj === 'object') {
        var newObj = {};
        if (deep) {
            for (var prop in obj) {
                newObj[prop] = this.cloneObj(obj[prop]);
            }
        } else {
            for (var prop in obj) {
                newObj[prop] = obj[prop];
            }
        }
        return newObj;
    } else {
        //原始类型
        return obj;
    }
}
/**
 * 将obj1混合到obj2,返回一个新对象
 */
window.myPlugin.mixtrueObj = function (obj1, obj2) {
    var newObj = window.myPlugin.cloneObj(obj2, true);
    for (var prop in obj1) {
        newObj[prop] = obj1[prop];
    }
    return newObj;
}

/**
 * 函数防抖：在达到运行条件后，duration ms之后运行一次callback，如果在duration ms之内再次触发函数运行条件，则重新计时
 * @param {*} callback 
 * @param {*} duration 
 * @returns 
 */
window.myPlugin.debounce = function (callback, duration) {
    var timer;
    return function () {
        clearTimeout(timer);
        var args = arguments;
        timer = setTimeout(function () {
            callback.apply(null, args);
        }, duration)
    }
}

/**
 * 函数节流：当触发函数运行条件后，每隔duration运行一次
 * @param {*} callback 
 * @param {*} duration 
 * @param {*} immediately 表示第一次执行是立即执行还是durations ms之后运行
 */
window.myPlugin.throttle = function (callback, duration, immediately) {
    var t;
    var timer;
    if (immediately) {
        return function () {
            if (!t || Date.now() - t >= duration) {
                callback.apply(null, arguments);
                t = Date.now();
            }
        }
    } else {
        return function () {
            var args = arguments;
            timer = setTimeout(function () {
                callback.apply(null, args);
                timer = null;
            }, duration)
        }
    }
}
/**
 * 创建一个图片瀑布流
 * @param {Object} options 
 */
window.myPlugin.waterFall = function (options) {
    var defaultConfig = {
        minGap: 10,
        imgs: [],
        imgWidth: 200,
        container: document.body,
    };
    options = Object.assign({}, defaultConfig, options);
    var imgDoms = [];
    function handleParent() {
        var style = window.getComputedStyle(options.container);
        if (style.position === 'static') {
            options.container.style.position = 'relative';
        }
    }
    var debounce = myPlugin.debounce(setImgPosition, 100);

    handleParent();
    createImg();

    window.onresize = debounce;

    //创建图片元素
    function createImg() {
        var len = options.imgs.length;
        for (var i = 0; i < len; ++i) {
            var img = document.createElement('img');
            img.src = options.imgs[i];
            img.style.position = 'absolute';
            img.style.width = options.imgWidth + 'px';
            imgDoms.push(img);
            img.onload = debounce;
            options.container.appendChild(img);
        }
    }
    //得到水平信息
    function horizontalInfo() {
        var info = {};
        info.totalWidth = options.container.clientWidth;
        info.number = (info.totalWidth + options.minGap) / (options.imgWidth + options.minGap);
        info.number = Math.floor(info.number);
        info.gap = (info.totalWidth - info.number * options.imgWidth) / (info.number - 1);

        return info;
    }
    //设置图片坐标
    function setImgPosition() {
        var tops = [];
        var info = horizontalInfo();
        tops.length = info.number;
        tops.fill(0);
        for (var i = 0; i < imgDoms.length; ++i) {
            var minTop = Math.min.apply(null, tops);
            var index = tops.indexOf(minTop);
            imgDoms[i].style.top = minTop + 'px';
            // if (info.gap > options.minGap) {
            tops[index] += imgDoms[i].clientHeight + info.gap;
            // } else {
            // tops[index] += imgDoms[i].clientHeight + options.minGap;
            // }
            imgDoms[i].style.left = (info.gap + options.imgWidth) * index + 'px';
            var maxTop = Math.max.apply(null, tops) - info.gap;
            options.container.style.height = maxTop + 'px';
        }
    }
}


/**
 * 该函数是一个构造函数
 * 动画插件:css3中的transition有兼容性问题，动画难以停止，难以恢复
 * 动画：某些元素的某些属性。在一段时间内，从一个值变化到另一个值
 * 动画插件：某些数字，在一段时间内，从一个值变化到另一个值
 * @param {*} propObj 
 */
 window.myPlugin.Animate = function (option) {
    var defaultConfig = {
        totalTime: 1000,
        duration: 16,
        begin: {},
        end: {}
    }
    this.option = myPlugin.mixtrueObj(option, defaultConfig);
    this.curData = myPlugin.cloneObj(this.option.begin);
    this.curNumber = 0;
    this.number = Math.ceil(this.option.totalTime / this.option.duration);
    this.distance = {};
    this.timer = null;
    this.everyDis = {};
    for (var prop in this.option.end) {
        this.distance[prop] = this.option.end[prop] - this.option.begin[prop];
        this.everyDis[prop] = this.distance[prop] / this.number;
    };
}
window.myPlugin.Animate.prototype.start = function () {
    if (this.option.onstart) {
        this.option.onstart();
    }
    if (this.timer || this.curNumber === this.number) {
        return;
    }
    var that = this;
    this.timer = setInterval(function () {
        for (var prop in that.option.end) {
            if (that.curNumber === that.number) {
                that.curData[prop] = that.option.end[prop];
            } else {
                that.curData[prop] += that.everyDis[prop];
            }
            if (that.option.onmove) {
                that.option.onmove.call(that);
            }
        }
        if (that.curNumber === that.number) {
            that.stop();
        }
        that.curNumber++;
    }, this.duration);

}

window.myPlugin.Animate.prototype.stop = function () {
    if (this.option.onstop) {
        this.option.onstop();
    }
    clearInterval(this.timer);
    this.timer = null;
}