轻量级模拟jQuery框架封装更新版本

本文学习jQuery源码,封装了each、map、toArray、get以及,一些基本DOM操作方法

(function (window) {
    var arr = [];
    var push = arr.push;
    var slice = arr.slice;
    function MHQ(selector) {
        return new MHQ.fn.init(selector);
    }
    MHQ.fn = MHQ.prototype = {
        constructor: MHQ,
        length: 0,
        init: function (selector) {
            // 判断选择器类型
            if (!selector) return this;
            if (typeof selector === "string") {
                if (selector.charAt(0) === "<") {
                    push.apply(this, parseHTML(selector));
                    return this;
                } else {
                    push.apply(this, document.querySelectorAll(selector));
                    return this;
                }
            }
            if (typeof selector === "function") {
            } 
           if (selector.nodeType) { 
                this[0] = selector;
                this.length = 1;
                return this;
            }
            if (selector.constructor.name === MHQ) {
                return selector;
            }
            if (selector.length >= 0) {
                push.apply(this, selector);
            } else {
                this[0] = selector;
                this.length = 1;
            }
        }
    };
    MHQ.fn.init.prototype = MHQ.fn;
    MHQ.extend = MHQ.fn.extend = function (obj) {
        var k;
        for (k in obj) {
            this[k] = obj[k];
        }
    };
    MHQ.fn.extend({
        each: function (callback) {
            return MHQ.each(this, callback);
        },
        map: function (callback) {
            return MHQ.map(this, callback);
        }
    });
    MHQ.extend({
        each: function (obj, callback) {
            var i,
                    len = obj.length,
                    isArray = len >= 0;
            if (isArray) {
                for (i = 0; i < len; i++) {
                    if (callback.call(obj[i], i, obj[i]) === false) break;
                }
            } else {
                for (i in obj) {
                    if (callback.call(obj[i], i, obj[i]) === false) break;
                }
            }
            return obj;
        },
        map: function (obj, callback) {
            var i,
                    len = obj.length,
                    isArray = len >= 0, 
                    result,
                    ret = [];
            if (isArray) {
                for (i = 0; i < len; i++) {
                    result = callback(obj[i], i);
                    if (result != null) {
                        ret.push(result);
                    }
                }
            } else {
                for (i in obj) {
                    result = callback(obj[i], i);
                    if (result != null) {
                        ret.push(result);
                    }
                }
            }
            return ret;
        },
        next: function ( dom ) {
            var node = dom;
            while( node = node.nextSibling ) {
                if ( node.nodeType === 1 ) {
                    return node;
                }
            }
            return null;
        }
    });
    function parseHTML(htmlStr) {
        var div = document.createElement("div"),
                i = 0,
                nodeArr = []; 
       div.innerHTML = htmlStr;
        for (; i < div.childNodes.length; i++) {
            nodeArr.push(div.childNodes[i]);
        }
        return nodeArr;
    }
    MHQ.fn.extend({
        toArray: function () {
            return slice.call(this);
        },
        get: function (index) {
            if (index === undefined) {
                return this.toArray();
            } else {
                return this[index > 0 ? index : this.length + index];
            }
        }
    });
    // DOM元素操作
    MHQ.fn.extend({
        appendTo: function (selector) {
            var i,
                    j,
                    tmpObj,
                    ret = [],
                    destinationObj = MHQ(selector);
            for (i = 0; i < this.length; i++) {
                for (j = 0; j < destinationObj.length; j++) {
                    tmpObj = j === destinationObj.length - 1 ? this[i] : this[i].cloneNode(true);
                    ret.push(tmpObj);
                    destinationObj[j].appendChild(tmpObj);
                }
            }
            return this.pushStack(ret);
        },
        prependTo: function (selector) {
            // 将 this[i] 加入到 selector[j] 中, 链会破坏
            // MHQ( selector ).prepend( this );
            var tmpObj, ret = [],
                    i, j,
                    destinationObj = MHQ(selector);
            for (i = 0; i < this.length; i++) {
                for (j = 0; j < destinationObj.length; j++) {
                    tmpObj = j === destinationObj.length - 1 ? this[i] : this[i].cloneNode(true);
                    ret.push(tmpObj);
                    destinationObj[j].insertBefore(tmpObj, destinationObj[j].firstChild);
                }
            }
            return this.pushStack(ret);
        },
        prepend: function (selector) {
            MHQ(selector).appendTo(this);
            return this;
        },
        append: function (selector) {
            // 将 selector[j] 加到 this[i] 中
            // 不会造成链破坏
            MHQ(selector).appendTo(this);
            return this;
        },
        next: function () {
            /*
             var ret = [];
             this.each(function () {
             ret.push( this.nextElementSibling );
             });
             return this.pushStack( ret );
             */
            return this.pushStack(
                    this.map(function (v) {
                        return v.nextElementSibling;
                    }));
        },
        remove: function () {
            this.each(function () {
                this.parentNode.removeChild(this);
            });
        }
    });
    // 恢复链
    MHQ.fn.extend({
        end: function () {
            return this.prevObj || this;
        },
        pushStack: function (array) {
            var newObj = MHQ(array);
            newObj.prevObj = this;
            return newObj;
        }
    });
    window.MHQ = window.M = MHQ;})(window);

博客原文地址:
http://www.cnblogs.com/hongqin/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,172评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,346评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,788评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,299评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,409评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,467评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,476评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,262评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,699评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,499评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2 352

推荐阅读更多精彩内容