JavaScript Object&Function Text with sham jQuery

by mejileben

HTML

<div class='hogehoge'>
before
</div>
<div id='hogehoge'>
before
</div>
<div class='hogehoge'>
before
</div>

JavaScript

// jQueryでよく見かける$('className')的な書き方について
// 実際に似たような挙動をするプログラムを書いてみて理解してみる

// 最終的にこんなことができるプログラムを書きたい
// $('.hogehoge').text('changed by className.');
// $('#hogehoge').text('changed by id.');
// html上は「before」だけど、右の画面に出て来る結果は違うはず

// 補足
// オブジェクトは、変数とメソッドを”プロパティ”としてひとまとめに持つ箱
// オブジェクトに属している関数を特にメソッドと言う

// $(文字列)という書き方ができるということは、
// $は関数ということ
// $マークを使っているから変に見えるだけで実際はただの関数
// 変数$に関数を代入する
var $ = function(elementName){
    // [参考]var系の変数宣言は最初にまとめてしておく
    // http://qiita.com/Chrowa3/items/a11adcd811e253a0b333
    var elements = [],
        targetElementList,
        targetClass,
        targetId;
	
    // http://semooh.jp/jquery/api/attributes/text/val/
    // $(文字列).text(文字列)で、指定した要素の
    // テキストを書き換えできるので、
    // $(文字列)を実行した結果はオブジェクトが返り値で、
    // そのオブジェクトがtextメソッドを持っていると予想できる
    // ※多分読み進めていったら分かる
    
    // まずは空っぽのオブジェクトを作る
    myJQuery = {};
    
    // elementNameがドットから始まるか、
    // シャープから始まるかによって処理を分岐している
    // textメソッドで使うので、配列elementｓに要素を代入しておく
    if(elementName.startsWith('.')){
        // 文字列からドットを取り除く
        targetClass = elementName.replace('.', '');
        
        // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
        // class名のリストが返ってくる
        // classなので複数要素があるかもしれない
        targetElementList = document.getElementsByClassName(targetClass);
        
        for(var i = 0; i < targetElementList.length; i++){
            // https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection
            // この辺の詳細は参考までに。
            // 配列の末尾に要素を追加していく
            elements.push(targetElementList.item(i));
        }
    }else if(elementName.startsWith('#')){
        targetId = elementName.replace('#', '');
        
        // IDは1つだけなので特に繰り返し文はいらない
        elements.push(document.getElementById(targetId));
    }
    
    // textプロパティとして関数をオブジェクトに追加する
    // このように(オブジェクト名).(プロパティ名)で、
    // 変数や関数をオブジェクトに追加できる
    // 今回は関数だけど変数をプロパティに入れることもできる
    myJQuery.text = function(text){
        // もしelementsが空だったらエラーになるのでreturnしておく
...