Javascript - this.function(function(element){});元素如何具有价值

时间:2017-07-25 03:52:40

标签: javascript dom dom-manipulation

我正在尝试弄清楚简单的dom javascript库中的每一行代码如何形成tutorial和源code

当我在控制台中运行这行代码时,

脚本

console.log(dome.get("label").text());

我也在检查源脚本,我想知道这个el

是怎么回事
 // ========== DOM MANIPULATION ==========
Dome.prototype.text = function (text) {
    console.log(text);
    if (typeof text !== "undefined") {
        return this.forEach(function (el) {
            console.log(el);
            el.innerText = text;
        });
    } else {
        console.log(this);
        return this.mapOne(function (el) {
            console.log(el);
            return el.innerText;
        });
    }
};

来自el的{​​{1}}参数如何获得其值? Noobie在这里......



function(el)

if (typeof Array.prototype.indexOf !== 'function') {
    Array.prototype.indexOf = function (item) {
        for(var i = 0; i < this.length; i++) {
            if (this[i] === item) {
                return i;
            }
        }
        return -1;
    }; 
}

window.dome = (function () {
    function Dome(els) {
        for(var i = 0; i < els.length; i++ ) {
            this[i] = els[i];
        }
        this.length = els.length;
    }
    // ========= UTILS =========
    Dome.prototype.forEach = function (callback) {
        this.map(callback);
        return this; 
    };
    Dome.prototype.map = function (callback) {
        var results = [];
        for (var i = 0; i < this.length; i++) {
            results.push(callback.call(this, this[i], i));
        }
        return results; //.length > 1 ? results : results[0];
    };
    Dome.prototype.mapOne = function (callback) {
        var m = this.map(callback);
        console.log(callback);
        return m.length > 1 ? m : m[0];
    };

    // ========== DOM MANIPULATION ==========
    Dome.prototype.text = function (text) {
        console.log(text);
        if (typeof text !== "undefined") {
            return this.forEach(function (el) {
                console.log(el);
                el.innerText = text;
            });
        } else {
            console.log(this);
            return this.mapOne(function (el) {
                console.log(el);
                return el.innerText;
            });
        }
    };

    Dome.prototype.html = function (html) {
        if (typeof html !== "undefined") {
            return this.forEach(function (el) {
                el.innerHTML = html;
            });
        } else {
            return this.mapOne(function (el) {
                return el.innerHTML;
            });
        }
    };

    Dome.prototype.addClass = function (classes) {
        var className = "";
        if (typeof classes !== 'string') {
            for (var i = 0; i < classes.length; i++) {
               className += " " + classes[i];
            }
        } else {
            className = " " + classes;
        }
        return this.forEach(function (el) {
            el.className += className;
        });
    };

    Dome.prototype.removeClass = function (clazz) {
        return this.forEach(function (el) {
            var cs = el.className.split(' '), i;

            while ( (i = cs.indexOf(clazz)) > -1) { 
                cs = cs.slice(0, i).concat(cs.slice(++i));
            }
            el.className = cs.join(' ');
        });
    };

    Dome.prototype.attr = function (attr, val) {
        console.log(attr);
        console.log(val);
        if (typeof val !== 'undefined') {
            return this.forEach(function(el) {
                console.log(el);
                el.setAttribute(attr, val);
            });
        } else {
            return this.mapOne(function (el) {
                console.log(el);    
                return el.getAttribute(attr);
            });
        }
    };

    Dome.prototype.append = function (els) {
        return this.forEach(function (parEl, i) {
            els.forEach(function (childEl) {
                parEl.appendChild( (i > 0) ? childEl.cloneNode(true) : childEl);
            });
        });
    };

    Dome.prototype.prepend = function (els) {
        return this.forEach(function (parEl, i) {
            for (var j = els.length -1; j > -1; j--) {
                parEl.insertBefore((i > 0) ? els[j].cloneNode(true) : els[j], parEl.firstChild);
            }
        });
    };

    Dome.prototype.remove = function () {
        return this.forEach(function (el) {
            return el.parentNode.removeChild(el);
        });
    };

    Dome.prototype.on = (function () {
        if (document.addEventListener) {
            return function (evt, fn) {
                return this.forEach(function (el) {
                    el.addEventListener(evt, fn, false);
                });
            };
        } else if (document.attachEvent)  {
            return function (evt, fn) {
                return this.forEach(function (el) {
                    el.attachEvent("on" + evt, fn);
                });
            };
        } else {
            return function (evt, fn) {
                return this.forEach(function (el) {
                    el["on" + evt] = fn;
                });
            };
        }
    }());

    Dome.prototype.off = (function () {
        if (document.removeEventListener) {
            return function (evt, fn) {
                return this.forEach(function (el) {
                    el.removeEventListener(evt, fn, false);
                });
            };
        } else if (document.detachEvent)  {
            return function (evt, fn) {
                return this.forEach(function (el) {
                    el.detachEvent("on" + evt, fn);
                });
            };
        } else {
            return function (evt, fn) {
                return this.forEach(function (el) {
                    el["on" + evt] = null;
                });
            };
        }
    }());

    var dome = {
        get: function (selector) {
            var els;
            if (typeof selector === 'string') {
                els = document.querySelectorAll(selector);
            } else if (selector.length) { 
                els = selector;
            } else {
                els = [selector];
            }
            return new Dome(els);
        }, 
        create: function (tagName, attrs) {
            var el = new Dome([document.createElement(tagName)]);
            if (attrs) {
                if (attrs.className) { 
                    el.addClass(attrs.className);
                    delete attrs.className;
                }
                if (attrs.text) { 
                    el.text(attrs.text);
                    delete attrs.text;
                }
                for (var key in attrs) {
                    if (attrs.hasOwnProperty(key)) {
                        el.attr(key, attrs[key]);
                    }
                }
            }
            return el;
        }
    };
    return dome;
}());
console.log(dome.get("label").text());
&#13;
&#13;
&#13;

0 个答案:

没有答案