Программирование ООП в Javascript - Правильно - PullRequest
6 голосов
/ 28 апреля 2011

Я заинтересован в том, чтобы улучшить мой код javascript для правильной ООП ... в настоящее время я склонен делать что-то вроде этого:

jQuery(document).ready(function () {
    Page.form = (function () {
        return {
            //generate a new PDF
            generatePDF: function () {

            },
            //Update the list of PDFs available for download
            updatePDFDownloads: function () {

            },
            /*
             * Field specific functionality
             */
            field: (function () {
                return {
                    //show the edit prompt
                    edit: function (id, name) {

                    },
                    //refresh the value of a field with the latest from the database
                    refresh: function (id) {

                    }
                };
            }())
        };
    }());
});

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

Похоже, мне следует создать своего рода прототип модели, и мой form объект наследуется от этого прототипа.

(я использую jQuery вместо $ из-за конфликтов с prototypeJS)

Ответы [ 6 ]

7 голосов
/ 29 апреля 2011

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

Относительно кода, который вы показали.Вы перепрыгиваете пару лишних обручей.

  1. Если вы не обращаетесь к DOM каким-либо образом, нет необходимости заключать код в jQuery(document).ready()
  2. не нужно возвращать объект из самоназванной анонимной функции, если вы не закрываете некоторые частные функции или данные

Созданный вами объект может быть создан проще (хорошая вещь), как этот

var Page = {
    form: {
        //generate a new PDF
        generatePDF: function () {

        },
        //Update the list of PDFs available for download
        updatePDFDownloads: function () {

        },
        /*
        * Field specific functionality
        */
        field: {
            //show the edit prompt
            edit: function (id, name) {

            },
            //refresh the value of a field with the latest from the database
            refresh: function (id) {

            }
        }
    }
};

Легче читать и меньше сбивать с толку, только делать то, что вам что-то покупает.см. программирование грузового культа

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

var Obj = (function() {
    privateFunction( param ) {
        // do something with param
    }

    var privateVar = 10;

    return {
        // publicMethod has access to privateFunction and privateVar
        publicMethod: function() {
            return privateFunction( privateVar );
        }
    }

})();

Структура, которую вы использовали, литералы объектов очень хороши,как вы говорите, при группировке множество функций (методов) и свойств.Это своего рода пространство имен.Это также способ создания Singleton .Вы также можете захотеть создать много объектов одного и того же класса.
JavaScript не имеет классов, подобных традиционным языкам ОО (я вернусь к этому), но на простейшем уровне очень просто создать «шаблон» для созданияобъекты определенного типа.Эти «шаблоны» являются обычными функциями, которые называются конструкторами.

// a constructor
// it creates a drink with a particular thirst quenchingness
function Drink( quenchingness ) {
    this.quenchingness = quenchingness;
}

// all drinks created with the Drink constructor get the chill method
// which works on their own particular quenchingness
Drink.prototype.chill = function() {
   this.quenchingness *= 2; //twice as thirst quenching
}

var orange = new Drink( 10 );
var beer   = new Drink( 125 );

var i_will_have = ( orange.quenchingness > beer.quenchingness ) 
    ? orange 
    : beer; //beer

var beer2  = new Drink( 125 );
beer2.chill();

var i_will_have = ( beer2.quenchingness > beer.quenchingness )
    ? beer2 
    : beer; //beer2 - it's been chilled!

О конструкторах можно многое узнать.Вам придется искать вокруг.Существует множество примеров SO.
Наследование, основание OO, не настолько интуитивно понятно в js, потому что оно является прототипом.Я не буду вдаваться в подробности, потому что вы, скорее всего, не будете напрямую использовать нативную парадигму наследования прототипов js.
Это потому, что есть библиотеки, которые очень эффективно имитируют классическое наследование, Prototype (наследование) или mootools (класс) например. Там есть другие .

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

Шаблоны проектирования в JavaScript так же полезны, как и на любом языке OO, и вам следует ознакомиться с ними

Я рекомендую вам прочитать Шаблоны проектирования Pro JavaScript .Вот и все

1 голос
/ 29 апреля 2011
1 голос
/ 29 апреля 2011

Не существует одного правильного способа ... Некоторые люди используют каркас для определения своего объекта, мне нравится просто расширять прототип напрямую.В любом случае, я хотел сказать, что у Орана Луни есть несколько хороших постов по ОО механике в JS:

http://oranlooney.com/classes-and-objects-javascript/

Также стоит посмотреть другие его статьи:

http://oranlooney.com/deep-copy-javascript/ http://oranlooney.com/functional-javascript/

0 голосов
/ 25 октября 2012

Код, который мы используем, следует этой базовой структуре:

//Create and define Global NameSpace Object
( function(GlobalObject, $, undefined) 
{
    GlobalObject.Method = function()
    {
        ///<summary></summary>
    }

}) (GlobalObject = GlobalObject || {}, jQuery);

//New object for specific functionality
( function(Functionality.Events, $, undefined)
{
    //Member Variables 
    var Variable; // (Used for) , (type)

    // Initialize
    GlobalObject.Functionality.Events.Init = function()
    {
        ///<summary></summary>
    }

    // public method
    this.PublicMethod = function(oParam)
    {
        ///<summary></summary>
        ///<param type=""></param>
    }

    // protected method (typically define in global object, but can be made available from here)
    GlobalObject.Functionality.ProtectedMethod = function()
    {
        ///<summary></summary>
    }

    // internal method (typically define in global object, but can be made available from here)
    GlobalObject.InternalMethod = function()
    {
        ///<summary></summary>
    }

    // private method
    var privateMethod = function()
    {
        ///<summary></summary>
    }
}) (GlobalObject.Funcitonality.Events = GlobalObject.Funcitonality.Events || {}, jQuery )

Сила этого в том, что он автоматически инициализирует глобальный объект, позволяет поддерживать целостность вашего кода и организует каждый фрагментфункциональность в конкретную группу по вашему определению.Эта структура является надежной, представляя все основные синтаксические вещи, которые можно ожидать от ООП без ключевых слов.Даже настройка intelisense возможна с помощью javascript, а затем определение каждого кусочка и ссылки на них делает написание javascript более чистым и более управляемым.Надеюсь, этот макет поможет!

0 голосов
/ 28 апреля 2011

Я не думаю, что это имеет значение, какой язык вы используете, хороший ООП - это хороший ООП.Мне нравится максимально разделять свои проблемы, используя архитектуру MVC.Поскольку JavaScript основан на событиях, я также в основном использую шаблон проектирования наблюдателя.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...