假设我有一个基本的 Rails 应用程序，其中包含三个资源:作者、博客 和书籍。我使用 scaffold 命令创建了资源，因此每个资源都有自己的 JavaScript 文件:authors.js、blogs.js 和 books.js.
我看到了一些不同的实现，了解如何保持 JavaScript 的全局命名空间干净，以及如何保持页面特定的 JavaScript 彼此分离，这样它们就不会发生冲突。
这是我设计的实现。它似乎做了我想做的事情，但如果由于某种原因这被认为是不好的实现/不好的实践，我想得到反馈。如果人们有更好的方法，我也欢迎其他实现。
对于 app/views/layouts 中的所有布局，请为 body 标记指定此内容:
<body class="<%= controller_name %>">
对于 JavaScript 代码:众所周知，Rails 中的所有 JavaScript 最终都会被整合到一个大的 JavaScript 文件中。为了便于阅读，我从每个单独的 JavaScript 文件中提取了所有 JavaScript，并将它们放在一起(在应用程序中，我将在每个相应的 js 文件中将 JavaScript 代码分开):
var authorsjs = {
init: function(){
alert("hello from authorjs");
// all author bindings specified here
$("#oneEl").on('click', function(){
alert("oneEl was clicked");
});
},
someAuthorFunc: function(){
alert("someAuthorFunc run");
}
};
$(document).on('page:change', function(){
if($('body').hasClass("authors") == true ){
authorsjs.init();
}
});
var booksjs = {
init: function(){
alert("init booksjs run");
// all books bindings specified here
$("#twoEl").on('click', function(){
alert("twoEl was clicked");
});
},
someBookFunc: function(){
alert("someBookFunc run");
}
};
$(document).on('page:change', function(){
if($('body').hasClass("authors") == true ){
authorsjs.init();
}
});
因此，正如预期的那样，这些点击事件不适用于与 blogs 关联的 View ，绑定(bind)到 #oneEl 的事件仅适用于与作者关联的 View ，并且该事件绑定(bind)到 #twoEl 仅适用于与图书关联的 View 。
最佳答案
根据反馈进行回答
以下作品。我正在使用 jquery-turbolinks gem。每个 Controller 的js都封装在一个对象中。对于每个页面请求，都会检查 body 类，并运行相应对象的 init 方法。我还继续创建了一个 someGlobals 对象，它提供跨所有 Controller 的通用 js 代码。
这段代码按预期工作，但相当困惑。我希望有某种方法来清理前端代码。如果您有任何建议请告诉我:
$(document).ready(function(){
var authorsjs = {
init: function(){
alert("hello from authorjs");
// all author bindings specified here
$("#oneEl").on('click', function(){
alert("oneEl was clicked");
});
},
someAuthorFunc: function(){
alert("someAuthorFunc run");
}
};
if($('body').hasClass("authors") == true ){
authorsjs.init();
}
});
$(document).ready(function(){
var booksjs = {
init: function(){
alert("init booksjs run");
// all books bindings specified here
$("#twoEl").on('click', function(){
alert("twoEl was clicked");
booksjs.someBookFunc();
});
},
someBookFunc: function(){
alert("someBookFunc run");
}
};
if($('body').hasClass("booksjs") == true ){
booksjs.init();
}
});
$(document).ready(function(){
var blogsjs = {
init: function(){
blogsjs.formValidations();
},
formValidations: function(){
$('#blog_title').on("click", function(){
console.log($(this).val());
$('p').css("color", "green");
$(this).css("color", "blue");
alert("hello");
});
$('#blog_title').on("keypress", function(){
var value = $(this).val();
$("#preview").text(value);
});
}
};
if($('body').hasClass("blogs") == true){
blogsjs.init();
}
});
$(document).ready(function(){
var someGlobals = {
init: function(){
$('p').on('click', function(){
alert("Global: P was clicked somehwere!");
})
}
};
someGlobals.init();
});
关于javascript - Rails 中分离页面特定 JavaScript 的面向对象方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29021548/