框架整体介绍
框架和库是什么
库: 仓库, 表示的是很多为了实现特殊功能而封装的, 便于使用开发的 函数, 对象 和 常量等.
例如:
// 在 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 高级中涉及的理论内容
-> 学习建议
-> 查漏补缺
入门一门语言有 4 条经验: 1> 语法关键字通关; 2> 字符串操作; 3> 集合操作( 数组, 键值对 ); 4> 学会文件操作.
url: http://www.123.com/index.php?a=b&c=d
解析: 协议, 路径, 域名, 参数, ...
-> 多思考, 多练习, 多转换思想
选择模块
-> 问题引入
传统编码的问题:
1> 获得元素方法名太长, 出现错误的几率变大.
2> 有重复代码的嫌疑, 获得元素重复, 循环遍历增加样式重复
问题可以再优化, 数组带有 forEach 方法
//选择函数的封装,返回的是一个数组
function select(selector) {
var arr = [];
arr.push.apply(arr, document.querySelectorAll(selector));
return arr;
}
<body>
<span>fdf </span>
<p>fdfd</p>
<span>3333</span>
<p>vvvvv</p>
<span>bbbbbbb</span>
</body>
<script>
//需求:为所有的span和div加上边框
select('span,p').forEach(function (item, i) {
console.log(item.nodeName);
item.style.border = item.nodeName == 'SPAN'?"1px solid red":"1px solid blue";
})
</script>
数组扩展的方法
-> map 与 forEach 方法
-> ES5 中给数组扩展了一些用于遍历数组元素的方法
map
forEach
some
every
map 映射
遍历数组返回一个新的数组
将一个( 一组 )数据按照一定的规则, 转为另一个( 一组 )数据, 这个就是映射
在 js 中就是由 一个数组 得到另一个数组
var arr = [ 1,2,3 ]; // => 规则 元素扩大一倍
语法:
数组.map(function ( v, i ) {
// 对每一个元素进行处理
// 返回一个数据
});
//需求:实现数组元素翻倍
var arr=[1,2,3];
var newArr=arr.map((v,i)=>{
return v*2;
//如果没有return ,则数组中的元素都会变成undefined
})
forEach
遍历数组,对每一个元素进行操作
就是在遍历一个数组. forEach 在内部会遍历数组中的每一个元素. 因此我们只需要提供如何操作
元素即可, 也就是说提供一个处理函数, forEach 在遍历每一个元素的时候就会调用该函数.
语法:
数组.forEach( function ( v, i ) {
// 写上如何处理第 i 个元素即可
});
生成列表案例:
//传统方法
//需求:将数组渲染生成列表
var list=['1.html','2.css','3.javascript','4.高级js'];
var box = document.getElementById('box1');
var ul = document.createElement('ul');
var arr=[];
list.forEach((v,i)=>{
arr.push('<li>'+v+'</li>');
})
ul.innerHTML = arr.join('');
box.appendChild(ul);
//新的方法
document.getElementById('box2').innerHTML =
'<ul>'
+list.map(v=>'<li>'+v+'</li>').join('')+
'</ul>';
some 与 every
这两个方法专门用来判断数组中的元素
some 表示只要存在即可, 相当于逻辑或运算
//判断数组中是否有负数
var arr = [1,3,5,3,0];
console.log(arr.some(v=>v>0));
every 表示每一个都要, 相当于逻辑与运算
//判断数组中的元素是否都大于0
var arr = [1,3,5,3,0];
console.log(arr.every(v=>v>0));
着两个方法是专门用来判断数组中元素的
语法:
数组.方法名(functiuon ( v, i ) {
// 需要返回一个 boolean 值, 用于表示对数组中该元素的判断
});
如果是 every 方法, 必须保证数组中每一个元素都返回 true, 那么 every 方法才会返回 true.
如果是 some 方法, 表示只要有一个为 true, 那么这个 some 方法的返回值就是 true.
-> each 与 map 方法
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
问题: 要求使用数组生成 table 表格
var datas = [
{ name: ‘jim1’, age: 19, gender: ‘男’ },
{ name: ‘jim2’, age: 39, gender: ‘男’ },
{ name: ‘jim3’, age: 29, gender: ‘女’ },
{ name: ‘jim4’, age: 18, gender: ‘女’ }
];
>
1> jq 中的 each 与 map
2> 封装自己的 each 与 map
-> 选择函数封装
1> 封装对象
2> 封装伪数组
-> jq 对象本质
框架核心结构
-> 核心结构
1> 带有 new 构造函数的形式
2> 隐藏 new 关键字
3> 完成框架结构
-> 核心方法
1> map 与 each
2> toArray
3> get
-> extend 方法DOM 操作
-> parseHTML 方法
-> 基本 DOM 方法
-> 成员访问方法事件模块与样式属性
-> 事件复习
-> on 方法 与 off 方法
-> 其他事件插件机制
-> 插件实现原理
-> 常见插件举例
-> 自定义插件