一、今日学习内容
设计模式介绍
什么是设计模式
程序员针对特定问题，给出简介而优化的处理方案
常用的设计模式
单例模式：只允许存在一个实例的模式
组合模式：把若干个启动方案一样的构造函数放在一起，准备个总开关，总开一开启，那么这些函数就都启动了
观察者模式：又被称作发布者订阅者模式
代理模式：Proxy，为其他对象提供一种代理以控制对这个对象的访问，为了不暴露执行对象的部分代码
工厂模式：工厂模式就是做一个对象的创建的封装并创建的对象return出去
策略模式：定义一系列的算法吗，把他们一个个封装起来，并其实他们可以相互替换，从而避免很多if语句
工厂模式
简单的工厂模式：可以理解为解决多个相似问题：提示框
复杂的工厂模式：将他里面的成员对象实例化推迟到子类中，自雷可以重定义父类接口方法，以便创建的时候指定自己的对象类型：各种UI组件，根据你想要的类型不同，比如：按钮、提示框、表格等
抽象工厂模式：其实是实现子类继承父类的方法，只是一个方法。抽象工厂模式一般用在多人的超大项目中，并且严格要求项目以面向对象的思想进行完成
抽象类：是一种声明，但是不能使用的类，当使用时就会报错
建造者模式
一个建造者使用不同的工具堆砌出的一种模式
单例模式
两个特点：一个类只有一个实例的，并且提供可全局访问点，全局对象就是最简单的单例模式
原型模式
创建对象的模式：通过一个对象作为原型来创建新的对象
观察者模式、数据访问对象模式、MVC模式
观察者模式：订阅发布者模式：事件监听，一个元素同时监听多个类型事件，元素对象为发布者，每一个事件处理函数（执行的操作）为订阅这模式
数据访问对象模式：抽象和封装对数据源的访问和存储
MVC模式：
MVC是一种架构模式，它将应用抽象分为三个部分：模型（数据）、视图、控制器（发布器）
一个事件发生的过程（通信单行流动）
1.用户在视图v（view）上与应用程序交互
2.控制器C（control）将数据发送到V，更新数据，展现给用户
3.模型m将数据发送给视图v,更新数据，展现给用户
在JS传统开发模式中，大多是基于事件驱动的
1.hash驱动
2.dom事件
3.模型事件
JS中MVC的特点：单行流动，事件驱动
前端控制器模式、拦截过滤模式
前端控制器模式：是用来提供一个集中地请求处理机制，所有的请求都将由一个单一的处理程序处理，该处理程序可以做认证、授权、记录日志、或者跟踪请求，然后将请求传递给相应的处理程序
前端控制器：处理应用程序所有类型请求的单个处理程序，应用程序可以使基于web的应用程序，也可以是基于桌面的应用程序
调度器：前端控制器可能是使用一个调度器对象来调度到请求的具体处理程序
视图：试图使为了请求而创建的对象
优点：统一管理，同一代调度，将请求统一拦截和记录
缺点：转发器故障引起整个系统瘫痪
前端模拟器模式可以做什么
将用户的请求进行统一管理，然后进行转发，通过转发获取指定的资源，并且可以通过这个控制器来进行日志的记录，权限的鉴定，使系统有一个统一的入口
拦截过滤器模式：对应程序的请求或相应做一些预处理/后处理，定义过滤器，并再把请求传递给传递目标应用程序之前应用在请求上，过滤器：认证/授权/记录日志/跟踪请求，然后请求传递给处理程序
传输对象模式
客户端向服务器一次性传递带有多个属性的数据，传输对像也被称为数值对象
传输对象是一个具有getter/setter方法的简单的类。是可序列化的，所用他通过网络传输
DOM和BOM概述、API和WebAPI的概念
BOM：浏览器对象模型，是JavaScript有能力一浏览器进行对话
BOM提供了访问浏览器各功能部件得路径，浏览器窗口本身，浏览器历史
DOM：文档对象模型，是程序和脚本能动态的访问和更新文档的内容、结构、样式、并独立于平台和语言的接口
w3c DOM提供了一套HTML和XML稳当的标准对象，以及访问这些稳当的标准接口（方法）。
DOM和BOM是独立于程序语言和平台的标准，都是由一组对象组成，对象定义了属性和方法
API：就是给程序提供了一种工具，以便可以更加轻松实现某种更能
WebAPI：是浏览器提供的一套浏览器功能和页面元素API，一般都是方法和函数
DOM
节点：由结构图DOM树，整个文档就是一个文档节点，document
每一个html标签都输一个元素节点，element
标签中文字是文本节点（空格，回车也是节点），text
标签的属性是属性节点，attribute
一切都是节点，node
获取标签对象的主要方式
获取html元素
H4:
document.getElementsByTagName('TagName');---节点集合
document.getElementById('id');---节点
document.getElementsByClassName('ClassName');---节点的集合
document.getElementsByName('name');-----NodeList---数组
H5
document.querySelector('选择器');----符合要求的第一个元素
document.querySelectorAll('选择器');---符合要求的所有元素---NodeList---z数组
操作文本内容
值---文本内容
1、文本内容
innerText、innerHTML、textcontent
2、表单标签的值
value
文本内容的操作
innerText、textContent不能解析标签，只能添加文本内容
InnerHTML 可以解析标签，也可以添加文本内容
事件三要素
事件源：谁来触发---标签
事件类型：什么事件？鼠标事件，键盘事件
事件处理函数：触发事件后要进行的行为
事件对象：事件发生时的相关信息都保存到事件对象中
添加事件
dom.addEventListener('事件名称',事件处理函数)
dom.addEventListener('click', function (event) {
// console.log(event);
// 事件源
console.log(event.target);
// 事件类型
console.log(event.type);
// 点击的坐标值
console.log(event.clientX);
console.log(event.clientY);
})
|
