关键词：
框架整体介绍-> 框架和库是什么
库: 仓库, 表示的是很多为了实现特殊功能而封装的, 便于使用开发的 函数, 对象 和 常量等.
例如:
// 在 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 );hibernate学习笔记(代码片段)
Hibernate是一个开放源代码的对象关系映射框架，它对JDBC进行了非常轻量级的对象封装，它将POJO与数据库表建立映射关系，是一个全自动的orm框架hibernate（持久化）一.Hibernate的理解Hibernate是数据访问层（Dao层），就是把数据存入... 查看详情
懒人笔记web前端开发库(代码片段)
项目需要一个页面展示，于是我冒充了2个月的Web前端，这里记录下用到的相关工具和库。Web框架用的是Django，不得不说，对于我这样的前端小白来说，上手容易很多。也让我进一步了解到Python的强大。工具用... 查看详情
web前端开发笔记——第二章html语言第九节框架标签和脚本标签(代码片段)
目录一、框架标签（一）显示目标页面（二）规定大小的框架（三）规定边框的框架二、脚本标签结语一、框架标签（一）显示目标页面<iframe></iframe>标签表示框架标签，使用该标签可... 查看详情
python100天学习笔记day28前端框架(代码片段)
前端框架渐进式框架-Vue.js前后端分离开发（前端渲染）必选框架。快速上手引入Vue的JavaScript文件，我们仍然推荐从CDN服务器加载它。<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>数据绑定（声明式... 查看详情
backbone前端框架解读(代码片段)
在前端的发展道路中，前端框架元老之一jQuery对繁琐的DOM操作进行了封装，提供了链式调用、各类选择器，屏蔽了不同浏览器写法的差异性，但是前端开发过程中依然存在作用域污染、代码复用度低、冗余度高、数据和事件绑定... 查看详情
mybatis框架学习笔记(代码片段)
...然,之前的数据基本都在控制台显示,那么我想让它显示到前端的页面,怎么去完成呢;文章目录1.首先解决一个问题;之前忘记创建web项目;怎么把普通的文件夹标记为能被识别的web文件夹2.员工查询展示,以及在搜索框输入Id后根据Id查... 查看详情
前端笔记?bootstrap
Bootstrap框架： 里面封装了很多组件、字体图标、和标签常用的一些样式。我们直接使用即可。下载地址:http://www.bootcss.com/包下载地址（用于生产环境的Bootstrap）：https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.z... 查看详情
springboot+mybatisplus+vue前后端分离项目快速搭建前端篇快速生成后端代码封装结果集增删改查模糊查找毕设基础框架(代码片段)
前后端分离项目快速搭建【前端篇】后端篇前端篇创建vue项目安装所需工具开始编码1、在根目录下添加vue.config.js文件2、编写main.js3、编写App.vue4、编写axiosutils.js5、在components目录下编写menu.vue7、在router目录下编写router.js8、在src... 查看详情
前端开发vue教程笔记(代码片段)
...心定下来，一直走下去，加油。这几年Vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用Vue.js开发。是开源世界华人的骄傲，其作者是我国尤雨溪，为 查看详情
springmvc学习笔记(代码片段)
...：Struts、SpringMVC、ASP.NETMVC、ZendFramework、JSF；常见前端MVC框架：Vue、a 查看详情
python学习笔记：5.3.4bootstrap框架(代码片段)
本文是学习陆老师的《python全栈工程师-web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！一、课程目标bootstrap框架简介响应式设计bootstrap响应式布局bootstrap组件二、详情解读2.1.bootstrap简介网页... 查看详情
前端笔记11：使用webcomponents进行原生组件化开发(代码片段)
...合成独立组件文件示例演示与说明示例一示例二总结目的前端开发中组件化开发是一种趋势，方便界面中各种自定义组件的管理与复用。现在流行的React和Vue等框架都是组件化开发的。目前前端原生也支持一定程度上的组件... 查看详情
struts2学习笔记(代码片段)
Struts2是一个基于MVC设计模式的Web应用框架，它本质上相当于一个servlet，在MVC设计模式中，Struts2作为控制器(Controller)来建立模型与视图的数据交互。Struts2一.Struts2简介Struts2是一个MVC开发模式的框架，用来处理用户请求，代替Servl... 查看详情
前端笔记五初识vue(代码片段)
一、简介vue是一套用于构建用户界面的渐进式框架：构建用户界面：顾名思义，就是可以用来写界面的框架渐进式：既可以改造一个页面的一个小部分，也可以从零开始做个复杂的网站vue框架的核心思想是数... 查看详情
jq框架封装学习笔记1-框架介绍与选择器框架
jq框架学习框架的选择器模块框架的结构DOM基本操作（元素的操作）事件处理属性操作样式操作简单动画简要分析jq框架jq是模块化的，是一个以代码集合和功能为中心的模块Sizzle选择器引擎，非常常用的选择器引擎jq的整体结构... 查看详情
esp32学习笔记--使用gitee搭建esp-mdf开发框架(代码片段)
...c;上一篇文章的具体内容，请查看以下链接。ESP32学习笔记--（1）使用gitee搭建ESP-IDF开发框架除了ESP-IDF开发框架，乐鑫还提供了针对WIFI组建MESH网络的开发框架，ESP-MDF。这个框架是基于ESP-IDF封装的ESP-WIFI- 查看详情
esp32学习笔记--使用gitee搭建esp-mdf开发框架(代码片段)
...c;上一篇文章的具体内容，请查看以下链接。ESP32学习笔记--（1）使用gitee搭建ESP-IDF开发框架除了ESP-IDF开发框架，乐鑫还提供了针对WIFI组建MESH网络的开发框架，ESP-MDF。这个框架是基于ESP-IDF封装的ESP-WIFI- 查看详情
前端学习笔记javascript常用方法兼容性封装
获取样式函数封装functiongetStyle(ele,attr){ if(ele.currentStyle){ returnele.currentStyle[attr]; } else{ returnwindow.getComputedStyle(ele,null)[attr]; }};getClass()封装functiongetClass(element,names){ //如果存在g 查看详情