0

我有一个添加了 Gems 的应用程序:

gem 'jquery-rails'
gem 'turbolinks'
gem 'jquery-ui-sass-rails'
gem "twitter-bootstrap-rails"

当然,我还有很多其他的宝石,但这些是我现在想要关注的。

该网站加载有点慢,在我的网站中,application.js我只为我加载的所有 jquery 内容调用 jquery.all (我认为我什至不需要)

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require jquery.masonry.min.js
//= require twitter/bootstrap
//= require flatuipro
//= require turbolinks
//= require_tree .

我的应用程序没有那么大,而且我认为我不需要 jquery 中的所有这些东西。但是因为我有点新(大家好)我不太清楚我在 application.js 中使用什么确切的插件、小部件和元素来要求它们,所以我不必只调用 jquery.all。

除此之外,Turbolinks 并没有加载很多 Thinks,用户必须 F5 页面才能加载所有元素。

例如:这是在每个页面上加载的内容:

 <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/twitter-bootstrap-static/bootstrap.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/twitter-bootstrap-static/fontawesome.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/devise-forms.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/flat-ui.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/flatuipro-demo.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/shows.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/styles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.widget.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.accordion.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.position.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.menu.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.mouse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.draggable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.resizable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.dialog.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.droppable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.selectable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.slider.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.sortable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.spinner.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.tabs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.all.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.masonry.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.touch-punch.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-select.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-switch.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/flatui-checkbox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/flatui-radio.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.tagsinput.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.placeholder.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.stacktable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/flatuipro.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/clips.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/flatuipro-demo.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/shows.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

有人可以向我解释一下 Turbolinks 发生了什么以及如何处理 jQuery Mess 吗?

jQuery UI Sass Rails ,我的存储库

4

1 回答 1

1

我不熟悉涡轮链接,但我肯定会建议摆脱那个//= require jquery.ui.all电话。处理 jQuery UI 的一个简单方法是手动调用 head 标签中的库进行开发:

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

然后,一旦您知道您需要库的哪些部分,只需从http://jqueryui.com/download/下载一个仅包含您需要的功能的自定义包,然后将 js 文件放入您的assets/javascripts文件夹中。您可以使用所需的大多数库来执行此操作,因为其中一些库的功能可能是多余的。清单文件末尾//= require_tree .的调用将调用您assets/javascripts文件夹中的所有 js 文件。

于 2013-08-29T14:05:42.217 回答