Поддержание структурированности и чистоты вашего javascript (как программиста OO)

Question

Я недавно играл с javascript, HTML5, расширениями chrome, jQuery и всем этим хорошим материалом. Я до сих пор впечатлен возможностями javascript, единственное, с чем я борюсь, это структурировать мой код и поддерживать его в чистоте. Прежде чем я это знаю, функции разбросаны повсюду. Я всегда делал свое программирование объектно-ориентированным способом (C ++ и C #), и я чувствую, что не могу поддерживать порядок в порядке. Такое ощущение, что я всегда получаю кучу статических утилитарных функций, если бы я «думал» в C #.

Я искал некоторую информацию об объектах в javascript, но , похоже, сводится к обертыванию функций в функции. Это хороший способ структурировать вашу кодовую базу? На первый взгляд это кажется немного хакерским. Или есть другие способы сохранить порядок для OO мышления?

Answer 1

Я обычно следую шаблону make-an-anonymous-function-then-call-it .По сути, вы создаете внутреннюю область и возвращаете один объект, содержащий ваш интерфейс.Больше ничего не ускользает, потому что все это захвачено внутри области действия функции.Вот пример использования jQuery:

var FancyWidget = (function($) {
    // jQuery is passed as an argument, not referred to directly
    // So it can work with other frameworks that also use $

    // Utility functions, constants etc can be written here
    // they won't escape the enclosing scope unless you say so
    function message(thing) {
       alert("Fancy widget says: " + thing);
    }

    // Make a simple class encapsulating your widget
    function FancyWidget(container) {
        container = $(container); // Wrap the container in a jQuery object
        this.container = container; // Store it as an attribute

        var thisObj = this;
        container.find("#clickme").click(function() {
            // Inside the event handler, "this" refers to the element
            // being clicked, not your FancyWidget -- so we need to
            // refer to thisObj instead
            thisObj.handleClick();
        });
    }

    // Add methods to your widget
    FancyWidget.prototype.handleClick = function() {
        this.container.find("#textbox").text("You clicked me!");
        message("Hello!");
    };

    return FancyWidget; // Return your widget class
                        // Note that this is the only thing that escapes;
                        // Everything else is inaccessible
})(jQuery);

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

Вы можете определить несколькозанятия тоже таким образом;вместо использования return FancyWidget вы можете вернуть литерал объекта:

    return {
        FancyWidget: FancyWidget,
        Frobnicator: Frobnicator,

        // Nested namespaces!
        extra: {
            thing: thing,
            blah: blah
        }
    };

Answer 2

Один важный аспект, который следует помнить о Javascript, это то, что это прототип языка.Функции могут быть объектами, и на объект может быть наложено что угодно, что часто влияет на связанные объекты в процессе.Из-за этого не существует официального способа «расширить» объект.Это концепция, которую мне до сих пор трудно понять.

Javascript по большей части «действует» как любой другой язык ООП, за некоторыми исключениями, а именно расширяющими объектами (http://jsweeneydev.net84.net/blog/Javascript_Prototype.html).

После обширных исследований,Я нашел очень, очень легкий способ имитации расширяющихся объектов (я использую его в своем GameAPI). Первое поле - это родительский объект, второе - это объект, который расширяется.

extend  : function(SuperFunction, SubFunction) {

    //'Extends' an object

    SubFunction.prototype = new SuperFunction();
    SubFunction.prototype.constructor = SubFunction;
},

Эта ссылка может прояснить некоторые проблемы и заблуждения: http://www.coolpage.com/developer/javascript/Correct%20OOP%20for%20Javascript.html

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

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

Удачи в поисках огня.

Answer 3

Одной из лучших библиотек JavaScript OOP является библиотека Google Closure http://closure -library.googlecode.com / svn / docs / index.html

Он структурирован таким образом, что программисты ООП будут знакомы с ним, особенно если вы пришли из java / C # фона. Посмотрите на исходный код любого файла, и он должен чувствовать себя как дома как программист ООП. http://closure -library.googlecode.com / SVN / Docs / closure_goog_graphics_canvasgraphics.js.source.html

Answer 4

Хорошей идеей может быть использование некоторого фреймворка, отвечающего схожим требованиям.

Но есть некоторые вещи, которым вы должны следовать, чтобы быть эффективными:

• помните о замыканиях в JavaScript и не забывайте о ключевом слове var,
• используйте обратные вызовы, где это возможно и разумно, JavaScript асинхронен по своей природе,

Answer 5

Я никогда не использовал это лично, но видел, как backbone.js много раз ссылался на этот вопрос. Смотрите по адресу: http://documentcloud.github.com/backbone/