随着 Web 应用程序的发展，JavaScript 的重要性也越来越高。Rails 框架默认提供了多种方式来添加 JavaScript 到应用中，但是在某些情况下，不当的 JavaScript 放置会导致代码混乱、不易维护和性能问题。因此，在本文中，我们将探讨最佳实践，以帮助您更好地组织和管理无侵入式 JavaScript 代码。
什么是无侵入式 JavaScript？
无侵入式 JavaScript 是指不依赖于 HTML 结构或标记的脚本。它通常通过事件监听器和 AJAX 请求与服务器交互，并且可以独立于页面结构工作。无侵入式 JavaScript 的一个重要优点是可以减少对 HTML/CSS 的耦合，从而使应用更容易维护。
最佳实践：将无侵入式 JavaScript 放在 assets 目录中
Rails 中的 assets 目录包含应用的所有静态文件，包括 JavaScript、CSS 和图片。为了更好地组织无侵入式 JavaScript 代码，我们建议将其放置在以下目录中：
app/assets/javascripts/
这个目录是默认情况下 Rails 自动加载的，并且旨在存放应用程序的所有 JavaScript 文件。在这个目录下，你可以创建多个子目录来组织不同的 JavaScript 片段，并且可以使用 Sprockets 进行文件合并和压缩。
例如，如果您的应用程序具有多个页面需要使用一些通用的 JavaScript 功能，您可以在 app/assets/javascripts 目录下创建一个名为 common 的子目录，然后将所有相关代码放置在该目录下。接下来，您可以在需要的页面中，使用以下语句引入这些 JavaScript 文件：
//= require common/your_javascript_file
这样做不仅可以使您的代码更清晰易懂而且能够方便地进行管理和维护。
最佳实践：使用 Turbolinks 来提高性能
Turbolinks 是 Rails 中一个非常有用的功能，它通过使用 AJAX 技术来加速 Web 应用程序的加载速度。当用户从一个页面转到另一个页面时，Turbolinks 会保留应用程序的导航状态并只更新页面内容，而不是重新加载整个页面。这种方式不仅减少了服务器负载，还提高了用户体验。
默认情况下，Turbolinks 会自动加载和运行在 app/assets/javascripts/application.js 文件中定义的 JavaScript。因此，您应该确保您的无侵入式 JavaScript 代码可以与 Turbolinks 兼容，并且不会对其造成任何问题。
以下是一个示例代码，它演示了如何使用 Turbolinks 和 jQuery 在 Rails 中发送 AJAX 请求：
$(document).on('turbolinks:load', function() {
$('#my_button').click(function() {
$.ajax('/my_controller/my_action', { type: 'POST' });
});
});在这个例子中，我们使用 $ (document) 来监听 Turbolinks 的加载事件，然后通过选择器来获取按钮元素，并绑定一个点击事件。当用户单击该按钮时，会触发 AJAX 请求，并将其发送到 MyController 控制器的 my_action 动作。
结论
在本文中，我们探讨了如何最好地组织和管理无侵入式 JavaScript 代码。我们建议您将无侵入式 JavaScript 放置在 app/assets/javascripts/ 目录下，并使用 Sprockets 进行文件合并和压缩。此外，您应该确保
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29278