библиотека jQuery-библиотека для учебных целей


Я пытаюсь построить небольшую библиотеку JavaScript (похожие на jQuery)

Цель это в основном упражнения, так спрашивают, почему я не просто использовать существующие библиотеки спорный.

До сих пор я только что получил мой основной конструктор, функцию 'звонящий' ссылаться на новый объект, и некоторые основные функции, для примера.

var lemon = function() {
    var prop = {
        collection: []
    };
    var fn = {
        init: function(selector, context) {
            context = context || document;
            if (!selector) {
                return;
            } else if (typeof selector == "string") {
                prop.collection = fn.toArray(context.querySelectorAll(selector));
            } else if (selector instanceof Array || selector instanceof NodeList) {
                fn.toArray(selector).forEach(function(obj) {
                    prop.collection.push(obj);
                });
            } else if (selector instanceof Element) {
                prop.collection.push(selector);
            }
            prop.length = prop.collection.length;
            fn.extend.apply(this, [this, prop, fn]);
        },
        toArray: function(target) {
            var array = [];
            for (var i = target.length >>> 0; i--;) {
                array[i] = target[i];
            }
            return array;
        },
        extend: function(target) {
            var objects = Array.prototype.slice.call(arguments, 1);
            objects.forEach(function(obj) {
                var props = Object.getOwnPropertyNames(obj);
                props.forEach(function(key) {
                    target[key] = obj[key];
                });
            });
            return target;
        },
        addClass: function(klass) {
            for (var i = 0, l = this.length; i < l; i++) {
                this.collection[i].className += " " + klass;
            }
            return this;
        }
    };
    fn.init.apply(this, fn.toArray(arguments));
};
var $ = function(selector, context) {
    return new lemon(selector, context);
};


366
2
задан 12 октября 2011 в 08:10 Источник Поделиться
Комментарии
1 ответ

Существует довольно проблема с вашим кодом: он будет восстанавливать ФН объект и все его методы каждый раз, когда лимон(селектор, контекст) конструктор вызывается. Вы можете избежать этого поведения с использованием шаблона проектирования модуля:

this.lemon = (function () {

var fn = {
/* The code for the fn object here
init: function (selector, context) {
var prop = this.prop;
...
*/

return function lemon() {
this.prop = {
collection: []
};
fn.init.apply(this, fn.toArray(arguments));
};

})();

Однако, вы должны добавить строку ВАР проп = это.проп; в начале каждого метода ФН объект, который требует опоры.

Также, при внедрении новой глобальной переменной, это лучше для читабельности вашего кода, чтобы использовать это.аргумент myVar = значения MyValue; или окно.аргумент myVar = значения MyValue;. В самом деле, ВАР ключевое слово должно быть использовано только для локальных переменных.

Наконец, это часто рекомендуется поставить пробел между функцией сайта и после скобки, но это не обязательно.

2
ответ дан 14 октября 2011 в 04:10 Источник Поделиться