Rails 3.2：如何将大型 javascript 文件拆分为许多“部分”？答案

【问题标题】：Rails 3.2: How do I split large javascript file into many "partials"?Rails 3.2：如何将大型 javascript 文件拆分为许多“部分”？
【发布时间】：2013-06-29 21:04:34
【问题描述】：

使用 Rails 资产管道，我想知道如何将大型 javascript 文件拆分为许多不同的部分。

例如：

YUI().use('app', function(Y) {
    //*=require sub/file_a.js
    //*=require sub/file_b.js
    //*=require sub/file_c.js
    //*=require sub/file_d.js
});
// this obviously is not the answer & does not work.

这只是为了让开发人员受益于拥有一个看起来更干净的 JS 文件，而不是一个充满 YUI 视图和模型的巨大应用程序。

我已经尝试过使用 ERB 来包含一个文件，但没有成功。渲染在资产管道中不可用，所以这也是一个失败。

有什么想法吗？

最终结果仍将由 rake compile:assets:all 编译 -- 所以这只会在开发环境中使用。

【问题讨论】：

标签： javascript ruby-on-rails erb pipeline partials

【解决方案1】：

charlysisto 的想法是正确的。

答案是使用 Sprockets 和 YUI 模块作为视图/模型。

//*=require_self
//*=require view/file_a.js
//*=require model/file_a.js
//*=require view/file_b.js
//*=require model/file_b.js
YUI().use('app','app-view-file-a','app-view-file-b','app-model-file-a','app-model-file-b', function(Y) {
    Y.FileApp = Y.Base.create('fileApp', Y.App, [], {
        views: {
            fileA: {type: 'FileAView'},
            fileB: {type: 'FileBView'}
        }
    }, {
        ATTRS: {
            root: {value: '/'}
        }
    });

    var app = new Y.FileApp({
        contentSelector: '#pjax-content',
        serverRouting: true,
        transitions: true,
        container: '#file-app',
        viewContainer: '#file-app-views'
    }).render().showContent('#pjax-content', {view: 'FileAView'});
});

在视图和模型文件中，您只需像创建普通 YUI3 模块一样创建它们：

YUI.add('app-view-file-a', function(Y) {
  Y.namespace('FileAView');
  FileAView = Y.Base.create('fileAView', Y.View, [], {
      template: Y.Handlebars.compile(Y.one('#file-a-template').getHTML())
  });
  Y.FileAView = FileAView;
},'0.1.0',{requires:['node','handlebars'], skinnable:false});

一开始，我实际上让 File.read 在 JS 中工作。但是这种方法看起来很乱，在开发领域效果不佳。 Rails 从来不知道要重新编译“父”js 文件，因为时间戳没有改变。如果您不使用 YUI，File.read 解决方案可能适合您——但我会寻找不同的解决方案。每次更改子模块时都必须输入新行并删除，这很烦人。

【讨论】：

【解决方案2】：

根据您的部分内容，您可以将它们包含的对象包装在 vars 中，以便您可以这样做：

//*=require sub/file_a.js
//*=require sub/file_b.js
//*=require sub/file_c.js
//*=require sub/file_d.js

YUI().use('app', function(Y) {file_a + file_b ...})

不确定它是否适合您的情况，不知道部分内容是什么以及 YUI().use 需要什么样的参数...

【讨论】：