2011-11-15 24 views
8

私はフレームワーク(Django)を使用しています。私はHTMLの書き方に柔軟性があります。私はjQueryを書く方法がより良いと思っています。jQueryをモジュール化する方法

は、例えばこれを持っ:主にどこにでも送信ボタンは、私たちがきれいボタン(元の値と行動を取り、基本的には、それに代わるもの)に変換し、私たちのサイトに表示されます。これは単なる例ですが、サイトに配置されたHTMLのスニペットがあり、全体的な構造がJavascriptで操作する必要があるページ上に何がないのかが分かりません。だから2つの質問があります:最初にラップされたセットを検索する50(jQueryプラグイン)でのみ使用される100ページで何かを実行するのが効率的です、もし私が本当にjQueryでモジュラーアプローチをしたいのであれば、私はそれについて行く?適切なキャッシュで

+0

おそらくBackbone.js? http://documentcloud.github.com/backbone/ – Iacks

+0

良い質問、私はちょうどこの昨日考えていたといくつかの提案を見てみたい –

+0

私はjQueryのプラグインを使用します。参考になる定型コードがいくつかあります。 http://www.websanova.com/tutorials/jquery/jquery-plugin-development-boilerplate –

答えて

0

、それは単一縮小さ.jsファイルを持つことは間違いなく、より効率的です。それは一度だけロードされ、ページあたり1つのコールしか存在しません。コードをモジュール化すると、余分なjsをキャッシュすることなく、より多くの要求を処理してしまうことになります。なぜなら、とにかくキャッシュされるからです。

+0

多くのファイルにコードを配布することが懸念される場合、複数のソースファイルを1つのファイルに連結して連結する必要があります。 。しかし、これはプログラミング中にOPが心配するべきものではありません。これは厳密にはビルド時の心配です(または実行中のプラグインがある場合は実行時の問題です)。この場合、効率はモジュール性に影響しません。 **(編集)**しかし、私はあなたが間違って初めてだと思う:あなたは正しい、おそらく単一のjsファイルをフェッチするより効率的ですが、このスクリプトは必要に応じて追加のモジュールをロードする(それはあなたが意味したものです)。 – Groo

+0

うんしかし、私はちょうどそれが心配し提出する以上のものを持っている...私は、ウィジェットを持っている...私は意味、理想的に私はちょうどスニペットでいくつかのJavaScriptを追加することができます...フォームの検証を持っている(私はそれを行うだろうか?)これはpubsubのようなものの仕事だろうか?スクリプトを特定して、$(document).readyを続けて呼び出すことはできますか?そのアプローチは少し分かれているのでしょうか、おそらく、モジュール化する方法を必要とするかもしれませんが、コードを定義する方法のすべてに焦点を当てていますか? – xckpd7

+0

@ xckpd7私はそれが最終的にあなたの状況に依存するので、私はそれに答えることはできません。あなたのコードをモジュール化して解決しようとしている問題は何ですか? – Andrew

1

あなたの問題の根本的な懸念はおよそModular programmingある場合。私は現在Douglas Crockford's "JavaScript: The Good Parts"を勉強しています。この本から

機能では、JavaScriptの基本的なモジュラーユニットです。コードの再利用、情報の非表示、および構成に使用されるのは です。

だから、

JavaScriptですべての機能がオブジェクトであるとして、あなたはこのようにモジュールとしてトップレベルの構造を定義するには、オブジェクトリテラル表記を使用することができます。

/* only one global variable to encapsulate all your code */ 

var MAINOBJ= {}; 

jQuery(document).ready(function($) { 

    /* modules */ 

    MAINOBJ.formStuff = { 
     results : [], 
     myFunction: function(){ 
      // code 
      results = MAINOBJ.ajaxStuff.loadResults(); 
      // code 
     } 
    } 

    MAINOBJ.ajaxStuff = { 
     results : [], 
     loadResults: function(){ 
      // code 
      return results; 
     } 
    } 

    /* DOM traversing */ 

    $('#myForm').submit(function(e) { 
     e.preventDefault(); 
     MAINOBJ.formStuff.myFunction(); 
    }); 
}) 

が実際にすべての私のjQueryを構築するための私の方法ですwordpress/joomlaの中のコード、等々、私たちは多くの外国のjavascriptコードと同じスコープを共有しています。

+0

私はコードを整理するためにオブジェクトリテラルを使用する方法を尋ねていません...私は混在してマッチすることができる小さなモジュラーの部分で自分のコードを実装する方法を尋ねています。 – xckpd7

+1

@ xckpd7 Aha。とった。たぶん[http://www.youtube.com/watch?v=vXjVFPosQHw](Nicholas ZakasスケーラブルJavaScriptアプリケーションアーキテクチャ)があなたが探しているものです。このビデオに基づいて、[http://net.tutsplus.com/tutorials/javascript-ajax/writing-modular-javascript-new-premium-tutorial/](Modular JavaScriptの作成)に短いチュートリアルがあります。 –

関連する問題