Question

我正在开发很多接口，我正在使用jquery来navegate，探索，显示内容，加载页面和许多其他东西。

我正在看到我的代码：

示例：

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

Answer 1

我正在完成所有工作的最佳实践。

将jquery插件代码分别保存在.js文件中并调用标题
保留一个$（文件）.ready（）{}）;并将所有事件保留在其中并将其保留在标题部分
如果非dom准备就绪，你可以使用onload或只是保持页面底部来懒洋洋地触发

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

Answer 2

最好的解决方案是将所有脚本放在一个单独的js中，导入头部分。你将有一个$(document).ready()函数，你可以在其中区分实际的页面检查，例如id或你的身体的类，也许可以用switch语句：

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

Answer 3

好吧，差不多一年后，我一直在训练我的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;
  })();

在我的app / 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！

你怎么看？我会感谢你的评论和意见！

感谢您能够与您分享。

关于jQuery GUI开发的良好实践

3 个答案: