Question

我的前端文件非常混乱，我想以这种方式重新组织它们：

将.html.erb文件分成较小的组件，实际上很小尽可能。
摆脱.scss文件。

写这样的.html.erb文件：

<body>
  # html and erb code here
</body>

<script>
  # javascript code here
</script>

<style scoped>
  # scss code here
</style>

这是个好主意吗？当用户在应用程序上时，是否存在丢失加载速度的风险？

Answer 1

这类似于React和Angular如何组织CSS和JS，但它们都具有非常好的视图封装，与Rails不同。您可以使用像您建议的范围，但这对我来说仍然像Rails反模式。在Rails中，脚本和样式应该按设计进入app/assets文件夹。如果您正在就此项目进行合作，或者预计将来需要将其交给其他团队，那么最好顺其自然。我最近继承了一个包含数千行内联样式和javascipt的项目，这是一场噩梦。惯例而不是配置。

另请注意，浏览器不会缓存内联样式和脚本，因此从长远来看，您不会使用链接文件并允许浏览器缓存它们，从而对加载时间产生负面影响。

将长视图文件和模板分解为较小的部分和帮助程序是Rails中的一个很好的模式。至于样式表和javascripts，我建议将它们保存在app/assets文件夹中。您可以使用链接来包含它们，require s，@include等等。

就我个人而言，我做了类似这样的伪装：

<!-- In your layout file -->
<head>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

  <%= javascript_include_tag controller.controller_name, 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_link_tag controller.controller_name, media: 'all', 'data-turbolinks-track': 'reload' %>

  <%= yield :end_of_head %>
</head>

这样，您只需加载特定控制器的JS和CSS（不要忘记添加到config/assets.rb）以及任何全局CSS或JS，从而最大限度地减少加载时间并帮助封装。

例如，如果我有UsersController一些页面用于查看个人资料，更改设置，注册等，我会自动加载app/assets/stylesheets/users.scss和app/assets/javascripts/users.js在那些页面上。您甚至可以更进一步，并为每个控制器操作专门提供JS和CSS文件。

在你的部分和助手中，你可以这样做：

<%= content_for :end_of_head %>
  <%= javascript_include_tag 'partials/thing' %>
  <%= stylesheet_link_tag 'partials/thing' %>
<% end %>

只需我0.02美元

另请注意，这种方法得到了Rails核心团队的认可：http://guides.rubyonrails.org/asset_pipeline.html#controller-specific-assets

重新组织Rails 5中的前端文件

1 个答案: