0

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

4

3 回答 3

1

我遵循我所有工作的最佳实践。

  1. 将您的 jquery 插件代码单独保存在 .js 文件中并在标头中调用

  2. 保留一份 $(document).ready(){}); 并将您的所有事件保留在其中并将其保留在标题部分

  3. 如果没有 dom 准备好，你可以使用 onload 或保持页面底部延迟触发

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

于 2012-06-20T13:16:57.773 回答
0

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

var idBody = $('body').attr( 'id' );
switch( idBody ){
    case 'home':
         initHome();
    break;
    case 'about':
         initAbout();
    break;
}
于 2012-06-20T13:49:21.180 回答
0

好吧，在这个问题之后将近一年，我一直在训练我的 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 的单独文件中构建许多功能！

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

感谢您能够与您分享。

于 2013-06-27T19:14:14.097 回答