【javascript】ダイアログ表示を共通化したい

javascirptのダイアログを共通化したくて以下のように書いてみたのですが、いまいちスマートじゃないです。
もっといいかんじに書く方法があれば教えてください。

■ダイアログクラス

javascript
1var Dialog = function () {
2    this.open = function (params) {
3        var dialog = $("#dialog");
4        dialog.html(params["message"]);
5        dialog.dialog({
6            title: params["title"],
7            modal: true,
8            height: 200,
9            width: 400,
10            resizable: false,
11            draggable: false,
12            buttons: {
13                "Cancel": function () {
14                    // Cancel
15                },
16                "OK": function () {
17                    // OK
18                }
19            }
20        });
21    }
22};

■呼び出し側

javascript
1var dialog = new Dialog();
2var params = {
3    title: "タイトル",
4    message: "メッセージ"
5};
6dialog.open(params);

行動規範の内容に同意します

回答1件

ベストアンサー

インスタンス化するときはインスタンス変数に扱いたいデータは定義したほうがその後の処理を行いやすいです。
また、処理はできるだけ小さく切り出してあげたほうがいいです。

javascript
1var Dialog = function(props){
2  var self = this;
3  
4  this.$el = $(props.el);
5  this.title = props.title;
6  this.message = props.message;
7  
8  // messageをいれてdialogをひらう
9  this.open = function(){
10  // メッセージを入れる
11    this.setMessage();
12     
13    // Dialogを開く
14    this.callDialog()
15  }
16 
17 // カスタマイズしやすいようにOKの挙動を定義する
18  this.successCallback = function(){
19    // OKの処理
20  }
21 // カスタマイズしやすいようにcancelの挙動を定義する
22  this.cancelCallback = function(){
23    // cancelの処理
24  }
25  
26  // optionの設定も切り分ける
27  this.option = function(title){
28    return {
29      title: title,
30      modal: true,
31      height: 200,
32      width: 400,
33      resizable: false,
34      draggable: false,
35      buttons: {
36        "OK": this.successCallback,
37        "Cancel": this.cancelCallback
38      }
39    }
40  }
41
42 
43  this.callDialog = function(){
44    dialog.dialog(this.option(this.title));
45  }
46
47
48  this.setMessage = function(){
49    this.$el.html(this.message);
50  }
51}
52
53// デフォルトの挙動で初期化する
54var d1 = new Dialog({
55  el: '#dialog1',
56  title: 'ダイアログ1のタイトル',
57  message: 'ダイアログ1のメッセージ'
58})
59
60d1.open() //通常オプションでのオープン
61
62
63// OKおした時の挙動をカスタマイズする
64var d2 = new Dialog({
65  el: '#dialog2',
66  title: 'ダイアログ2のタイトル',
67  message: 'ダイアログ2のメッセージ'
68})
69
70d2.successCallback = function(){
71  // カスタマイズしたOKボタンの挙動
72}
73
74d2.open()