Rails 4 jQuery与javascript冲突

Question

我试图在Rails 4中制作应用程序。

我正在挣扎。 我正在尝试合并一个bootstrap主题，我遇到了供应商javascripts和其余代码的问题。

我认为问题可能与在我的application.js中使用jQuery然后使用以'$'符号开头的供应商.js文件有关：

$.circleProgress = {

我刚看过这个： https ： //learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

我的问题是虽然我不知道如何进行使代码安全的更改。

我是否需要搜索供应商文件中的每个'$'，或者我如何在jQuery上安装一个安全的包装器 - 特别是在通过gem合并的地方。

有没有人遇到过这些问题并找到了解决方案？ 我会喜欢一些帮助。

的application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require masonry.pkgd.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require gmaps/google
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require underscore
//= require dependent-fields
//= require_tree .
//= require bootstrap-slider


$(document).ready(function() {
    DependentFields.bind()
});

相关问题： Rails 4 - 包含供应商资产

意见

我注意到错误的控制台日志显示我的app / assets / javascripts文件夹中的.js文件有问题。

它们是该文件夹中的唯一其他文件（除了application.js）。 我的application.js有'require_tree'所以它们将被编译。 但是我认为这些文件中可能存在冲突（可能）在application.js中包含jQuery？

日志显示：

Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined
conversations.self-832ece2867c1701a5202459ab73ecd6432da2a6c833d8822d37025845a0aefcc.js:10 Uncaught TypeError: $ is not a function
organisations.self-6547f734e3a69b76176dfe5bb194e428c0bc560ad3fb69811dce9c7f8ccb9f4d.js:2 Uncaught TypeError: $ is not a function
http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E Failed to load resource: the server responded with a status of 400 (Bad Request)
http://localhost:3000/profiles/assets/images/grayscale.svg#greyscale Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/profiles/assets/custom/images/preloader.gif Failed to load resource: the server responded with a status of 404 (Not Found)
chrome-extension://mkjojgglmmcghgaiknnpgjgldgaocjfd/content/contentScripts/kwift.CHROME.min.js:1384 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
http://localhost:3000/assets/flaticon.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/flaticon.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a function

标识为错误的每个js文件夹都保存为app / assets / javascripts中的.js文件。

我是否需要使用不同的文件名（.js.erb / js.coffee）？ 使这项工作。 或者，我是否需要在这些文件的内容周围放置脚本标记？

例如，第一个文件打开：

$.circleProgress = {
    // Default options (you may override them)
    defaults: {
        /**
         * This is the only required option. It should be from 0.0 to 1.0
         * @type {float}
         */
        value: 0,

UPDATE

我认为我的问题的一部分是使用“.js”扩展名保存在app / assets / javascripts中的文件。 它们中的每一个都在控制台错误列表中显示为：

kwift.CHROME.min.js:1271Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
circle-progress.self-f67ec54….js?body=1:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined(anonymous function) @ circle-progress.self-f67ec54….js?body=1:9
conversations.self-832ece2….js?body=1:10 Uncaught TypeError: $ is not a function(anonymous function) @ conversations.self-832ece2….js?body=1:10
organisations.self-6547f73….js?body=1:2 Uncaught TypeError: $ is not a function(anonymous function) @ organisations.self-6547f73….js?body=1:2(anonymous function) @ organisations.self-6547f73….js?body=1:6
projects.self-9c019ba….js?body=1:1 Uncaught TypeError: $ is not a function(anonymous function) @ projects.self-9c019ba….js?body=1:1
main.self-5888479….js?body=1:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a functionwindow.onload @ main.self-5888479….js?body=1:316
kwift.CHROME.min.js:1271 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared

Answer 1

听起来你需要做很多清理工作。 这是你的第一个Rails应用程序吗？ 如果是这样，我很好奇为什么你有这么多的JS文件。 我会把你的清单减少到几个，修复剩下的问题，然后慢慢开始添加东西并解决问题。 这将是我的总体战略。 对于每个bug，慢慢地仔细检查你是否真的了解原因，然后在这里和那里希望修复之前。

以下是我看到的特定错误的一些提示：

该行将包含app/assets/javascripts所有.js文件：

//= require_tree .

问题是你已经在上面一个接一个地包括它们。 所以他们被包括两次。 这就是为什么你'findGoodContent' has already been declared这样'findGoodContent' has already been declared警告。 我知道使用require_tree很好（虽然我不喜欢它），所以如果你想保留它，考虑将所有第三方JS文件移出app/assets/javascripts并转移到vendor/assets/javascripts 。 您仍然可以在application.js require它们，但require_tree不会重复它们。

像grayscale.svg和flaticon.woff以及其他图像/字体资产这样的404错误是因为您在app/assets （或vendor/assets ）中没有这些文件。 或者如果你这样做，你应该确保你的JS / CSS文件和视图文件用<%= asset_path "grayscale.svg" %>引用它们，这样当Rails破坏它们的路径时你仍然从正确的地方加载它们。 阅读image_url和朋友 ，确保您了解它们的工作原理。 默认情况下，Asset Pipeline在开发中提供未编码的名称，在生产中提供损坏的名称，因此在您全部直播之前，这些内容可能会正常工作！

此外，如果在CSS文件或JS文件中包含<%= foo %>标记，则需要.erb文件添加.erb扩展名，以便Rails知道处理这些标记。 这就是为什么你在尝试加载这个时遇到404错误的原因：

http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E

在你的一个文件中，可能是一个CSS文件，你做的是这样的：

background-image: url("<%= asset_path('random.jpg') %>");

但该文件需要.erb扩展名： blah.css.erb或blah.scss.erb等等。

像$ is not a function这样的错误$ is not a function意味着这些文件依赖于jQuery，但是没有定义jQuery $对象。 如果您正在使用noConflict ，就像评论中建议的那样，您应该停止，因为您确实希望$成为jQuery对象。

祝好运！ 如果你感到不知所措，我真的会开始尽可能多地删除JS require行，并一次解决一个错误。

此外，我会重新排序require行，以便依赖项位于顶部（例如jquery），依赖它们的东西更低。

哦，还有一件事，不是真正的错误：我会避免将已经缩小的文件（如hammer.min.js ）放入您的存储库。 资产管道知道如何缩小。 请检查未经授权的版本，这样如果您必须阅读源代码，则可以。

Answer 2

我把这篇文章作为上班工作。

解决方案很复杂，但万一它可以帮助其他人了解出了什么问题：

1. 一些宝石需要jQuery功能。 这可能与application.js中jQuery的一般包含冲突 - 我编写了一些特定的代码来管理特定的冲突。

2. 在application.js中，您需要按顺序列出所有需求，以便依赖项位于依赖于它们的js文件之下。 很难知道哪个文件取决于什么。 我再也不会想到这一点了

3. 我的rake资产：预编译调用将编译的资产放在公用文件夹中。 我覆盖了它，因为它导致与其他调用冲突（特别是当文件更新时）。

对于任何想要学习的人来说，这个答案都没有真正的帮助。 我自己并没有完全学会如何解决这些问题，但我确实找到了一位上班的专家，他能够帮助我继续前进。

我担心这是博客教程无法解决的那些混乱问题之一。

Answer 3

不知道为什么没有人发布这个，但jQuery中的$ .something只是jQuery.something的简写。

禁用它的能力被融入jQuery

https://api.jquery.com/jquery.noconflict/

这是他们的文件中的一个例子

jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";

基本上，在手动代码中使用“jQuery”vs“$”比更改继承的库要容易得多。 话虽如此，你应该向违规库提交一个问题来修复这个功能，类似于jQuery的做法，因为jQuery很受欢迎。

祝好运！