ぷち伝言板をクラスにしてみる。

せっかくProtoType.jsを入れてみたのだから、$()をつかって満足してないでクラスにしてみよう！とおもた。でも、コードはかえって長くなった。しかも汚い気がする･･･まだ使いこなせてないってのも多そうだけど。ちなみに今日はまったこと。<div />に対してJavaScriptでDOM操作をするとIE6.0で異常終了するみたい。FireFoxでは大丈夫でした。最初はコードの量が長すぎて落ちたのかな？とか思ってました･･･。<div> </div>と分けると回避できました。

トップページのが3つになりました。しかも、無意味にプロフィールがスクロールするようになりました(IE限定)。だんだん趣味が悪くなってきました。多分、1年後にはボタンを押そうとするとボタンが逃げるなんていう嫌味なサイトになっている予感がビンビンします。くまったくまった。

var ChatView = Class.create();
ChatView.prototype =
{
    initialize: function(text, url)
    {
        this.view = $(text);
        this.url = url;

        this.name = document.createElement('input');
        this.name.type = 'text';
        this.name.style.width = '80px';
        this.body = document.createElement('input');
        this.body.type = 'text';
        this.body.style.width = '280px';
        this.write = document.createElement('input');
        this.write.type = 'button';
        this.write.value = 'Write';
        this.reload = document.createElement('input');
        this.reload.type = 'button';
        this.reload.value = 'Reload';
        this.logview = document.createElement('div');
        this.logview.style.margin = '1em 1em 2em 0';
        this.logview.style.padding = '1em';
        this.logview.style.border = 'solid 1px gray';

        this.view.appendChild(this.name);
        this.view.appendChild(document.createTextNode(' '));
        this.view.appendChild(this.body);
        this.view.appendChild(document.createTextNode(' '));
        this.view.appendChild(this.write);
        this.view.appendChild(document.createTextNode(' '));
        this.view.appendChild(this.reload);
        this.view.appendChild(this.logview);

        Event.observe(this.write, 'click', this.writeLog.bindAsEventListener(this), false);
        Event.observe(this.reload, 'click', this.readLog.bindAsEventListener(this), false);

        (new Image).src = "img/loading.gif";
        this.readLog();
    },

    readLog: function()
    {
        var parameters = (new Date).getTime();
        new Ajax.Request(
            this.url,
            {
                method: 'post',
                asynchronous: true,
                parameters: parameters,
                onLoading: function(request) {
                    this.logview.innerHTML = "<img src='img/loading.gif' style='vertical-align: middle'> loading...";
                }.bind(this),
                onSuccess: function(request) {
                    this.logview.innerHTML = request.responseText;
                }.bind(this)
            }
        );
    },

    writeLog: function()
    {
        var parameters = "author=" + encodeURI(this.name.value)
            + "&text=" + encodeURI(this.body.value);
        new Ajax.Request(
            this.url,
            {
                method: 'post',
                asynchronous: true,
                parameters: parameters,
                onLoading: function(request) {
                    this.logview.innerHTML = "<img src='img/loading.gif' style='vertical-align: middle'> saving...";
                }.bind(this),
                onSuccess: function(request) {
                    this.logview.innerHTML = request.responseText;
                }.bind(this)
            }
        );
        this.body.value = '';
    }
};

関連エントリー

• Prototype.js
• ぷちカウンター強化。
• Sinatra + OAuth + Twitter で遊んでみる
• 今流行の…
• ソーシャルブックマークボタンを追加してみた