查看: 1002|回复: 0

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

发表于 2018-4-7 08:00:02

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

  1. // 在 dom 元素下, 获得 复合 tagName 的元素,
  2. // 如果不提供 dom 参数, 那么就是默认 document
  3. function getTag( tagName, dom ) {
  4. dom = dom || document;
  5. return dom.getElementsByTagName( tagName );
  6. }
  7. getTag( 'div', dv );
复制代码

在开发过程中为了实现更加方便的使用, 封装这些方法, 然后组合到一起以供使用, 这样就构成了库.
框架: 是一套完整的开发解决方案. 框架一般提供了一些方便的开发格式与方法, 我们只需要按照他的格式使用即可, 不需要关注一些具体的实现.
-> 为什么学习框架封装
1> 强化原生 js 代码
2> 培养编程的思想与积累代码结构
3> 提高对 jq 框架的理解
4> 强化 js 高级中涉及的理论内容

选择模块
-> 问题引入
传统编码的问题:
1> 获得元素方法名太长, 出现错误的几率变大.
2> 有重复代码的嫌疑, 获得元素重复, 循环遍历增加样式重复
问题可以再优化, 数组带有 forEach 方法

-> 选择函数
-> map 与 forEach 方法
-> ES5 中给数组扩展了一些用于遍历数组元素的方法map、forEach、some、every
-> map 映射
将一个( 一组 )数据按照一定的规则, 转为另一个( 一组 )数据, 这个就是映射在 js 中就是由 一个数组 得到另一个数组
语法:

  1. 数组.map(function ( v, i ) {
  2. // 对每一个元素进行处理
  3. // 返回一个数据
  4. });
  5. var arr = [ 1, 2, 3 ];
  6. var newArr = arr.map( function ( v, i ) {
  7. return v * 2;
  8. });
  9. // 在函数中如果不返回任何数据, 那么就是说返回 undefiend
复制代码

-> forEach
就是在遍历一个数组. forEach 在内部会遍历数组中的每一个元素. 因此我们只需要提供如何操作元素即可, 也就是说提供一个处理函数, forEach 在遍历每一个元素的时候就会调用该函数.
语法:

  1. 数组.forEach( function ( v, i ) {
  2. // 写上如何处理第 i 个元素即可
  3. });
  4. var arr = [ 1, 2, 3, 4 ];
  5. // 将数组遍历,并打印每一个元素
  6. arr.forEach( function ( v, i ) {
  7. console.log( v );
  8. });
  9. for ( var i = 0; i < arr.length; i++ ) {
  10. console.log( arr[ i ] );
  11. }
复制代码

-> some 与 every
some 表示只要存在即可, 相当于逻辑或运算
every 表示每一个都要, 相当于逻辑与运算
这两个方法是专门用来判断数组中元素的
语法:

  1. 数组.方法名(functiuon ( v, i ) {
  2. // 需要返回一个 boolean 值,
  3. // 用于表示对数组中该元素的判断
  4. });
  5. var arr = [ 1, 2, -1, 3, 4, 5, 6, 7, 10 ];
  6. // 判断, arr 中的数据是不是都是 大于 0 的呢?
  7. // console.log( arr.every( function ( v ) { return v > 0; }) );
  8. // 补充
  9. // ES6 中引入了 箭头函数
  10. // 在书写 匿名函数的时候 关键字非常的复杂, 新语法给予了简化
  11. // 1> 省略 function 关键字, 使用 ( 参数 ) => { 语句 } 的格式表示函数
  12. // console.log( arr.every( ( v ) => { return v > 0; }) );
  13. // 2> 如果函数参数只有一个元素, 那么圆括号可以省略
  14. // console.log( arr.every( v => { return v > 0; }) );
  15. // 3> 如果方法体只有一句话, 可以省略花括号, 如果只有一句话, 还可以省略 return 关键字
  16. // console.log( arr.every( v => v > 0 ) );
  17. // 箭头函数不会造成新的作用域
  18. // some 判断元素中是否有负数
  19. 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方法生成表格

  1. var data = [
  2. { name: 'jim1', age: 19, gender: 'male' },
  3. { name: 'jim2', age: 18, gender: 'female' },
  4. { name: 'jim3', age: 20, gender: 'female' },
  5. { name: 'jim4', age: 21, gender: 'male' },
  6. { name: 'jim5', age: 19, gender: 'female' },
  7. { name: 'jim6', age: 18, gender: 'male' }
  8. ];
  9. // 1, 创建 table 标签 和 tbody 标签
  10. // 2, 遍历数组, 生成 tr 标签
  11. // 3, 在遍历的内部, 再次遍历数据, 生成 td 标签
  12. function cTag ( tagName ) {
  13. return document.createElement( tagName );
  14. }
  15. var table = cTag( 'table' );
  16. var tbody = cTag( 'tbody' );
  17. // 注意, jq 中的 each 方法中 回调函数的 参数是 k, v 的形式
  18. $.each( data, function ( k, v ) {
  19. // 根据 v 生成 tr
  20. var tr = cTag( 'tr' );
  21. // 遍历 v 生成 td
  22. $.each( v, function ( key, value ) {
  23. var td = cTag( 'td' );
  24. var txt = document.createTextNode( value + '' );
  25. td.appendChild( txt );
  26. tr.appendChild( td );
  27. });
  28. tbody.appendChild( tr );
  29. });
  30. table.appendChild( tbody );
  31. // 设置, 并将 table 加到 body
  32. table.border = '1';
  33. table.width = '400';
  34. document.body.appendChild( table );
复制代码

自定义isArrayLike函数

  1. function isArrayLike ( array ) {
  2. var length = array && array.length;
  3. return typeof length === 'number' && length >= 0;
  4. }
复制代码

封装each

  1. function isArrayLike ( array ) {
  2. var length = array && array.length;
  3. return typeof length === 'number' && length >= 0;
  4. }
  5. function each ( array, callback ) {
  6. var i, k;
  7. if ( isArrayLike( array ) ) {
  8. // 使用 for 循环
  9. for ( i= 0; i < array.length; i++ ) {
  10. if( callback.call( array[ i ], i, array[ i ] ) === false ) break;
  11. }
  12. } else {
  13. // 使用 for-in 循环
  14. for ( k in array ) {
  15. if( callback.call( array[ i ], k , array[ k ] ) === false ) break;
  16. }
  17. }
  18. return array;
  19. }
  20. var list = document.getElementsByTagName( 'div' );
  21. each( list, function () {
  22. this.style.border = '1px dashed red';
  23. this.style.width = '300px';
  24. this.style.height = '100px';
  25. this.style.margin = '10px 0px';
  26. return false;
  27. });
复制代码

使用自定义each生成表格

  1. var data = [
  2. { name: 'jim1', age: 19, gender: 'male' },
  3. { name: 'jim2', age: 18, gender: 'female' },
  4. { name: 'jim3', age: 20, gender: 'female' },
  5. { name: 'jim4', age: 21, gender: 'male' },
  6. { name: 'jim5', age: 19, gender: 'female' },
  7. { name: 'jim6', age: 18, gender: 'male' }
  8. ];
  9. function cTag ( tagName ) {
  10. return document.createElement( tagName );
  11. }
  12. function isArrayLike ( array ) {
  13. var length = array && array.length;
  14. return typeof length === 'number' && length >= 0;
  15. }
  16. function each ( array, callback ) {
  17. var i, k;
  18. if ( isArrayLike( array ) ) {
  19. // 使用 for 循环
  20. for ( i= 0; i < array.length; i++ ) {
  21. if( callback.call( array[ i ], i, array[ i ] ) === false ) break;
  22. }
  23. } else {
  24. // 使用 for-in 循环
  25. for ( k in array ) {
  26. if( callback.call( array[ i ], k , array[ k ] ) === false ) break;
  27. }
  28. }
  29. return array;
  30. }
  31. var table = cTag( 'table' );
  32. var tbody = cTag( 'tbody' );
  33. // 注意, jq 中的 each 方法中 回调函数的 参数是 k, v 的形式
  34. each( data, function ( k, v ) {
  35. // 根据 v 生成 tr
  36. var tr = cTag( 'tr' );
  37. // 遍历 v 生成 td
  38. each( v, function ( key, value ) {
  39. var td = cTag( 'td' );
  40. var txt = document.createTextNode( value + '' );
  41. td.appendChild( txt );
  42. tr.appendChild( td );
  43. });
  44. tbody.appendChild( tr );
  45. });
  46. table.appendChild( tbody );
  47. // 设置, 并将 table 加到 body
  48. table.border = '1';
  49. table.width = '80%';
  50. document.body.appendChild( table );
复制代码


回复

使用道具 举报