ぶれすとつーる

だいたいjavascript

DOM操作系ライブラリのひな形

ちょろいライブラリを書く時とかぼくはこんな感じのひな形つくって、必要に応じてAPIを増やしていってます。


ま、あんまりAPI増えてくると管理の仕方を色々考え直さなきゃってなるけど

(function(win, doc){

    win.lib = {
        // libライブラリの持ってるAPIを列挙
        get: getNode
    };

    // 要素の取得処理
    function getNode(exp, context) {
        // クロスブラウザ化するならSizzleなどを使う
        var nodeList = (context ? context : doc).querySelectorAll(exp);
        return new NodeWrapper(nodeList);
    }

    // Nodeのラッパーオブジェクト
    function NodeWrapper(nodeList) {
        // ieはnodelistをsliceするとエラーでるので別途配列化関数が必要
        this.items = Array.prototype.slice.call(nodeList);
    }

    NodeWrapper.prototype = (function(){
        var api ={
            // DOM操作系のapiを列挙
            dump: dump
        };

        // 上で列挙したDOM操作APIをここで定義
        function dump() {
            console.log(this.items);
        }

        return api;
    }());

}(window, document));

こんな感じで使えます。

lib.get('h1').dump();

コンソールにh1タグが出力されます。


簡単な解説

    win.lib = {
        // libライブラリの持ってるAPIを列挙
        get: getNode
    };

    // 要素の取得処理
    function getNode(exp, context) {
        // クロスブラウザ化するならSizzleなどを使う
        var nodeList = (context ? context : doc).querySelectorAll(exp);
        return new NodeWrapper(nodeList);
    }

libオブジェクトにgetNodeというDOM取得関数を"get"という名前で登録しています。

getNodeはdocument.querySelectorAllをつかってDOMを取得してNodeWrapperコンストラクタで包んで返してくれます。


NodeWrapperはというと...

    // Nodeのラッパーオブジェクト
    function NodeWrapper(nodeList) {
        this.items = Array.prototype.slice.call(nodeList);
    }

    NodeWrapper.prototype = (function(){
        var api ={
            // DOM操作系のapiを列挙
            dump: dump
        };

        // 上で列挙したDOM操作APIをここで定義
        function dump() {
            console.log(this.items);
        }

        return api;
    }());

うけとったnodeの配列をプロパティとして保持してprototypeに定義したAPIから参照できるようにしています。

あとはprototypeにどんどんDOM操作系のAPIを列挙していけばok


これはひな形なのでdumpしかないけどメソッドを増やしていったりして肉付けしていくとおれおれライブラリが簡単にできますね。