• テストとjQueryのeachっぽい何かを書いてみた

    jQueryは便利だけど、わざわざjQueryをロードせずともできるだけ同じようなことがしたいというときに便利。jQueryほどセレクタの指定ができないが、forEachでぐるぐると実行してくれるので便利。おまけにテストも書いてみました。

    使う場面としたら、Chrome拡張やブックマークレットくらいでしょうか。

    <script>
    
    
    /* スクリプト
    -------------------------------------------------------------------------------*/
    var tags, classes, id;
    (function(){
        var a = function(o){return Array.prototype.slice.apply(o)},
        d = document,
        g = function(t){return d.getElementsByTagName(t)};
     
        tags = function(t, f, h) {
            var c = 0;
            a((h == undefined ? g(t) : h.getElementsByTagName(t))).forEach(function(h) {
                f.call(h, c);
                c++;
            });
        };
     
     
        classes = function(l, f, h) {
            var o = 0;
            a((h == undefined ? g("*") : h.getElementsByTagName("*"))).forEach(function(h) {
                var c = h.className.split(" ");
                for (var i = 0; i < c.length; i++) {
                    if (c[i] == l) {
                        f.call(h, o);
                        o++;
                        break;
                    }
                };
            });
        };
     
        id = function(i, f) {
            f.call(d.getElementById(i));
        };
    }).call(this);
    
    
    
    /* テストスクリプト
    -------------------------------------------------------------------------------*/
    
    var testResult = "";
    var print = function(_print) {
        testResult += _print;
    };
    
    var testData = function() {
        document.write(new Array(100).join("-")+"<br/>");
        document.write("テストデータ<br/>");
        document.write(new Array(100).join("-")+"<br/><br/>");
    };
    
    
    
    var testLog = function(){
        document.write("<br/><br/>");
        document.write(new Array(100).join("-")+"<br/>");
        document.write("テスト結果<br/>");
        document.write(new Array(100).join("-")+"<br/>");
        document.write(testResult);
    };
    
    
    var suite = function(_suite) {
        print("<br/>■ "+_suite+"<br/>");
    };
    
    var test = function(_name){
    
        var result = 1;
        for (var i = 1; i < arguments.length; i++) {
            if (typeof(arguments[i]) == "function") {
                try {
                    result = result && arguments[i]();    
                }
                catch (_error) {
                    result = 0;
                    throw (_error);
                }
                break;
            }
        };
    
        print((result ? "○" : "×")+" ");
        print(_name);
        print("<br/>");
    };
    
    
    testData();
    </script>
    
    
    <!-- テスト用データ
    =============================================================================== -->
    <meta charset="UTF-8">
    <div>hoge</div>
    <div class="hoge">hoge</div>
    <div>hoge</div>
    <div id="fufu">hoge</div>
    <div class="hage hoge test">
        <span>aaa</span>
        <span>aaa</span>
        <span>aaa</span>
        <span>aaa</span>
    </div>
    <div class="test">
        <span>bbb</span>
        <span>bbb</span>
        <span>bbb</span>
        <span class="test">bbb</span>
        <span class="test">bbb</span>
        <span>bbb</span>
        <span>bbb</span>
    </div>
    
    
    <script>
    
    /* テスト実行
    -------------------------------------------------------------------------------*/
    
    suite("tags");
    
    test("ちゃんとtagsが実行された", function(){
        var count = 0;
        tags("div", function(){
            count++;
        });
        return count == 6;
    });
    
    test("インデックスが一致している", function(){
        var count = 0;
        var flag = 1;
        tags("div", function(i){
            count++;
            if (count == i) {
                flag = 0;
            }
        });
        return flag;
    });
    
    test("二階層目のspanを取得できる", function(){
        var count = 0;
        tags("div", function(i){
            if (i == 5) {
                tags("span", function() {
                    count++;
                }, this);
            }
        });
        return count == 7;
    });
    
    suite("classes");
    
    test("classesが実行できた", function(){
        var count = 0;
        classes("hoge", function(){
            count++;
        });
        return count == 2;
    });
    
    test("インデックスが一致している", function(){
        var count = 0;
        var flag = 1;
        classes("hoge", function(i){
            count++;
            if (count == i) {
                flag = 0;
            }
        });
        return flag;
    });
    
    test("カウンタが数値である", function(){
        var flag = 1;
        classes("hoge", function(i){
            if (typeof(i) != "number") {
                flag = 0;
            }
        });
        return flag;
    });
    
    test("二階層目のclassを取得できている", function(){
        var count = 0;
        classes("test", function(i){
            if (i == 1) {
                console.log(this);
                classes("test", function() {
                    console.log(this);
                    count++;
                }, this);
            }
        });
        return count == 2;
    });
    
    suite("id");
    
    test("idが実行できた", function(){
        var count = 0;
        id("fufu", function(){
            count++;
        });
        return count == 1;
    });
    
    /* テスト結果出力
    -------------------------------------------------------------------------------*/
    testLog();
    
    </script>
    
    Code language: JavaScript (javascript)

    こんなかんじでブックマークレットも作れる

    var tags,classes,id;(function(){var a=function(o){return Array.prototype.slice.apply(o)},d=document,g=function(t){return d.getElementsByTagName(t)};tags=function(t,f,h){var c=0;a(h==undefined?g(t):h.getElementsByTagName(t)).forEach(function(h){f.call(h,c);c++})};classes=function(l,f,h){var o=0;a(h==undefined?g("*"):h.getElementsByTagName("*")).forEach(function(h){var c=h.className.split(" ");for(var i=0;i<c.length;i++)if(c[i]==l){f.call(h,o);o++;break}})};id=function(i,f){f.call(d.getElementById(i))}}).call(this);
    tags("td",function(){var that=this;tags("a",function(){if(this.innerHTML.indexOf("\\u4ed9\\u53f0")+1)that.style.background="orange"},this)});Code language: JavaScript (javascript)