自己封装的简易版jQuery

素颜马尾好姑娘i 2021-09-20 05:42 313阅读 0赞

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

[https_github.com_mytheart_my-projects_tree_master_projects_myjQuery]: https://github.com/mytheart/my-projects/tree/master/projects/myjQuery

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关【JQuery】JQuery封装的小例子

一、前言 JQuery是一个JS函数库，可以简单标记被添加到网页中。这个js库封装了各种选择器，可以捕获我们使用的html页面的节点。然后对html进行操作。

淩亂°似流年/ 2022年07月10日 05:58/ 0 赞/ 206 阅读

相关 jquery封装的ajax

具体操作： GET请求 > `$.get(url [,data][,function(msg){}回调函数][, dataType]);` > > `data`:给服务器

「爱情、让人受尽委屈。」/ 2022年06月02日 04:00/ 0 赞/ 184 阅读

相关自己封装的poi操作Excel工具类

该工具类主要完成的功能是：读取Excel、汇总Excel的功能。在读取时，可以设定开始和结束读取的位置、设定是否读取多个sheet、设定读取那个或者那些sheet等。在汇总时，

淩亂°似流年/ 2022年05月14日 16:18/ 0 赞/ 234 阅读

相关 Java封装的意义

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEy

亦凉/ 2022年04月22日 20:38/ 0 赞/ 170 阅读

相关 Jquery的简易版ajax $.post()

语法 jQuery.post(url,data,success(data, textStatus, jqXHR),dataType) <table> <tbod

╰半夏微凉°/ 2022年04月18日 00:25/ 0 赞/ 172 阅读

相关封装的jdbc

package com.zcq.visitMysql; import java.sql.CallableStatement; import j

分手后的思念是犯贱/ 2021年11月22日 12:58/ 0 赞/ 283 阅读

相关如何实现简易版jQuery

window.jQuery=x=>{ //声明一个空对象 let jQuery = {};

妖狐艹你老母/ 2021年10月19日 00:44/ 0 赞/ 291 阅读

相关自己封装的简易版jQuery

学过jQuery快一年了，学jQuery时曾尝试封装过一个简易的jQuery，也是为了考察自己对原生js的掌握程度。实现了jQuery的部分功能。如选择元素、add、trigg

素颜马尾好姑娘i/ 2021年09月20日 05:42/ 0 赞/ 314 阅读

相关自己写一个简易版的vue

vue原理图 ![70][] 1.html <!DOCTYPE html> <html lang="en"> <head>

超、凢脫俗/ 2021年09月16日 07:10/ 0 赞/ 319 阅读

相关自己封装的JDBC类

> 对JDBC进行一些简单的封装，可以方便在项目中调用，同时也减少了重复代码量，降低代码的冗余度，提高代码的可读性和美观。 package JdbcUtil

た入场券/ 2021年09月07日 22:30/ 0 赞/ 340 阅读