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()）を1つの場所に配置するにはどうすればよいですか？

私はこの方法を使用しましたが、私が持っている各h​​tmlページでこのファイルを呼び出さなければならず、それは良くありません。

この場合の良い習慣は何ですか？

jQueryを整理するために皆さんは何をしますか？

4

3 に答える 3

1

私がすべての仕事をフォローしている私へのベストプラクティス。

  1. jqueryプラグインコードを.jsファイルに個別に保存し、ヘッダーを呼び出します

  2. $（document）.ready（）{}）;を1つ保持します。すべてのイベントをその中に保持し、これをヘッダーセクションに保持します

  3. domの準備ができていない場合は、onloadを使用するか、ページの下部をそのままにして、遅延トリガーすることができます

より良い組織はあなたが簡単に維持するのを助けます。

于 2012-06-20T13:16:57.773 に答える
0

最善の解決策は、すべてのスクリプトを別のjsに配置し、headセクションにインポートすることです。単一の$(document).ready()関数があり、実際のページチェックを区別できます。たとえば、idやbodyのクラスなど、switchステートメントを使用できます。

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

さて、この質問からほぼ1年後、私はJSをトレーニングし、Ruby on Railsで遊んでいます。そして、組織スタイルに関する新しいこと、ヒント、コツを学びます。

私はInterfaceApplicationを開発しました、要点のリンクをたどってください:)

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 に答える