自己封装的简易版jQuery-蒲公英云

学过jQuery快一年了，学jQuery时曾尝试封装过一个简易的jQuery，也是为了考察自己对原生js的掌握程度。实现了jQuery的部分功能。如选择元素、add、trigger、queue、dequeue、delay、animate、callback、deffer…等方法
Github地址：https://github.com/mytheart/my-projects/tree/master/projects/myjQuery

(function () {
    function jQuery (selector) {
        return new jQuery.prototype.init(selector);
    }
    jQuery.prototype.init = function (selector) {
        // this = {};
        // 选出 dom 并且包装成jQuery对象  返回
        // id class
        this.length = 0;
        // null undefined dom
        if (selector == null) {
            return this;
        }
        if (typeof selector == 'string' && selector.indexOf('.') != -1) {
            var dom = document.getElementsByClassName( selector.slice(1) );
        }else if (typeof selector == 'string' && selector.indexOf('#') != -1) {
            var dom = document.getElementById( selector.slice(1) );
        }
        if (selector instanceof Element || dom.length == undefined) {
            this[0] = dom || selector;
            this.length++;
        }else {
            // 基础铺垫
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++
            }
        }
        // return this;
    }
    jQuery.prototype.css = function (config) {
        // 循环操作每一个dom
        // 循环操作
        for (var i = 0; i < this.length; i++) {
            for (var attr in config) {
                this[i].style[attr] = config[attr];
            }
        }
        // 链式操作
        return this;
    }
    jQuery.prototype.pushStack = function (dom) {
        // dom newObj
        if (dom.constructor != jQuery) {
            dom = jQuery(dom);
        }
        dom.prevObject = this;
        return dom;
    }
    jQuery.prototype.get = function (num) {
        return num != null ? (num >= 0 ? this[num] : this[num + this.length]) : [].slice.call(this, 0);
    }
    jQuery.prototype.eq = function (num) {
        var dom = num != null ? (num >= 0 ? this[num] : this[num + this.length]) : null;
        return this.pushStack(dom);
    }
    jQuery.prototype.add = function (selector) {
        var curObj = jQuery(selector);
        var baseObj = this;
        var newObj = jQuery();
        for (var i = 0; i < curObj.length; i++) {
            newObj[newObj.length++] = curObj[i];
        }
        for (var i = 0; i < baseObj.length; i++) {
            newObj[newObj.length++] = baseObj[i];
        }
        console.log(newObj);
        this.pushStack(newObj);
        return newObj;
    }
    jQuery.prototype.end = function () {
        return this.prevObject;
    }
    jQuery.prototype.myOn = function (type, handle) {
        for (var i = 0; i < this.length; i++) {
            if (!this[i].cacheEvent) {
                this[i].cacheEvent = {};
            }
            if ( !this[i].cacheEvent[type] ) {
                this[i].cacheEvent[type] = [handle];
            }else {
                this[i].cacheEvent[type].push(handle);
            }
        }
    }
    jQuery.prototype.myTrigger = function (type) {
        var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
        var self = this;
        for (var i = 0; i < this.length; i++) {
            if ( this[i].cacheEvent[type] ) {
                this[i].cacheEvent[type].forEach(function (ele, index) {
                    ele.apply(self, params)
                });
            }
        }
    }
    jQuery.prototype.myQueue = function () {
        var queueObj = this;
        var queueName = arguments[0] || 'fx';
        var addFunc = arguments[1] || null;
        var len = arguments.length;
        // 获取队列
        if (len == 1) {
            return  queueObj[0][queueName];
        }
        // queue dom {chain: } 添加队列 或 往已有队列中添加内容
        queueObj[0][queueName] == undefined ? queueObj[0][queueName] = [addFunc] : queueObj[0][queueName].push(addFunc);
        return this;
    }
    jQuery.prototype.myDequeue = function (type) {
        var self = this;
        var queueName = arguments[0] || 'fx';
        var queueArr = this.myQueue(queueName);
        var currFunc = queueArr.shift();
        if (currFunc == undefined) {
            return;
        }
        var next =  function () {
            self.myDequeue(queueName);
        }
        currFunc(next);
        return this;
    }
    jQuery.prototype.myDelay = function (duration) {
        var queueArr = this[0]['fx'];
        queueArr.push(function (next) {
            setTimeout(function () {
                next();
            }, duration);
        });
        return this;
    }
    jQuery.prototype.myAnimate = function (json, callback) {
        var len = this.length;
        var self = this;
        // 最后添加到队列里的内容函数
        var baseFunc = function (next) {
            var times = 0;
            for (var i = 0; i < len; i++) {
                startMove(self[i], json, function () {
                    times++;
                    if (times == len) {
                        callback && callback();
                        next();
                    }
                });
            }
        }        
        this.myQueue('fx', baseFunc);
        if ( this.myQueue('fx').length == 1 ) {
            this.myDequeue('fx');
        }
        function getStyle (obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            }else {
                return window.getComputedStyle(obj,false)[attr];
            }
        }
        function startMove (obj, json, callblack) {
            clearInterval(obj.timer);
            var iSpeed;
            var iCur;
            var name;
            obj.timer = setInterval(function () {
                var bStop = true;
                for (var attr in json) {                            
                    if (attr === 'opacity') {                                
                        name = attr;
                        iCur = parseFloat(getStyle(obj, attr)) * 100;
                    }else {
                        iCur = parseInt(getStyle(obj, attr));
                    }                            
                    iSpeed = (json[attr] - iCur) / 7;
                    if (iSpeed > 0) {
                        iSpeed = Math.ceil(iSpeed);
                    }else {
                        iSpeed = Math.floor(iSpeed);
                    }
                    if (attr === 'opacity') {
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    }else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                    if (json[attr] - iCur !== 0) {
                        bStop = false;
                    }
                }
                if (bStop) {
                    clearInterval(obj.timer);
                    callblack();
                }
            }, 30);
        }
        return this;   
    }
    jQuery.myCallbacks = function () {
        // 'once' 'memory' 'once memory' null
        // 存储参数
        var options = arguments[0] || '';
        // 通过add 来加入的方法
        var list = [];
        // 记录当前要执行的函数的索引
        var fireIndex = 0;
        // 记录是否有被fire过
        var fired = false;
        // 实际参数列表
        var args = [];
        var fire = function () {
            for (; fireIndex < list.length; fireIndex++) {
                list[fireIndex].apply(window, args);
            }
            if (options.indexOf('once') != -1) {
                list = [];
                fireIndex = 0;
            }
        }
        return {
            add: function (func) {
                list.push(func);
                if (options.indexOf('memory') != -1 && fired) {
                    fire();
                }
                return this;
            },
            fire: function () {
               fireIndex = 0;
               args = arguments;
               fired = true;
               fire();
            }
        }
    }
    jQuery.myDeferred = function () {
        // callback 
        // 3个callback
        // done resolve    fail reject     progress notify
        var arr = [
            [
                jQuery.myCallbacks('once memory'), 'done', 'resolve'
            ],[
                jQuery.myCallbacks('once memory'), 'fail', 'reject'
            ],[
                jQuery.myCallbacks('memory'), 'progress', 'notify'
            ]
        ];
        var pendding = true;
        var deferred = {};
        for (var i = 0; i < arr.length; i++) {
            // arr[0][1]
            // 注册
            // deferred['done'] = function () {}
            // deferred['fail'] = function () {}
            // deferred['progress'] = function () {}
            deferred[ arr[i][1] ] = (function (index) {
                return function (func) {
                    arr[index][0].add(func)
                }
            })(i);
            // 触发
            // deferred['resolve'] = function () {}
            // deferred['reject'] = function () {}
            // deferred['notify'] = function () {}
            deferred[ arr[i][2] ] =  (function (index) {
               return function () {
                    var args = arguments;
                    if (pendding) {
                        arr[index][0].fire.apply(window, args);
                        arr[index][2] == 'resolve' || arr[index][2] == 'reject' ? pendding = false : '';
                    }
               }
            })(i);
        }
        return deferred;
    }
    jQuery.prototype.init.prototype = jQuery.prototype;
    window.$ = window.jQuery = jQuery;
})();

只写了jQuery部分功能，有不足之处欢迎之处，也欢迎大家自己继续完善。现在有好多人说jQuery已经过时了，学完js之后直接奔三大框架。但我认为，jQuery仍有它自己的魅力，并且现在还有好多公司还用jQuery。我自己封装简易版jQuery的初衷也仅仅是为了加深自己对原声js的理解。不管框架怎么变，只要前端还在，原生JavaScript就永远不会过时。