読者です 読者をやめる 読者になる 読者になる

pirosikick's diary

君のハートにunshift

Javascript Tips その2

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

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

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

上記1文は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;

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

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

    Singleton.prototype = this;

    /*
     * この1文がないと、
     * 1回目に返したオブジェクトのconstructorと、
     * 2回目以降に返すオブジェクトのconstructorで、
     * 指すオブジェクトが違うのでこの1文で修正します。
     */
    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

JavaScript Patterns