web-dev-qa-db-ja.com

Webアプリケーションの控えめなスクリプトパターンの欠点は何ですか？

まず第一に、これには真のデザインパターンとしての名前がありますか？現在、私はそれを「非破壊的なJavaScript」と呼んでいます。これが私が話していることの簡単な例です：

1.）HTML5 data- *属性を使用して、UXスクリプトで使用される値を定義します。このようなもの：

<input type="date" data-app-calendar="datepicker" />

2.）スクリプトを使用して、これらのデータ属性を使用してjavscript動作を初期化します。

(function($) {
    $.app = $.app || {};
    $.app.obtruders = $.app.obtruders || {};
    $.app.obtrude = function(selector) {
        var obtruder, obtruders = $.app.obtruders;
        for (obtruder in obtruders) {
            if (!obtruders.hasOwnProperty(obtruder)) continue;
            if (typeof obtruders[obtruder] === 'function')
                obtruders[obtruder].apply(this, 
                    Array.prototype.slice.call(arguments, 0, 1) || document);
        }
    };

    $.extend($.app.obtruders, {
        calendar: function (selector) {
            $(selector).find('[data-app-calendar=datepicker]').datepicker();
        }
    });

    $(function () {
        $.app.obtrude(document);
    });

})(jQuery);

最終的に得られるのは、動作スクリプトから非常に明確に分離されたプレゼンテーションマークアップです。上記の例は単純ですが、グーグルマップのようなより複雑なスクリプト可能なUXに拡張することができます（私は現在これに取り組んでいます）。 $ .app.obtrudersオブジェクトリテラルを拡張することで、新しい「オブトルーダー」を個別のJavaScriptファイルに追加することもできます。

このパターンをアプリでより広く使用し始める前に、私は意見のために頭脳を選び、このようなアプローチのいくつかの潜在的な欠点についてのアイデアを得ようとしました。このパターンの何が好きですか？何が嫌いですか？なぜそれを使わないのですか？

web-developmentjavascriptdesign-patternshtml5
6
danludwig

これは一般的なパターンであり、「控えめなJavaScript」はその一般的な名前であり、一般的に優れた代替手段と見なされています（JavaScript呼び出しをリンクやイベントハンドラーに直接配置します）。

私が考えることができる唯一の欠点は、それが行動を発見するのを難しくするということです。 HTMLを見ると、動的な動作が何であるか、またはそれがどこで定義されているかさえわかりません。これは、規則またはIDEサポートによって軽減できます。

7
Michael Borgwardt

2つの大きな欠点があります。

1.最初の1つはすでに Michael Borgwardt によって言及されていました。ページ要素が実際に機能している原因を見つけるのは難しいという事実です。例えば：

_<div id="TopActions">
    <a id="ToggleTopPanel" onclick="javascript:ToggleTopPanel();">Expand</a>
</div>
_

簡単です：このコードを読むとき、私は絶対に確信しています：

  • 「展開」リンクをクリックすると、どこかに書かれたToggleTopPanel()メソッドで指定された処理が実行されます。もっと知りたいのなら、方法を探すだけです。
  • JavaScriptを無効にするとページが機能しないこと。

一方、私が読んだ場合：

_<div id="TopActions">
    <a id="ToggleTopPanel" href="?topPanel=expanded">Show</a>
</div>
_

JavaScriptが有効になっているとどうなるかわかりません（JavaScript以外のバージョンと動作が異なっていても）。さらに、努力なしでそれを見つけるために私ができることは何もありません。数千行のコードがある場合、どこで検索しますか？かもしれない：

_$('#ToggleTopPanel').click(function() {
    // The magic happens here.
});
_

または多分：

_$('#TopActions a').click(UI.Top.Activated($(this)));
_

またはまったく異なる何か。プロファイラー付きのブラウザーがあり、その使用方法を知っているか、まあ...

2. 2番目の理由は、控えめなJavaScriptが作業を行う最も簡単な方法ではないことです。それが明らかに大規模なWebアプリケーションの選択である場合、週に1人（作成者を除く）がアクセスする小さな個人Webサイトにとってはやり過ぎです。

  • 契約が何かを小さくすることであり、それを速くて安価にすることであるならば、邪魔にならないJavaScriptを気にしないでください。

  • 契約がページ全体に飛んでいる雪片や、カーソルを探している蜂、ユーザーが読み込もうとしているページの前にジャンプする広告など、不快な視覚効果を追加することである場合は、控えめなJavaScriptを気にしないでください。

7
Arseni Mourzenko

これは、アプリケーションへの機能の注入と呼ばれます。これは「一般的な」パターンです。

私は個人的に同じようなパターンを使用しています

["feature1", "feature2", ...].forEach(function(feature) {
  var elems = $("." + feature);
  // this document has an element that uses the feature
  if (elems.length) {
    loadFeatureByAjax(document, feature);
  }
});

次に、各機能は、セレクターに自分自身を挿入する方法を知っています

var Feature = function (selector) {
    $(selector).find('.featureName').datepicker();
}

属性CSSセレクターは地獄のように遅く、避ける必要があるため、data-属性ではなくクラスを使用することに注意してください。

他の唯一の問題点は、特定の実装が冗長に感じられることですが、コーディングスタイルにすぎない場合があります。

2
Raynos