// 在 dom 元素下, 獲得 復合 tagName 的元素, 
            // 如果不提供 dom 參數, 那麽就是默認 document
            function getTag( tagName, dom ) {
                dom = dom || document;
                return dom.getElementsByTagName( tagName );
            }
            getTag( ‘div‘, dv );
 

在開發過程中為了實現更加方便的使用, 封裝這些方法, 然後組合到一起以供使用, 這樣就構成了庫.
框架: 是一套完整的開發解決方案. 框架一般提供了一些方便的開發格式與方法, 我們只需要按照他的格式使用即可, 不需要關註一些具體的實現.
-> 為什麽學習框架封裝
1> 強化原生 js 代碼
2> 培養編程的思想與積累代碼結構
3> 提高對 jq 框架的理解
4> 強化 js 高級中涉及的理論內容

選擇模塊
-> 問題引入
傳統編碼的問題:
1> 獲得元素方法名太長, 出現錯誤的幾率變大.
2> 有重復代碼的嫌疑, 獲得元素重復, 循環遍歷增加樣式重復
問題可以再優化, 數組帶有 forEach 方法

-> 選擇函數
-> map 與 forEach 方法
-> ES5 中給數組擴展了一些用於遍歷數組元素的方法map、forEach、some、every
-> map 映射
將一個( 一組 )數據按照一定的規則, 轉為另一個( 一組 )數據, 這個就是映射在 js 中就是由 一個數組 得到另一個數組
語法:

  數組.map(function ( v, i ) {
                    // 對每一個元素進行處理
                    // 返回一個數據
                });
    var arr = [ 1, 2, 3 ];
    var newArr = arr.map( function ( v, i ) {
        return v * 2;
    });
    // 在函數中如果不返回任何數據, 那麽就是說返回 undefiend
 

-> forEach
就是在遍歷一個數組. forEach 在內部會遍歷數組中的每一個元素. 因此我們只需要提供如何操作元素即可, 也就是說提供一個處理函數, forEach 在遍歷每一個元素的時候就會調用該函數.
語法:

   數組.forEach( function ( v, i ) {
                    // 寫上如何處理第 i 個元素即可
                });
        var arr = [ 1, 2, 3, 4 ];
    // 將數組遍歷,並打印每一個元素
    arr.forEach( function ( v, i ) {
        console.log( v );
    });

    for ( var i = 0; i < arr.length; i++ ) {
        console.log( arr[ i ] );
    }

-> some 與 every
some 表示只要存在即可, 相當於邏輯或運算
every 表示每一個都要, 相當於邏輯與運算
這兩個方法是專門用來判斷數組中元素的
語法:

 數組.方法名(functiuon ( v, i ) {
                    // 需要返回一個 boolean 值, 
                    // 用於表示對數組中該元素的判斷
                });
    var arr = [ 1, 2, -1, 3, 4, 5, 6, 7, 10 ];
    // 判斷, arr 中的數據是不是都是 大於 0 的呢?
    // console.log( arr.every( function ( v ) { return v > 0; }) );
    // 補充
    // ES6 中引入了 箭頭函數
    // 在書寫 匿名函數的時候 關鍵字非常的復雜, 新語法給予了簡化
    // 1> 省略 function 關鍵字, 使用 ( 參數 ) => { 語句 } 的格式表示函數
    //      console.log( arr.every( ( v ) => { return v > 0; }) );
    // 2> 如果函數參數只有一個元素, 那麽圓括號可以省略
    //      console.log( arr.every( v => { return v > 0; }) );
    // 3> 如果方法體只有一句話, 可以省略花括號, 如果只有一句話, 還可以省略 return 關鍵字
    //      console.log( arr.every( v => v > 0 ) );
    // 箭頭函數不會造成新的作用域
    // some 判斷元素中是否有負數
    console.log( arr.some( v => v < 0 ) );

如果是 every 方法, 必須保證數組中每一個元素都返回 true, 那麽 every 方法才會返回 true.
如果是 some 方法, 表示只要有一個為 true, 那麽這個 some 方法的返回值就是 true.

-> each 與 map 方法
問題: 要求使用數組生成 table 表格
[mw_shl_code=javascript,true]
//使用jQuery提供的each方法生成表格

var data = [
        { name: ‘jim1‘, age: 19, gender: ‘male‘ },
        { name: ‘jim2‘, age: 18, gender: ‘female‘ },
        { name: ‘jim3‘, age: 20, gender: ‘female‘ },
        { name: ‘jim4‘, age: 21, gender: ‘male‘ },
        { name: ‘jim5‘, age: 19, gender: ‘female‘ },
        { name: ‘jim6‘, age: 18, gender: ‘male‘ }
    ];

    // 1, 創建 table 標簽 和 tbody 標簽
    // 2, 遍歷數組, 生成 tr 標簽
    // 3, 在遍歷的內部, 再次遍歷數據, 生成 td 標簽
    function cTag ( tagName ) {
        return document.createElement( tagName );
    }
    var table = cTag( ‘table‘ );
    var tbody = cTag( ‘tbody‘ );
    // 註意, jq 中的 each 方法中 回調函數的 參數是 k, v 的形式
    $.each( data, function ( k, v ) {
        // 根據 v 生成 tr
        var tr = cTag( ‘tr‘ );
        // 遍歷 v 生成 td
        $.each( v, function ( key, value ) {
            var td = cTag( ‘td‘ );
            var txt = document.createTextNode( value + ‘‘ );
            td.appendChild( txt );
            tr.appendChild( td );
        });
        tbody.appendChild( tr );
    });
    table.appendChild( tbody );
    // 設置, 並將 table 加到 body
    table.border = ‘1‘;
    table.width = ‘400‘;
    document.body.appendChild( table );

自定義isArrayLike函數

  function isArrayLike ( array ) {

        var length = array && array.length;

        return typeof length === ‘number‘ && length >= 0;

    }

封裝each

 function isArrayLike ( array ) {

        var length = array && array.length;

        return typeof length === ‘number‘ && length >= 0;

    }

    function each ( array, callback ) {
        var i, k;
        if ( isArrayLike( array ) ) {
            // 使用 for 循環
            for ( i= 0; i < array.length; i++ ) {
                if( callback.call( array[ i ], i, array[ i ] ) === false ) break;
            }
        } else {
            // 使用 for-in 循環
            for ( k in array ) {
                if( callback.call( array[ i ], k , array[ k ] ) === false ) break;
            }
        }
        return array; 
    }

    var list = document.getElementsByTagName( ‘div‘ );
    each( list, function () {
        this.style.border = ‘1px dashed red‘;
        this.style.width = ‘300px‘;
        this.style.height = ‘100px‘;
        this.style.margin = ‘10px 0px‘;

        return false;
    });

使用自定義each生成表格

var data = [
        { name: ‘jim1‘, age: 19, gender: ‘male‘ },
        { name: ‘jim2‘, age: 18, gender: ‘female‘ },
        { name: ‘jim3‘, age: 20, gender: ‘female‘ },
        { name: ‘jim4‘, age: 21, gender: ‘male‘ },
        { name: ‘jim5‘, age: 19, gender: ‘female‘ },
        { name: ‘jim6‘, age: 18, gender: ‘male‘ }
    ];

    function cTag ( tagName ) {
        return document.createElement( tagName );
    }

    function isArrayLike ( array ) {

        var length = array && array.length;

        return typeof length === ‘number‘ && length >= 0;

    }

    function each ( array, callback ) {
        var i, k;
        if ( isArrayLike( array ) ) {
            // 使用 for 循環
            for ( i= 0; i < array.length; i++ ) {
                if( callback.call( array[ i ], i, array[ i ] ) === false ) break;
            }
        } else {
            // 使用 for-in 循環
            for ( k in array ) {
                if( callback.call( array[ i ], k , array[ k ] ) === false ) break;
            }
        }
        return array; 
    }

    var table = cTag( ‘table‘ );
    var tbody = cTag( ‘tbody‘ );
    // 註意, jq 中的 each 方法中 回調函數的 參數是 k, v 的形式
    each( data, function ( k, v ) {
        // 根據 v 生成 tr
        var tr = cTag( ‘tr‘ );
        // 遍歷 v 生成 td
        each( v, function ( key, value ) {
            var td = cTag( ‘td‘ );
            var txt = document.createTextNode( value + ‘‘ );
            td.appendChild( txt );
            tr.appendChild( td );
        });
        tbody.appendChild( tr );
    });
    table.appendChild( tbody );
    // 設置, 並將 table 加到 body
    table.border = ‘1‘;
    table.width = ‘80%‘;
    document.body.appendChild( table );

前端就業班筆記框架封裝（一）