如何在开发和生产中构造JavaScript应用程序

我正在构建我的第一个（非意大利面）大型JavaScript应用程序。虽然JavaScript的依赖项管理框架和其他依赖项管理框架的引入使文件更容易拆分，我不清楚如何将大型代码库推送到生产中。我想要的是一种聚合和缩小/丑陋我的JavaScripts以用于生产的方法，使用和之类的东西。或者其他方法，如果有意义的话

生产中使用大型JavaScript应用程序的开发人员在开发和生产中如何处理其结构？

例如，我可以在开发中使用RequireJS，然后使用Ready/Uglify来聚合/缩小。但是这样我的代码就会有毫无意义的

require（）

散落在各处。我相信有更好的方法

我还对在这些文件中包含jQuery感到困惑。我是否应该将每个单独的jQuery文件（例如使用jQuery的主干视图）包装到它们自己单独的

$（document.ready（function（）{…}）

？那看起来很不干。

我发现它对我很合适。如果你不使用YUI 3，我不确定它有多有用，但你很有可能会根据自己的需要调整它

另一方面，你看过吗

关于

文件。准备好
处理；我认为在初始化或调用模块之前，最好不要让模块中的代码做任何事情。因此，我将在页面底部的
标记中有一个
$（document）.ready（）
，它将该页面上需要的模块“粘在一起”。
您可以使用。即使在压缩的应用程序中，requires也不是毫无意义的，因为您必须始终获得对模块的引用。optimizer文档还说，它将不包括已加载变量的模块，如

var mods = someCondition ? ['a', 'b'], ['c', 'd'];
require(mods);

我认为RequireJS应该等到DOM准备好并且所有模块都已加载，所以您不需要包装每个文件

也就是说，我最喜欢的包管理器仍然是。它可以在生产构建中排除不必要的调用，并且模块总是封装在一个闭包中，该闭包传递jQuery对象，并等待DOM准备好并且加载所有脚本。不幸的是，它还不能与CommonJS模块规范兼容。
反意大利面方式
为了有效地开发和轻松地维护JavaScript应用程序，而不是使用大量临时脚本或不完全透明的自动化，您可以使用。不写太多就不可能涵盖Qooxdoo，但对于本机应用程序（不要将术语与C或Java混淆，Qooxdoo是纯JavaScript），其描述如下：

适用于使用基于自定义HTML/CSS的GUI而不是qooxdoo的小部件层的应用程序

因此，这样的应用程序不使用任何Qooxdoo UI层，只使用代码结构工具和构建工具。Qooxdoo中的代码按类组织，每个文件一个，就像Java中一样。我可能看起来像这样：

/**
 * @use(website.library.MosaicFlow)
 */
qx.Class.define('website.controller.Gallery', {

  extend : website.controller.Abstract,

  members : {

    _baseUrl : 'https://picasaweb.google.com/data/feed/api',


    _render : function(photos)
    {
      q('.preloader').remove();

      q.template.get('gallery-template', {'photos': photos}).appendTo('#gallery-container');
      var gallery = window.jQuery('#gallery-container .gallery').mosaicflow({
        'minItemWidth'    : 256,
        'itemSelector'    : '.photo',
        'autoCalculation' : false
      });
      gallery.trigger('resize');
    },

    _convert : function(item, index)
    {
      try
      {
        return {
          'url'     : item.content.src,
          'summary' : item.summary.$t,
          'thumb'   : item.media$group.media$thumbnail[0]
        };
      }
      catch(ex)
      {
        this.debug('failed to convert', index, item);
        return null;
      }
    },

    _onLoadSuccess : function(event)
    {
      var request  = event.getTarget();
      var response = request.getResponse();
      if(!qx.lang.Type.isObject(response) || !('feed' in response))
      {
        request.debug('Malformed response received');
      }
      else
      {
        this._render(response.feed.entry.map(this._convert, this).filter(function(item)
        {
          return !!item;
        }));
      }
    },

    _onLoadFail : function()
    {
      this.debug('Picasa search failed');
    },

    main : function()
    {
      var query   = /^\/gallery\/(\w+)$/.exec(window.location.pathname);
      var request = new qx.io.request.Jsonp(qx.lang.String.format('%1/all', [this._baseUrl]));
      request.setRequestData({
        'q'           : query[1],
        'thumbsize'   : 300,
        'max-results' : 20,
        'alt'         : 'json'
      });
      request.setTimeout(16000);
      request.setCache(false);
      request.addListener('fail',    this._onLoadFail,    this);
      request.addListener('success', this._onLoadSuccess, this);
      request.send();
    }

  }

});

Qooxdoo对象模型利用了这两个方面。In具有Java等成熟平台的特性，同时它是现代的和动态的，提供类、继承、接口、混合、事件、属性、数据绑定等。因为每个类都有一个已定义的名称并位于命名空间树中，所以Qooxdoo生成器可以利用它。它解析类并构建它们的语法树。然后解决依赖关系。也就是说，当你引用另一个类时，比如
website.controller.Abstract
。这将导致依赖关系图，该图用于按正确顺序加载脚本。请注意，这一切都是自动的，对开发人员来说是透明的，并且文件是按原样加载的。没有像CommonJS那样的进程，也没有像AMD那样用难看的样板来包装代码

正如您在上面的示例中所看到的，可以处理外部非qooxdoo库。您只需要为库编写一个虚拟包装器就可以将其包含在构建过程中

开发和生产环境
您使用所谓的源目标开发构建应用程序（只有在代码中引入新的依赖项时才需要构建）。您的应用程序文件将按依赖项顺序逐个加载。框架文件可以一个接一个地加载，或者哪一个更好的选择是在几个大块中构建。在生产环境中，应用程序代码是使用构建目标构建的。您可以选择生成单个输出文件，或者进行部分构建，其中代码被分块到大文件中（您可以控制它们的大小）。部分构建可能如下所示（优化/压缩）：

请注意，部件是按需加载到需要它们的页面上的

http://example.com/
└── website.js
http://example.com/article
└── website.js
http://example.com/form
└── website.js
    └── website.f86294b58d1a.js
http://example.com/gallery
└── website.js
    └── website.f6ffa57fc541.js
http://example.com/geo
└── website.js

因为Qooxdoo还没有针对全面的网站构建，只是提供了一个本地应用程序类型的平台，所以您需要对应用程序的条目和一些基础知识进行编码，比如引导、URL路由等。我尝试用上面的例子来解决这个问题。你可以自由使用它，也可以自己写

最后请注意，它可能不像普通JavaScript库那样容易启动，但其复杂性与最终的好处成正比。
这太棒了。StealJS看起来不错，但我更喜欢RequireJS的功能。如果你不介意分享的话，我很想知道更多关于你整个构建过程的信息。在部署步骤中，您在哪里运行优化器？你会随同它一起测试吗？你测试过优化的JS吗？我可以在另一个问题中问这个问题，但我确实有一段关于“最佳实践”类型问题的糟糕历史。尽管StealJS本身运行得很好，但它是JavaScriptMVC框架（）的一部分，这是我用来构建的，构建和测试我的应用程序，并自行处理所有这些事情（这是我所知道的唯一一个完整包含JavaScript的解决方案）。+1感谢您接受使用非意大利面javascri
http://example.com/
└── website.js
http://example.com/article
└── website.js
http://example.com/form
└── website.js
    └── website.f86294b58d1a.js
http://example.com/gallery
└── website.js
    └── website.f6ffa57fc541.js
http://example.com/geo
└── website.js