随机不在Ruby on Rails 5.2.3生产模式下加载Javascript

时间:2019-12-09 06:35:03

标签: javascript jquery css sass ruby-on-rails-5.2

我仍然是Ruby on Rails的新手。这个框架对我来说真的很棒。但是,由于我将其上传到产品中,所以我仍然不明白为什么Ruby on Rails 5.2.3在某些随机情况下无法正确加载JavaScript。有时,在首次尝试打开页面时,它会正确加载,但如果加载不正确,用户有时甚至必须刷新几次,直到页面正确加载。我也从浏览器看到错误

  

GET ... / assets / jquery-ui-1.8.16.custom.css net :: ERR_ABORTED 500

由于我使用了从CDN加载的JQuery UI 1.12.1,因此根本没有导入或编写一行代码来导入该文件。

  

真正重要的是,为什么Ruby on Rails 5.2.3随机出现   有时无法正确加载JavaScript吗?

不仅在生产模式下发生此问题,在开发模式下也发生在随机场合。

我将发布application.js和application.scss以及application.html.erb的开头部分,以提供我在这种情况下做错的见解

application.js

//= require jquery3
//= require jquery-ui/core
//= require jquery-ui/widgets/slider
//= require rails-ujs
//= require popper
//= require cocoon
//= require social-share-button
//= require social-share-button/wechat
//= require rippleria/js/jquery.rippleria.min
//= require_tree .

application.scss

/*
 *= require gmaps-auto-complete
 *= require social-share-button
 *= require jquery-ui/core
 *= require jquery-ui/slider
 */

 @import "pretty-checkbox/dist/pretty-checkbox";
 @import "rippleria/css/jquery.rippleria";

application.html.erb

         <%= stylesheet_link_tag'应用程序',媒体:'所有'%>                              

<%= stylesheet_link_tag    'sub/style' %>
<%= stylesheet_link_tag    'sub/components.min' %>
<%= stylesheet_link_tag    'sub/custom' %>
<%= stylesheet_link_tag    'sub/chat.min' %>

<%= javascript_include_tag 'application', async: Rails.env.production? %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

如果你们能让我知道我可以采取什么解决方案来避免这种随机行为,我将非常感激。非常感谢您的宝贵时间。 :)

1 个答案:

答案 0 :(得分:0)

没关系,我已经解决了这个问题。 Ruby on Rails的主要问题是,如果我们使用Rails 5.2.3提供的JQuery来编写下面的依赖关系,

const char_points = {
  "a": 1,
  "e": 1,
  "i": 1,
  "o": 1,
  "u": 1,
  "l": 1,
  "n": 1,
  "r": 1,
  "s": 1,
  "t": 1,
  "d": 2,
  "g": 2,
  "b": 3,
  "c": 3,
  "m": 3,
  "p": 3,
  "f": 4,
  "h": 4,
  "v": 4,
  "w": 4,
  "y": 4,
  "k": 5,
  "j": 8,
  "x": 8,
  "z": 10,
  "q": 10
};

const reducer = (accumulator, currentValue) => accumulator + currentValue;


function word_calc(w) {
  // convert your string array to relevant numbers 
  const splitted_array = w.split("").map(function(item) {
    return char_points[item]
  });

  // You can use simple loop to sum up or reduce to reduce and sum the array
  const total = splitted_array.reduce(reducer);
  console.log(total)
}


word_calc("zoo") // 12
word_calc("bus") // 5

它将使用以下行生成应用程序CSS文件

gem 'jquery-rails'

尽管assets文件夹中没有上面写的文件,但它还是不由自主地导入了JQuery UI Custom CSS。

解决方案:

我建议您再次使用,使用Rails 5.2.3提供的JQuery,并使用CDN方法更改JQuery,以获得最佳性能。因此,您可以在 application.js

上删除以下行
@import 'jquery-ui.1.8.6.custom.css'

然后在 application.html.erb 上的 application.js 之前的JQuery加载顺序如下:

//= require jquery3

希望我的解决方案可以提供帮助。 :)