Rails 4 jQuery与javascript冲突
我试图在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
听起来你需要做很多清理工作。 这是你的第一个Rails应用程序吗？ 如果是这样，我很好奇为什么你有这么多的JS文件。 我会把你的清单减少到几个，修复剩下的问题，然后慢慢开始添加东西并解决问题。 这将是我的总体战略。 对于每个bug，慢慢地仔细检查你是否真的了解原因，然后在这里和那里希望修复之前。
以下是我看到的特定错误的一些提示：
该行将包含app/assets/javascripts所有.js文件：
//= require_tree .
问题是你已经将它们逐个包含在上面。 所以他们被包括两次。 这就是为什么你'findGoodContent' has already been declared像'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 ）放入您的存储库。 资产管道知道如何缩小。 请检查未经授权的版本，这样如果您必须阅读源代码，则可以。
我把这篇文章作为上class工作。
解决方案很复杂，但万一它可以帮助其他人了解出了什么问题：
-
一些gem需要jQueryfunction。 这可能与application.js中jQuery的一般包含冲突 – 我编写了一些特定的代码来管理特定的冲突。
-
在application.js中，您需要按顺序列出所有需求，以便依赖项位于依赖于它们的js文件之下。 很难知道哪个文件取决于什么。 我再也不会想到这一点了
-
我的rake资产：预编译调用将编译的资产放在公用文件夹中。 我重写了这个，因为它导致与其他调用冲突（特别是在更新文件时）。
对于任何想要学习的人来说，这个答案都没有真正的帮助。 我自己并没有完全学会如何解决这些问题，但我确实找到了一位上class的专家，他能够帮助我继续前进。
我担心这是博客教程无法解决的那些混乱问题之一。
不知道为什么没有人发布这个，但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“$”比更改inheritance的库要容易得多。 这就是说你应该向违规库提交一个问题来修复这个function，类似于jQuery的做法，因为jQuery很受欢迎。
祝好运！