Rails 3有一些不引人注目的JavaScript,非常酷.
但我想知道最好的方法是为特定页面添加额外的JavaScript.
例如,我之前可能做过的事情:
<%= f.radio_button :rating, 'positive', :onclick => "$('some_div').show();" %>
我们现在可以用类似的东西使它不引人注目
<%= f.radio_button :rating, 'positive' %>
# then in some other file
$('user_rating_positive').click(function() {
$('some_div').show();
}
所以我想我的问题是在哪里/如何包含JavaScript？我不想填写该application.js文件,因为此JavaScript仅适用于此视图.我应该以某种方式为每个页面包含一个自定义JavaScript文件,还是将其粘贴在标题所查找的实例变量中？
如果我在Rails 3.1中生成一个新的控制器,也会自动添加一个带有控制器名称的javascript文件.首先,我认为这个javascript文件只会在调用相关控制器时使用.
默认情况下//= require_tree .,application.js-file中有指令,包括树上的每个javascript文件.
我怎么才能加载控制器特定的脚本？
assets ruby-on-rails ruby-on-rails-3.1 sprockets asset-pipeline
根据'不引人注目的JavaScript'建议,我想将我的JavaScript逻辑分成
单独的文件.但是我不知道如何组织它们.
我是不是该:
我的Web应用程序使用jQuery和一些jQuery插件(例如验证,自动完成).我想知道是否应该将它们粘贴到一个.js文件中,以便可以更轻松地缓存它,或者将它们分解为单独的文件,并且只包含我需要的给定页面.
我还要提一下,我关注的不仅是下载.js文件所需的时间,还包括根据加载的.js文件的内容减慢页面的速度.例如,添加自动完成插件往往会使我的基本测试的响应时间缩短100ms,即使在缓存时也是如此.我的猜测是它必须扫描DOM中导致此延迟的元素.
在为网站中的特定页面编写javascript时,您何时想将javascript转换为函数并将其包含在内application.js？
我已经看到了关于这样做(以及缩小或gzip-ing)的建议,以最小化HTTP请求.这是有道理的,但可维护性呢？如果我有一个特定于一个视图的js代码,那么看起来更有意义的是看一个潜在的大量application.js.该代码可以嵌入到该视图中,也可以放在该视图文件夹中的自己的.js(.js.erb或.rjs)文件中.
我已经看到另一个建议,Rails会自动将所有javascript合并到一个文件中.这是真的？
TLDR:开发人员在编写javascript时担心优化需要多少或多少？
我的问题与使用 Rails 3.1相同，您将“特定于页面的”JavaScript 代码放在哪里？，仅适用于 Rails 6 而不是 Rails 3.1。
假设我有一些 JavaScript 想要用于我的帖子索引页面。我把那个文件放在哪里，我如何包含它？
在上一个问题中，答案通常使用 Rails Asset Pipeline。但是，对于 Rails 6，我的理解是它使用 webpacker 而不是 JavaScript 文件的 Asset Pipeline。
注意：我不希望始终包含该文件。例如。如果我在作者索引页上，我不希望包含帖子索引页的 JavaScript 文件。为什么？想象一下，我$('li').on('click', changeColor);在 JS 文件中拥有帖子索引页面。我可能不希望该代码在作者索引页上运行，但如果包含该文件，它就会运行。您可以通过命名空间来解决这个问题，但我认为不包含不必要的文件会更干净（并且性能更高）。
我理解,出于性能原因,最好让资产管道连接并缩小我的所有javascript,并将每个页面请求发送到整个批次.这很公平
但是,我的一堆javascript就像是将特定行为绑定到特定的页面元素之类的东西
$('button').click(function(e) { $('input.sel').val(this.name); }
如果我知道这个代码只在那个页面上执行,我会感觉更舒服 - 而不是在其他页面上可能巧合地使用相同ID或匹配相同选择器的元素人们如何处理这个？
我宁愿不把所有这些东西都放在元素内联中,只是因为当它长度超过两行时,保持javascript正确缩进到.html.erb文件中是比它需要更多的工作
我调查了类似的线程,但我无法抓住.下面是我的application.js文件.
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require vendor
//= require_tree .
我有一个资产管道的目录结构如下.
--javascripts
-misc // directory
helper.js
session.js
app.js
application.js
home.js
我如何加载所有页面的misc目录和home.js for HomeController和session.js SessionController.我不想让不需要的JS在每个地方加载.
我有一个rails应用程序,我试图让jQuery呈现一个HTML文件.这一点的意思是jQuery是特定于页面的,所以我不希望它通过将它放在标题中来加载每个页面.这是我对文件所做的
messages_controller.rb
# GET /messages/new
def new
@message = Message.new
@users = User.where('id != ' + current_user.id.to_s)
#if @message.save
#MessageMailer.new_message(@message).deliver
respond_to do |format|
format.html # new.html.erb
format.js
end
#end
end
/messages/new.html.erb
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h1>New message</h1>
<%= render 'form' %>
<%= link_to 'Back', messages_path, :class => "button small" %>
</div>
</div>
</div>
/messages/new.js.erb
$("h1").html('hello'); //for testing that it works
有什么东西我必须添加到另一个文件？是否有我要做的请求,所以它加载HTML和.js？
阅读许多文章,例如如何在另一个JavaScript文件中包含JavaScript文件？- 显然不可能将一个脚本包含在另一个脚本中.
所以这是我的问题 - 我担心JS膨胀.或者有太多未使用的代码加载不使用/不需要它的页面.但是,偶尔,我需要在多个页面上使用相同的功能,但不是所有页面.
如果我们将在线应用程序的逻辑部分放入对象(例如"客户"或"项目")中,我们可能会有一堆特定于每个"对象"的代码.
作为一个例子,我可以有一个"配置文件"代码组,允许我管理我的配置文件,它可能有多个使用Ajax的div-pop-up,并且为了这个例子,让我说我已经有一些控制我的"送货地址"的功能,他们控制div-pop-up,他们处理特定于该信息的Ajax. - 假设我有4个功能用于此目的.但这只是一个更大的'profile.js'文件的一部分,它处理我的所有"个人资料"...
现在我有了应用程序的另一部分 - 例如购物车 - 我需要允许用户访问"送货地址"div-pop-up和所有Ajax功能.
我想我想重新使用profile.js中的那些函数 - 因为看起来像'重写'代码的'坏形式'做同样的事情 - 因为那时我会有长期的代码维护问题 - 如果我做了改变 - 我必须记住我使用该代码的所有地方.
因此,如果我要推断出"最佳实践" - 考虑到这些技术如何工作的局限性 - 我不能'嵌套'并重新使用js,就像我服务器端包含OR CSS一样.
我的代码将被分解为单独的文件,并且(理论上)将使用许多较小的.js文件
所以我的<head>样子会是这样的
<head>
<script src='smallfile_1.js'...>
<script src='smallfile_2.js'...>
...
<script src='smallfile_10.js'...>
<head>
和"IF"我需要另一页的一节
<head>
<script src='that_other_object_/smallfile_3.js'...>
</head>
...对这些较小的文件的重复TTP调用不会成为开销吗？在繁忙的流量应用中 - 似乎网络和服务器开销可能开始成为一个问题,或者只是在鼹鼠山上建造一座山？
100k请求10个5k文件,真的相等 - 100k请求1个50k文件？
现在我把它写出来 - 并考虑一下 - 页面上的每个图像也是对服务器的单独调用 - 所以也许我正在用一些不是问题的问题来解决问题.
我是否可以获得一些反馈,了解其他人在跨模块的JS代码重用方面做了什么 - 没有在模块之间共享"巨大"文件.
javascript ×8
assets ×1
code-reuse ×1
jquery ×1
optimization ×1
ruby ×1
sprockets ×1
webpacker ×1