2

「適切な」目立たない JavaScript について、私はいつも少し混乱していたことを認めなければなりません。スクリプトをマークアップから移動したいということはわかりましたが、マークアップがスクリプトを参照しないようにします (もちろん、元のスクリプト参照以外は!)。しかし、これが実際にどのように機能するかわかりません。

マークアップがコードを参照しないようにする方法はわかりましたが、スクリプト内の DOM ID のハードコーディングが汚いと感じています。次に例を示します。

<script src="....awesome.js"></script>

<button id="primaryAction">Click me for something awesome!</button>
<labal id="resultText"></label>

//in awesome.js
awesome = function(){

    init = function(){
        //pretend we are doing something incredible here
        //and then we hook the button up

        $('#primaryAction').click(function(){
            $('#resultText').val(result());
        });    
    };

    result = function(){
        //here something awesome happens and we return the result
        return "Joe";
    };

    return {
        init: init
    }

}();

それは、何ができるかをかなり代表するものでなければなりませんよね？したがって、私の混乱は2つの場所で発生します。

  1. awesome.init() はどこから呼び出せばよいですか?
  2. JavaScript からコントロール ID を参照するのは間違っていると思いますが、スクリプトで指定されたクラスを使用し、それを機能させるためにマークアップでそれらを使用する必要があるのも間違っていると感じています。それはどのように行われるべきですか？どちらも邪魔に感じます。init() 関数は次のようにする必要があります{button:'#primaryAction', result:'#resultText'}が、再び #1..Init をどこから呼び出す必要がありますか?

私がこれを根本的に間違っている場合は、私を道に導いてください。

4

2 に答える 2

0

Backbone Jsは、この問題に対するMVCアプローチです。

警告：現在の例ではやり過ぎかもしれません。

参照：what-is-backbone-js

于 2012-08-20T14:52:40.290 に答える
0

JQuery

要素に id (またはクラス) 属性を配置し、スクリプトでそれらの同じ要素を参照することは、確かにそれを行うための正しい JQuery の方法ですが、ハードコーディングを減らす方法があり、それらを使用する必要があります。

jQuery トラバーサルを使用して、必要な要素を取得できます。これにより、必要な ID の数が大幅に削減されます (理想的には、機能の単位ごとに 1 つのみになります) http://learn.jquery.com/using-jquery-core/traversing/

例えば。

<form class="edit">
  <button>Hello</button>
  <label>Hi there</label>
</form>

$(function() {
  var $form = $('form.edit');
  var $button = $form.find('button');
  var $label = $form.find('label');
  // your code here
});

init 関数を配置する場所については、HTML の下部に init の呼び出しを配置すると、正常に動作するはずです。または、$ に渡すと、onDomReady で実行されます。

$(function() {
  init();
  // anything else you need to do
});

あるいは単に：

$(init)

JQuery プラグイン

JQuery プラグインは、jQuery プロトタイプに追加された機能です。ほとんどの機能は汎用の jQuery プラグインとして作成する必要があります。トラバーサルを使用して、プラグインからハードコーディングされた ID を可能な限り排除します。

次に、アプリ固有の配線コードのごく一部でそれらを配線するだけです。

http://learn.jquery.com/plugins/basic-plugin-creation/

//plugin
(function($) {
  $.fn.editForm = function() {
    $form = this;
    var $button = $form.find('button');
    var $label = $form.find('label');
  }
})(jQuery)

// app code
$(function() {
  $('form.edit').editForm()
});

フレームワーク ソリューション

別のアプローチを採用して、フレームワークの使用を検討することもできます。

Angularは今、大きな注目を集めています。Angular は HTML をコードとして扱い、実際にコンパイルして最終ページを生成します。コードとテンプレートが非常に緊密に結合されます。これはまったく逆の考え方ですが、大きな利点があります。

于 2014-08-27T08:34:43.667 に答える