前端就业班笔记框架封装

Posted 2020-10-29

框架整体介绍
-> 框架和库是什么
库: 仓库, 表示的是很多为了实现特殊功能而封装的, 便于使用开发的 函数, 对象 和 常量等.
例如:

            // 在 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 );