※スマホ対応はしてません。

タグ: 設計

意識の低いモジュールっぽい設計の話。(JavaScriptおれおれAdvent Calendar 2014 – 23日目)

カテゴリー: JavaScript

JavaScriptおれおれAdvent Calendar 2014 – 23日目

Model-Viewなライブラリーとか一切なし、サーバー側出力HTMLにjQueryから操作してあれこれする話です。だいたい同じものが繰り返し出力されてる想定。

モジュールという呼び方で良いんだろうか。

モジュールの構成

例えばこんな感じ。商品一覧みたいな。

  • div.js-list
    • article.js-item[data-id=”1″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • article.js-item[data-id=”2″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • article.js-item[data-id=”3″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • (以下繰り返し)

機能

  • 各モジュールの.js-toggleクリックで、その領域を開閉する
  • 各モジュールの.js-form送信で、その購入画面へ遷移する

モジュールとして実装

.js-toggleクリックなんで、まずはこう。

$('.js-toggle').on('click', function(event) {
    // …
});

で、ここから「モジュール」を認識する。

$('.js-toggle').on('click', function(event) {
    // モジュール取得
    var $button = $(event.currentTarget);
    var $item = $button.closest('.js-item');

    // …
});

あとはモジュール単位に処理。

$('.js-toggle').on('click', function(event) {
    // モジュール取得
    var $button = $(event.currentTarget);
    var $item = $button.closest('.js-item');

    // 開閉
    // (このモジュール内の詳細要素を対象にする。)
    var $detail = $item.find('.js-detail');
    $detail.toggleClass('is-hidden');
});

フォームの方はvar id = $item.attr('data-id');でID取得して、次の遷移先URLを構築する。(今回の例だと普通にフォームで移動したら終わりっぽいけど。)

とまあそんな場面もあります

サーバー側からクライアント側への過渡期っぽい実装。

jQueryの要素移動(Traversing)関係の機能はあんまり使わないんだけど、こういう実装するときはclosest()とfind()だけ使ってます。

ModelとViewに分ける設計の話。ちょい難しめ。(JavaScriptおれおれAdvent Calendar 2014 – 18日目)

カテゴリー: JavaScript

JavaScriptおれおれAdvent Calendar 2014 – 18日目分

あとから更新。

JSオジサンでお話してきた内容です。というか、先月JSConf.Asiaでもお話してきた内容ですね。

be-happy
みんなで幸せになろうよ。

スライド

こちらご覧ください。

つらいアプリ実装の例

カラーピッカーの実装を考えます。

よくあるカラーピッカーUI。

(さらに…)