1

我是 UJS 的粉丝很长时间了，我通常把我所有的代码都放在 application.js 中（jquery，不是原型）

但是，我遇到了一个巨大的项目，如果不加注意，application.js 会膨胀，我不希望这种情况发生，特别是因为我的大部分功能/行为都将基于特定页面。现在，我倾向于将 javascript 调用放在特定的部分上，如下所示：

在 _test_partial.html.haml 上：

%p= link_to "Expand All", '#', :class => "expand-categories"

:javascript
  $(function() {
    $('.expand-categories').click( function() {
      $(".test-cases").slideToggle();
      return false;
    })
  })

或者，如果我真的想要“不引人注目”的东西：

%p= link_to "Expand All", '#', :class => "expand-categories"

= javascript_include_tag 'test-categories.js'

但是在我看来，这仍然很突兀，好像我必须编辑代码/行为，我将不得不寻找有关的部分。另一方面，我需要编辑一个函数的 1MB（有很多页面，并且可能会有很多页面特定的代码）application.js 不是那么容易。

通常对此有何看法？有没有办法让我命名一个js文件ala RJS，比如test_partial.js.erb os什么的？

4

2 回答 2

2

我个人尽量将我所有的 javascript 保存在 public/javascript 下。但是，我将 application.js 文件分解为基于“子域”的多个文件，例如 application.profiles.js、application.albums.js 等……每个文件都实现了Module Pattern。这种方法允许您很好地划分您的 javascript 代码，根据需要加载它，我相信可以解决您对能够快速找到函数的担忧。

给定一个文件或“子域”（例如 application.profiles.js），您可以使用本文中描述的“增强模式”进一步划分您的代码。所以你最终可能会得到类似 application.profiles.core.js 和 application.profiles.viewer.js 的东西，例如，application.profiles.viewer.js 模块扩充了 application.profile.core.js 模块。

希望这可以帮助。

于 2011-02-15T08:06:33.660 回答
1

最近我一直在使用数据参数，因为 rails.js 已经这样做了。因此，如果我有类似您的问题的问题，我会将脚本放置在 application.js 中，或者，如果它是一个复杂的项目，则放置在其中一个 JavaScript“类”中（稍后将解释）。

%p= link_to "Expand All", '#', :"data-action" => "expand-categories"

和

// application.js
$('[data-action="expand-categories"]').bind('click', expand_categories);

至于使用模式，我为应用程序的每个部分创建逻辑分离的 javascript 文件。到目前为止，前端和后端的单独文件对我来说已经足够了，但它可以用于每个特征模式。这是一个相当复杂的模式，但易于维护，它是这样的（使用 head.js）：

// application.js
head(function () {
  if ($([data-action="expand-categories"]).length) {
    var expand_categories = new ExpandCategories();
    expand_categories.init();
  }
}

...

// expand_categories.js
var ExpandCategories;
ExpandCategories = function(){

  var self;
  self = this;

  self.init = function(){
    /* 
     * This is something like public method.
     * Use it to call some private method depending on some condition
     */

    // no need to check for existance, we did it on application.js
    var expand = $('[data-action="expand-categories"]'); 
    if (expand.text("some specific text")) {
       expand.live('click', expand_categories);
    }
  }

  var expand_categories(){
    // This is something like "private" method
    // ... expand categories
  }

}
于 2011-02-15T09:08:03.177 回答