关于jQuery图形用户界面开发的良好实践
我正在开发许多界面，并且我正在使用jquery来导航、浏览、显示内容、加载页面和许多其他事情。
我看到我的代码是这样的：
示例：
$(document).ready(function(){
$("a").click(function(){});
$(".class").hover(function(){}, function(){});
//and more and more
});我做了一个插件来加载我的内容
插件：
(function( $ ){
$.fn.navCategoria = function( options ){
var settings = {};
if (options) $.extend(settings, options);
$(settings.target).load(settings.url, {"categoria":settings.categoria, "limit":settings.limit, "offset":settings.offset});
};
})( jQuery );我有很多html，每个页面都有一个函数：
$(document).ready(function(){}); //my code in there我怎样才能把所有这些东西( $(document).ready() )放在一个地方？
我用过这种方法，但我必须在我拥有的每个html页面中调用这个文件，这并不好用。
对于这种情况，什么是好的实践？
你们用什么来整理你的jQuery？
回答 3
Stack Overflow用户
发布于 2013-06-28 03:14:14
嗯，在这个问题之后差不多一年，我一直在训练我的JS，使用Ruby on Rails，我学到了关于我的组织风格的新东西，提示和技巧。
我已经开发了一个InterfaceApplication，点击gist上的链接:)
https://gist.github.com/xdougx/5879172
我还在开发这个类，但对我来说非常好用，看看如何使用：
包括在你项目中，为我在我的application.js中
//= require app/interface_application举个例子，在我家，我可以有很多像$(".button").click()这样的活动。
在我使用这种方式之前：
$(document).ready(function(){
$(".button").click(function(){
// do my cool stuff
});
// more 23 different events
});但到目前为止，我已经“在家里举办了23个不同的活动”。哇，这是如此多的事件，而且很难维护。现在我可以在我的IApp中玩这个游戏了。我为我的家庭活动开发了这个类：
var HomeModule = (function(){
var Home = function(){
// event #1
this.my_blue_button = function(){
// do blue and fanny stuff
}
// event #2
this.my_red_button = function(){
// do red and nice things
}
// Wow more 22 events
};
return Home;
})();在我的应用程序/site/home.html.erb中
<script type="text/javascript">
$(function(){
var params = {
estimate_id:"<%= @estimate.id%>",
company_id:"<%= @estimate.company.id%>"
};
var modules = { "HomeModule": new HomeModule }
var app = new IApp;
app.addModules(modules).run(null, params);
});
</script>看，我运行我的事件，我可以加载许多其他模块，并使我的所有事件可重用(如果我可以)，现在我可以在单独的文件中构建许多功能，清理我的html！
你认为如何？我将非常感谢您的评论和意见！
感谢您能够与您分享它。
Stack Overflow用户
发布于 2012-06-20 21:16:58
给我的最好的实践，我正在遵循我所有的工作。
- 将您的jquery插件代码单独保存在.js文件中并在header中调用
- 保留一个$(Document).ready(){}；并将所有事件保存在该文件中并将其保存在header部分
- 如果未准备就绪，您可以使用onload或仅保留页面底部以延迟触发
更好的组织将帮助您轻松维护。
Stack Overflow用户
发布于 2012-06-20 21:49:21
最好的解决方案是将所有脚本放在单独的js中，在head部分导入。您将拥有一个单独的$(document).ready()函数，在该函数中，您可以区分实际的页面检查，例如，您的主体的id或类，可能使用Switch语句：
var idBody = $('body').attr( 'id' );
switch( idBody ){
case 'home':
initHome();
break;
case 'about':
initAbout();
break;
}https://stackoverflow.com/questions/11120325
复制相似问题
腾讯云开发者
