Как вы структурируете свой код jQuery?

Question

Исходя из mootools и JAVA, реализация класса mootools - отличный способ структурировать мой код, плюс у меня могут быть такие приятные функции, как расширение, реализация и так далее. Начиная с jquery, я обнаружил, что сам пишу плагины $ .fn, которые не могут использовать код других плагинов. Плюс, кажется, не очень хорошая идея использовать структуру плагинов для сложных вещей, которые не имеют ничего общего с DOM Elements. Есть ли лучший способ, чем $ .fn? Что вы рекомендуете структурировать мой код, используя jquery.

Answer 1

Это сложный вопрос.

Недостатком невероятной гибкости JavaScript является то, что каждый программист и его зять имеют разные способы ведения дел.

Недостатком использования библиотеки для выполнения ООП на основе класса в JavaScript (библиотека прототипов, Moo, Joose, JS.Class, Base2 и т. Д.) Является то, что вы сразу же сокращаете количество коллег-программистов на JavaScript, которые можете прочитать ваш код.

Очевидно, что jQuery побуждает вас мыслить в терминах «коллекций». Коллекция - это то, что вы получаете от вызова $ () или jQuery (). Джон Резиг однажды подумал о добавлении системы классов в jQuery, но в итоге решил не делать этого. Я думаю, он сказал, что ему никогда не требовалась настоящая система «Класс» в программировании на JavaScript.

Для всех, кроме крупнейших JS-проектов, я бы сказал, забудьте о системе Class. Используйте невероятную систему объектов и массивов JS (включая литералы). Пространство имен (как переменные, так и методы).

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

Интересное расширение концепции коллекции jQuery содержится в плагине Ариэля Флезлера jQuery.Collection здесь . Это позволяет вам обращаться с «обычными» данными так же, как с данными DOM в jQuery.

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

Answer 2

Как правило, вам нужен механизм для расширения кода и упаковки .

В первом случае я использую псевдоклассный механизм oo по умолчанию, иногда с вспомогательной функцией, чтобы упростить наследование:

Function.prototype.derive = (function() {
    function Dummy() {}
    return function() {
        Dummy.prototype = this.prototype;
        return new Dummy;
    };
})();

function Base() {}
function Sub() {}
Sub.prototype = Base.derive();

Последнее может быть достигнуто с помощью пространства имен через самовыполняющиеся функции. Можно даже подделать операторы импорта:

// create package:
var foo = new (function() {
    // define package variables:
    this.bar = 'baz';
    this.spam = 'eggs';

    // export package variables:
    this.exports = (function(name, obj) {
        var acc = [];
        for(var prop in obj) {
            if(obj.hasOwnProperty(prop))
                acc.push(prop + '=' + name + '.' + prop);
        }
        return 'var ' + acc.join(',') + ';';
    })('foo', this);
});

// use package:
(function() {
    // import package variables:
    eval(foo.exports); 
    alert(spam);
})();

Answer 3

jQuery на самом деле не предназначен для структурирования вашего кода. Это инструмент, который вы используете из другого кода, а не образ жизни.

Остальная часть вашего кода должна быть написана так, как вам нравится. Просто используйте jQuery, если вы хотите выполнять DOM-манипуляции, Ajax-вызовы, кросс-браузерные события и т. Д.

Answer 4

Возможно, вы захотите узнать, как использовать свойство .prototype, чтобы поместить часть вашего кода в «классы», чтобы вы могли повторно использовать один и тот же код в разных местах, просто создав новую реализацию, в основном.

Вы также можете поместить код в объекты, чтобы у вас было уникальное пространство имен, чтобы было проще делить связанные объекты между различными проектами.

По сути, вы будете структурировать свой код так же, как и для простого javascript, но jQuery абстрагирует некоторые общие функции, поэтому вам не нужно беспокоиться о проблемах браузера, но это всего лишь помощник, на самом деле это не так. обеспечить структуру настолько, насколько просто сделать некоторые концепции проще. Например, вместо использования onclick я склонен использовать .bind ('click', ...), но это если я хочу иметь возможность более чем одного обработчика событий для элемента.