美文网首页
轻量级模拟jQuery框架封装更新版本

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

作者: 育儿与心理 | 来源:发表于2016-10-26 22:58 被阅读0次

    本文学习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/

    相关文章

      网友评论

          本文标题:轻量级模拟jQuery框架封装更新版本

          本文链接:https://www.haomeiwen.com/subject/gvpduttx.html