【黑马程序员济南中心】前端就业班笔记框架封装(一)

框架整体介绍

-> 框架和库是什么

     库: 仓库, 表示的是很多为了实现特殊功能而封装的, 便于使用开发的 函数, 对象 和 常量等.

     例如:

// 在 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 表格

//使用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 );

你可能感兴趣的:(【黑马程序员济南中心】前端就业班笔记框架封装(一))