ООП Java-esque в JavaScript и сбой jQuery

Question

Я работаю над проектом и действительно пытаюсь написать объектно-ориентированный код JavaScript. Я только начал читать JavaScript Дугласа Крокфорда: Хорошие части , и я быстро начинаю понимать, что написание Java-ООП в JavaScript будет сложной задачей.

Пока что я написал что-то вроде следующего ...

// index.html
$(document).ready(function() {

   $().SetUpElements();
});

// this is in a different js file
$.fn.SetUpElements = function() {

    // do stuff here
    $().UpdateElement();
};

// this is in yet another different js file
$.fn.UpdateElement = function() {

   // do stuff here
   var element = new Element(id, name); // continue doing work
};

function Element(id, name) {

   var id = id;
   var name = name;

   // other stuff
};

... идея в том, что я хочу, чтобы объекты / функции подвергались рефакторингу и разъединению в максимально возможной степени; Я хочу использовать как можно больше кода. Я распространил большую часть своего кода по разным файлам .js с целью группировки конкретного релевантного кода, как если бы вы писали разные классы на Java.

Поскольку я узнал больше о jQuery, я понял, что нотация $.fn.foo = function() { ... }; фактически добавляет эту функцию foo к прототипу всех объектов jQuery. Это то, что я должен делать? Я неправильно использую JQuery?

Буду признателен за предложения о том, как улучшить мой подход к ООП в JavaScript, и мне очень хотелось бы видеть ссылки на источники / учебные пособия / статьи / и т. Д., В которых обсуждается эта тема. Пожалуйста, не стесняйтесь оставлять отзывы, даже если ответ был выбран. Я ищу ваш совет ... вот почему я отправил:)

** Примечание: я не разрабатываю плагин jQuery. Я занимаюсь разработкой веб-приложения и активно использую jQuery.

Answer 1

Если это не плагин jquery, я бы написал что-то вроде этого:

    var app = {
      init: function(){
        app.SetUpElements();
      },
      SetUpElements: function() {
        return 'something';
      }, 
      etc: function() {

      }
    };
   $(document).ready(app.init);

Answer 2

Что касается ОО в Javascript, вы должны посмотреть Уроки Дугласа Крокфорда по расширенному Javascript

Answer 3

Я бы сказал, что первый способ создания методов - это неправильное использование jQuery. Синтаксис jQuery.fn.foo обычно зарезервирован для функций, которые действуют на элемент DOM, но вы используете их как статические функции, используя пустой объект jQuery.

Если вы хотите создать статические функции в пространстве имен jQuery, вы можете сделать:

jQuery.foo = function(){};

затем позвоните через:

jQuery.foo();

вместо:

jQuery.fn.foo = function(){};

, что позволяет вам:

jQuery('#someElementId').foo();

С точки зрения ООП. Есть много разных подходов (шаблон модуля, прототип, фабрика ...). Обычно я подхожу к этому, создав Класс как статическую функцию, затем вызывая его с ключевым словом new

(function($){
    var undefined;

    $.ClassName = function(options){
        var self = this;
        var cfg = $.extend(true, {}, this.defaults, options);

        // ********************
        // start:private
        // ********************
        function _init(){

        };

        // ********************
        // start:public
        // ********************
        this.methodName = function(){

        };

        _init();
    };

    $.ClassName.prototype.defaults = {};
})(jQuery);

С точки зрения повторного использования функциональности, существует порог, после которого разделение является более вредным, чем что-либо еще. Убедитесь, что вы соблюдаете правильный баланс модульности и организации.

Answer 4

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

Ознакомьтесь с этой документацией на веб-сайте jQuery., который дает превосходное объяснение того, как обеспечить доступ к различным повторно используемым функциям, в то же время требуя только одного имени для объекта jQuery.

Другой метод, который я видел, используется для обеспечения единственной инициализациифункция для вашего плагина в пространстве имен jQuery, а затем сделать дополнительное специальное имя плагина доступным в глобальном пространстве имен, которое обеспечивает более прямой доступ к функции / членам и т. д. Плагин Galleria отличный пример того, как сделать это хорошо.Изучите их документацию и то, как они настраивают структуру плагина.

РЕДАКТИРОВАТЬ

Убедившись, что вы не делаетеплагин: многие из вещей, которые я сказал, все еще применимы к общей разработке jQuery (и действительно, к разработке в целом).

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

Что касается пространства имен, взгляните на принятый ответНа этот вопрос приведен пример того, как сделать это правильно: Как объявить пространство имен в JavaScript?

А вот отличный ресурс для ОО в JavaScript.Я использовал эту статью, когда пытался обернуть голову вокруг концепции: http://mckoss.com/jscript/object.htm

Answer 5

Как уже упоминалось большинством, если вы явно не создаете публичный плагин, не используйте пользовательские функции jQuery.Вместо этого создайте свое собственное пространство имен, используя простую систему обозначений объектов или что-то более надежное, например, Module Pattern .Если вы хотите сойти с ума, вы можете использовать API поверх API, чтобы получить более классический шаблон ОО, используя База Дина Эдварда .Конечная цель - извлечь ваши функциональные и дизайнерские требования из jQuery API.Таким образом, если вам когда-нибудь понадобится перенести что-то на Mootools или Prototype, это будет гораздо проще сделать.

Answer 6

Похоже, вы пишете весь свой код в виде плагинов jQuery? Я бы не стал этого делать. Создайте свое собственное пространство имен.

Какова цель, чтобы поместить все в разные файлы? Если они не являются сценариями, которые будут использоваться для конкретных страниц, это только усложняет управление вещами. Все они похожи на общие библиотечные функции. Если вы не думаете, что захотите загрузить некоторые из них на одной странице, но не все, то поместите их все в один файл.

Объектно-ориентированное программирование не означает фрагментирование файлов по файлам. Это просто организация, вы должны разбивать вещи на разные файлы, когда вам не нужно все содержимое какой-либо страницы.