本帖最后由 小鲁哥哥 于 2018-3-30 13:51 编辑
【济南校区】前端就业班笔记框架封装（一）
框架整体介绍 -> 框架和库是什么
库: 仓库, 表示的是很多为了实现特殊功能而封装的, 便于使用开发的 函数, 对象 和 常量等.
例如:
[JavaScript] 纯文本查看 复制代码 // 在 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 中就是由 一个数组 得到另一个数组
[JavaScript] 纯文本查看 复制代码 语法:
数组.map(function ( v, i ) {
// 对每一个元素进行处理
// 返回一个数据
});
var arr = [ 1, 2, 3 ];
var newArr = arr.map( function ( v, i ) {
return v * 2;
});
// 在函数中如果不返回任何数据, 那么就是说返回 undefiend
-> forEach
就是在遍历一个数组. forEach 在内部会遍历数组中的每一个元素. 因此我们只需要提供如何操作元素即可, 也就是说提供一个处理函数, forEach 在遍历每一个元素的时候就会调用该函数.
[JavaScript] 纯文本查看 复制代码 语法:
数组.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 表示每一个都要, 相当于逻辑与运算
这两个方法是专门用来判断数组中元素的
[JavaScript] 纯文本查看 复制代码 语法:
数组.方法名(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 表格
[JavaScript] 纯文本查看 复制代码
//使用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函数
[JavaScript] 纯文本查看 复制代码 function isArrayLike ( array ) {
var length = array && array.length;
return typeof length === 'number' && length >= 0;
}
封装each
[JavaScript] 纯文本查看 复制代码 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生成表格
[JavaScript] 纯文本查看 复制代码 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 );
如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！ 黑马程序员济南中心联系电话：0531-55696830
|
收藏
淘帖
踩
