jQueryGUI开发的良好实践

我正在开发许多界面，我正在使用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？

对我来说是最佳实践，我一直在关注我的工作

将jquery插件代码单独保存在.js文件中，并在标题中调用

保留一个$（document.ready（）{}）；并将所有事件保留在该范围内，并将其保留在标题部分

若非dom就绪，则可以使用onload，或者只保留页面底部以延迟触发

---

更好的组织将帮助您轻松地进行维护。

最好的解决方案是将所有脚本放在单独的js中，并导入head部分。 您将有一个

$（document）.ready（）

函数，在该函数中，您可以通过switch语句来区分实际的页面检查，例如您身体的id或类：

var idBody = $('body').attr( 'id' );
switch( idBody ){
    case 'home':
         initHome();
    break;
    case 'about':
         initAbout();
    break;
}

---

好吧，在这个问题提出将近一年后，我一直在训练我的JS，玩RubyonRails，我学到了关于我的组织风格的新东西、技巧和窍门

我已经开发了一个接口应用程序，请按照gist上的链接进行操作：）

我仍在开发此类，但它非常适合我使用，请参见如何使用：

在我的application.js中为我包含在您的项目中

//= require app/interface_application

例如，在我家里，我可能会有很多类似于

$（“.button”）的事件。单击（）

在我使用这种方法之前：

$(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>


$（函数（）{
变量参数={
估计值_id:“”，
公司编号：“
};
var modules={“HomeModule”：新HomeModule}
var-app=新的IApp；
app.addModules（modules.run）（null，params）；
});

看，我运行我的事件，我可以加载许多其他模块，使我所有的事件都可以重用（如果可以的话），现在我可以在分离的文件中构建许多功能来清理我的html

你觉得怎么样？我将感谢您的评论和意见

感谢您能与您分享。
我将我所有的js放在底部，我在标题中有过js的糟糕经历。我的
$（document）.ready（function（）{}）
也在底部，但是我有很多html片段。我的加载总是将内容放在一个目标中，比如
DOM会处理所有事情，最好保持在标题部分，并在domready中编写所有代码function@StefanoOrtisi我只有一个正文所有内容都由
$（e）加载（“url”，object）
加载。