Javascript Tips その２

仕事がいそがしくてさぼってました、すみません。前回に引き続き、最近仕事で勉強しているJavascriptのTipsをまとめます。

navigator.userAgentの値を参照せずにIEかどうかの判別を行う方法

var isIE = /*@cc_on!@*/false;

上記１文はIEだと下記のように解釈される。

var isIE = !false; // true

navigator.userAgentは簡単に書き換えることができるので、こちらの方法のほうが若干安全です。

javascriptでSingletonパターン

いくつかパターンが紹介されていたのですが、Singletonパターンが結構感動したのでここで紹介。まずどういう風に動作するかというと、、、

var a = new Singleton();
var b = new Singleton();

// aとbは同じオブジェクトを指している。
if (a === b) console.log("same reference!");

---出力---
same reference!

上記Singleton関数はSingletonパターンを実装しているので、常に同じオブジェクトを返しています。実装は下記のとおりです。

function Singleton {

    var instance = this;

    /*
     * 関数を再定義し上書きする
     * ２回目以降のnewではここのFunctionが使われる。
     */
    Singleton = function () {

        // 返すオブジェクトはクロージャで保持
        return instance;
    }

    Singleton.prototype = this;

    /*
     * この１文がないと、
     * １回目に返したオブジェクトのconstructorと、
     * ２回目以降に返すオブジェクトのconstructorで、
     * 指すオブジェクトが違うのでこの１文で修正します。
     */
    instance.constructor = Universe;

    return instance;
}

DOM操作について

基礎的なこと

まず、DOM操作はとっても重いです。なので、

• DOM操作をforなどのループの中で使わない
• DOMをローカル変数に代入してローカルのスコープで作業する
• 可能ならばセレクターAPI（document.querySelector）を使ってDOMにアクセスする。こっちのほうが高速なので。

DocumentFlagment

DOMツリーに新しいノードを追加するときは、このように、、

var p,t;

p = document.createElement('p');
t = document.createTextNode('first');
p.appendChild(t);
document.body.appendChild(p);

p = document.createElement('p');
t = document.createTextNode('second');
p.appendChild(t);
document.body.appendChild(p);

少しずつ追加するとそのたびにDOMツリーにアクセスするので余計な負荷がかかってしまう。そこでDocumentFlagmentを利用して一気にアクセスする。

var p, t, frag;

flag = document.createDocumentFragment();

p = document.createElement('p');
t = document.createTextNode('first');
p.appendChild(t);
frag.appendChild(p); // フラグメントに追加

p = document.createElement('p');
t = document.createTextNode('second');
p.appendChild(t);
frag.appendChild(p); // フラグメントに追加

// 一気に追加
document.body.appendChild(frag);

• • -

眠くなってきたので、すみませんがまた次回書きますー

JavaScript Patterns