封装我的jquery工具库,学习笔记

封装我的jQuery工具库

(function(){
    function jQuery(selector){
        return new jQuery.prototype.init(selector);
    }
    jQuery.prototype.init = function (selector){
        // 选出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++;
            }
        }
    }
    //入栈
    jQuery.prototype.pushStack = function (dom){
        if(dom.constructor != jQuery){
            dom = jQuery(dom)
        }else{
            dom.prevObject = this;
        }
        return dom;
    }
    
    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.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];
        }
        this.pushStack(newObj);
        return newObj;
    }
    jQuery.prototype.end = function(selector){
        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]
        }
        //添加队列 或往已有队列中添加内容
        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, callack){
        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){
                        callack && callack();
                        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, callback) {
            clearInterval(obj.timer);
            var iSpeed = null, iCur = null;
            obj.timer = setInterval(function () {
                var bStop = true;
                for (var attr in json) {
                    if (attr == 'opacity') {
                        iCur = parseFloat(getStyle(obj, attr)) * 100
                    } else {
                        iCur = parseFloat(getStyle(obj, attr));
                    }
                    iSpeed = (json[attr] - iCur) / 7;
                    iSpeed = iSpeed > 0 ?  Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if(attr == 'opacity'){
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    }else{
                        obj.style[attr] = iCur + iSpeed + 'px'
                    }
                    if( iCur != json[attr]){
                        bStop = false;
                    }
                }
                if(bStop) {
                    clearInterval(obj.timer);
                    typeof callback == 'function' && callback()
                }
            }, 30)
        }
        return this;
    }

    jQuery.myCallbacks = function(){
        // 'once' 'menory' 'once memory' null
        //存储参数
        var options = arguments[0] || '';
        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]
           //注册
           //defered['done'] = function () {}
           //defered['fail'] = function () {}
           //defered['progress'] = function () {}
           deferred[ arr[i][1 ]] = (function (index){
            return function (func) {
                arr[index][0].add(func)
            }
           }(i));
           //触发
             //defered['resolve'] = function () {}
           //defered['reject'] = function () {}
           //defered['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;
}());
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值