好的OO + MVC原则对于管理一个复杂的javascript应用程序肯定大有帮助。

基本上，我将我的应用程序和javascript组织成以下熟悉的设计(从我的桌面编程到Web 2.0一直存在)

图像上数值的说明:

Widgets representing the views of my application. This should be extensible and separated out neatly resulting good separation that MVC tries to achieve rather than turning my widget into a spaghetti code (equivalent in web app of putting a large block of Javascript directly in HTML). Each widget communicate via others by listening to the event generated by other widgets thus reducing the strong coupling between widgets that could lead to unmanageable code (remember the day of adding onclick everywhere pointing to a global functions in the script tag? Urgh...) Object models representing the data that I want to populate in the widgets and passing back and forth to the server. By encapsulating the data to its model, the application becomes data format agnostics. For example: while Naturally in Javascript these object models are mostly serialized and deserialized into JSON, if somehow the server is using XML for communication, all I need to change is changing the serialization/deserialization layer and not necessarily needs to change all the widget classes. Controller classes that manage the business logic and communication to the server + occasionally caching layer. This layer control the communication protocol to the server and put the necessary data into the object models Classes are wrapped neatly in their corresponding namespaces. I am sure we all know how nasty global namespace could be in Javascript.

In the past, I would separate the files into its own js and use common practice to create OO principles in Javascript. The problem that I soon found that there are multiple ways to write JS OO and it's not necessarily that all team members have the same approach. As the team got larger (in my case more than 15 people), this gets complicated as there is no standard approach for Object Oriented Javascript. At the same time I don't want to write my own framework and repeat some of the work that I am sure smarter people than I have solved.

jQuery是非常好的Javascript框架，我喜欢它，但随着项目越来越大，我显然需要额外的结构为我的web应用程序，特别是促进标准化OO实践。就我自己而言，经过几次试验，我发现YUI3 Base和Widget (http://yuilibrary.com/yui/docs/widget/和http://yuilibrary.com/yui/docs/base/index.html)基础设施完全满足了我的需要。我使用它们的几个原因。

It provides Namespace support. A real need for OO and neat organization of your code It support notion of classes and objects It gives a standardize means to add instance variables to your class It supports class extension neatly It provides constructor and destructor It provides render and event binding It has base widget framework Each widget now able to communicate to each other using standard event based model Most importantly, it gives all the engineers an OO Standard for Javascript development

与许多观点相反，我不一定要在jQuery和YUI3之间做出选择。这两者可以和平共处。虽然YUI3为我复杂的web应用程序提供了必要的OO模板，但jQuery仍然为我的团队提供了我们都喜欢和熟悉的易于使用的JS抽象。

使用YUI3，我成功地创建了MVC模式，通过分离将Base扩展为模型的类，将Widget扩展为视图的类，当然还有进行必要逻辑和服务器端调用的控制器类。

Widget可以使用基于事件的模型相互通信，并根据预定义的接口侦听事件并执行必要的任务。简单地说，把OO + MVC结构的JS是一个乐趣对我来说。

声明一下，我不是为雅虎工作的!仅仅是一个建筑师在试图解决最初的问题所带来的问题。我认为如果有人找到了等效的OO框架，这也可以。基本上，这个问题也适用于其他技术。感谢所有提出OO原则+ MVC的人，使我们的编程更易于管理。

几天前，37Signals的人发布了一个RTE控件。他们制作了一个库，使用一种预处理器命令捆绑javascript文件。

我一直在用它来分离我的JS文件，然后在最后合并为一个。这样我就可以分离关注点，并且最终只有一个文件通过管道(gzip的)。

在模板中，检查是否处于开发模式，并包含单独的文件，如果处于生产模式，则包括最后一个文件(您必须自己“构建”)。

代码组织要求采用约定和文档标准: 1. 物理文件的命名空间代码;

Exc = {};

2. 在这些命名空间javascript中分组类; 3.设置原型或相关的函数或类来表示真实世界的对象;

Exc = {};
Exc.ui = {};
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};
Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    ...
};

4. 设置约定以改进代码。例如，将其所有内部函数或方法分组在对象类型的class属性中。

Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    this.internal = {
        widthEstimates: function (tips) {
            ...
        }
        formatTips: function () {
            ...
        }
    };
    ...
};

5. 制作名称空间、类、方法和变量的文档。必要时也讨论一些代码(一些fi和for，它们通常实现代码的重要逻辑)。

/**
  * Namespace <i> Example </i> created to group other namespaces of the "Example".  
  */
Exc = {};
/**
  * Namespace <i> ui </i> created with the aim of grouping namespaces user interface.
  */
Exc.ui = {};

/**
  * Class <i> maskdInput </i> used to add an input HTML formatting capabilities and validation of data and information.
  * @ Param {String} mask - mask validation of input data.
  */
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};

/**
  * Class <i> domTips </i> used to add an HTML element the ability to present tips and information about its function or rule input etc..
  * @ Param {String} id - id of the HTML element.
  * @ Param {String} tips - tips on the element that will appear when the mouse is over the element whose identifier is id <i> </i>.
  */
  Exc.ui.domTips = function (id, tips) {
    this.domID = id;
    this.tips = tips;
    ...
};

这些只是一些技巧，但这对组织代码有很大帮助。记住，你必须自律才能成功!

创建假类，并确保任何可以被扔进单独函数的有意义的东西都被这样做了。还要确保大量注释，而不是编写面条式的代码，而是将代码分块编写。例如，一些无意义的代码描述了我的理想。显然，在现实生活中，我也编写了许多包含它们功能的库。

$(function(){
    //Preload header images
    $('a.rollover').preload();

    //Create new datagrid
    var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});

var datagrid = {
    init: function(w, url, style){
        //Rendering code goes here for style / width
        //code etc

        //Fetch data in
        $.get(url, {}, function(data){
            data = data.split('\n');
            for(var i=0; i < data.length; i++){
                //fetching data
            }
        })
    },
    refresh: function(deep){
        //more functions etc.
    }
};

我使用Dojo的包管理(Dojo。Require和dojo. provider)和类系统(dojo.declare，它还允许简单的多重继承)将我所有的类/小部件模块化到单独的文件中。这不仅能让你的代码保持有序，而且还能让你对类/小部件进行惰性/及时加载。

我的老板仍然在谈论他们编写模块化代码(C语言)的时代，并抱怨现在的代码是多么糟糕!据说程序员可以在任何框架中编写程序集。总有一种策略可以克服代码组织。最基本的问题是那些把java脚本当作玩具的人，从来没有尝试去学习它。

在我的例子中，我在UI主题或应用程序屏幕的基础上编写js文件，使用适当的init_screen()。使用适当的id命名约定，我确保在根元素级别上没有名称空间冲突。在不引人注目的window.load()中，我根据顶级id将内容绑定起来。

我严格使用java脚本闭包和模式来隐藏所有私有方法。这样做之后，再也没有遇到属性/函数定义/变量定义冲突的问题。然而，当与团队一起工作时，通常很难执行同样的严格性。