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

我把这篇文章作为一项工作发布在 upwork 上。

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

1. 有些 gem 需要 jQuery 功能。这可能与 application.js 中普遍包含的 jQuery 发生冲突 - 我编写了一些特定的代码来管理特定的冲突。

2. 在application.js中，您需要按顺序列出所有需求，以便依赖项位于依赖它们的js文件下方。很难知道哪个文件依赖于什么。我永远无法独自解决这个问题

3. 我的 rake asset:precompile 调用将编译后的资源放在公共文件夹中。我覆盖了这个，因为它导致与其他调用发生冲突（特别是当文件更新时）。

对于任何试图学习的人来说，这个答案没有任何真正的帮助。我自己并没有真正学会如何解决这些问题，但我确实找到了一位 upwork 专家，他能够提供帮助，以便我可以继续前进。

恐怕这是博客教程无法帮助解决的那些混乱问题之一。