Question

我最近一直在玩javascript，HTML5，Chrome扩展程序，jQuery以及所有好东西。到目前为止，我对javascript的可能性印象深刻，我唯一挣扎的是构建我的代码并保持整洁。在我知道之前，功能遍布整个地方。我总是以面向对象的方式（C ++和C＃）完成我的编程，我发现自己无法保持整洁。感觉就像我总是最终得到一堆静态的util函数，我是否在C＃中“思考”。

我一直在寻找javascript中有关对象的一些信息，但seems to come down to wrapping functions in functions.这是构建代码库的好方法吗？从表面上看，它看起来有些神圣。或者还有其他方法可以保持OO心态的整洁吗？

Answer 1

记住Javascript的一个重要方面是它是一种原型语言。函数可以是对象，任何东西都可以放在对象上，通常会影响过程中的相关对象。由于这个原因，没有正式的方法来“扩展”一个对象。这是一个我仍然很难理解的概念。

Javascript'act'就像大多数其他OOP语言一样，有一些例外，即扩展对象（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的原型风格，而不是强迫旧的方法论。我知道这很棘手;我还在努力。

祝你好运digforforfire。

Answer 2

我通常遵循 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 3

我从未亲自使用过这个，但是看过backbone.js多次引用这个问题。见：http://documentcloud.github.com/backbone/

Answer 4

最好的OOP javascript库之一是Google的Closure库http://closure-library.googlecode.com/svn/docs/index.html

它的结构是OOP程序员熟悉的，特别是如果你来自java / C＃背景。看看任何文件的源代码，作为OOP程序员，它应该感觉像在家一样。 http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_canvasgraphics.js.source.html

Answer 5

使用一些旨在满足类似要求的框架可能是一个好主意。

但是为了提高效率，你应该遵循一些事情：

请记住JavaScript中的闭包，不要忘记var关键字
尽可能使用回调，JavaScript本质上是异步的，

保持你的javascript结构和整洁（作为OO程序员）

5 个答案: