More Related Content
More from Shunji Konishi (20)
良質なコードを高速に書くコツ
- 9. $("#btn-toggle").click(function() {
var opened =$("#table").find(".view-toggle").toggle().is(":visible");
$(this).text(opened ? "閉じる" : "開く");
});
$("#btn-exec").click(funtion() {
$.ajax({
"url" : ...
"data" : { ...},
"success" : function(data) {
var $table = $("#table");
$table.find(".data-name").text(data.name);
//ここにデータ設定のコードが並ぶ
$table.find(".view-toggle").hide();
}
});
});
- 11.
まず、アプリ要件だけを先に全部書く
//Tableオブジェクト
function Table($table) {
//中身は後で書くのでとりあえず空
}
var table = new Table($("#table“));
$("#btn-toggle").click(function() {
table.toggle();
$(this).text(table.isOpened() ? "閉じる"
}
$("#btn-exec").click(funtion() {
$.ajax({
"success" : function(data) {
table.apply(data);
table.close();
}
});
});
: "開く");
まだTableオブジェクトの
メソッドを１行も書いてない
うちから「toggle」「apply」
などのアプリ要件を実現する
メソッドを記述する
(関数宣言だけは先に書く場合
もある)
- 12. //Tableオブジェクト
function Table($table) {
function toggledRows() { return $table.find($(".view-toggle"));}
function isOpened() { return toggleRows().is(“:visible");}
function open() { toggleRows().show();}
function close() { toggleRows().hide();}
function toggle() { toggleRows().toggle();}
function apply(data) {
$table.find(".data-name").text(data.name);
...
}
$.extend(this, {
要するにオブジェクト指向的な実装をすると
“isOpend" : isOpened,
いうことだがコンテキスト境界が明確になる
"open" : open,
ことが大事
"close" : close,
"toggle" : toggle,
関数をローカルに宣言して$.extendで公開
"apply" : apply
するやり方は単に小西の好みなので普通に
}
prototypeでやっても良い
}
- 13.
アプリ要件を考える時に使う用語がそのままメソッドになっ
ている
◦ テーブルを開く -> open
◦ テーブルを閉じる -> close
◦ テーブルが開いていたら -> isOpened
jQueryで１行でできることでもアプリ要件の用語でメソッド
定義することが重要
◦ セレクタがでてくるとそこでコンテキストスイッチが発生する
オブジェクトの実装とアプリ要件のコードはどちらを先に書
いても良い
◦ ていうかオブジェクトを先に書く方が一般的かも。。。
◦ 慣れてくるとアプリ要件を先に書く方が楽。
Backbone等のフレームワークを使うという解もある
◦ しかしこれができるようになるとあまり必要を感じなくなる
