设计模式&DOM&BOM-DAY01
1.设计模式介绍---理解
1.1 什么是设计模式
程序员针对特定问题，给出简介而优化的处理方案
1.2 常用的设计模式
单例模式：只允许存在一个实例的模式
组合模式：把若干个启动方案一样的构造函数放在一起，准备一个总开关，总开一开启，那么这些构造函数就都启动了
观察者模式：又被称作发布订阅者模式
代理模式：Proxy，为其他对象提供一种代理以控制对这个对象的访问，为了不暴露执行对象的部分代码
工厂模式：工厂函数就是做一个对象的创建的封装并将创建的对象return出去
策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以恍惚替换，从而避免很多if语句
1.3 工厂模式
简单的工厂模式：可以理解为解决多个相似问题：提示框
复杂的工厂模式：将其成员对象的实例化推迟到子类中，子类可以重新父类接口方法，以便创建的时候指定自己的对象类型：各种UI组件，根据你想要的类型不同，比如：按钮，提示框，表格等
抽象工厂模式：其实是实现字了继承父类的方法，只是一个方法。抽象工厂模式一般用在多人协作的超大型项目中，并且严格的要求项目以面向对象的思想进行完成
抽象类：是一种声明，但是不能使用的类，当使用时就会报错
1.4 建造者模式
一个建造者，使用不同的工具堆砌出的一种模式
1.4 单例模式
两个特点：一个类只有一个实例，并且提供可全局访问点，全局对象就是最简单的单例模式
1.5 原型模式
创建对象的模式：通过一个对象作为原型来创建新的对象
1.6 观察者模式、数据访问对象模式、MVC模式
观察者模式：订阅发布者模式：事件监听，一个元素同时监听多个类型事件，元素对象为发布者，每一个事件处理函数（执行的操作）为订阅者
数据访问对象模式：抽象和封装对数据源的访问和存储
MVC模式：
MVC是一种架构模式，它将应用抽象分为三个部分：模型（数据）、视图、控制器（发布器）
一个事件发生的过程（通信单向流动）
1.用户在视图V（view)上与应用程序交互
2.控制器C(controller)触发事件，要求模型M改变状态（读写数据）
3.模型M将数据发发送到视图V，更新数据，展现给用户
在js传统开发模式中，大多是基于事件驱动的
1.hash驱动
2.DOM事件，
3.模型事件
js中MVC的特点：单向流动，事件驱动
1.7 前端控制器模式、拦截过滤模式
前端控制器模式：是用来提供一个集中的请求处理机制，所有的请求都将由一个单一的处理程序处理，该处理程序可以做认证、授权、记录日志、或者跟踪请求，然后把请求传递给相应的处理程序
前端控制器：处理应用程序所有类型请求的单个处理程序，应用程序可以是基于web的应用程序，也可以是基于桌面的应用程序
调度器：前端控制器可能使用一个调度器对象来调度到请求相应的具体处理程序
视图：视图是为请求而创建的对象
优点：统一管理，统一调度，将请求统一拦截和记录
缺点：转发器故障将引发整个系统瘫痪
前端控制器模式可以做什么？
将用户的请求统一管理，然后进行转发，通过转发获取指定的资源，并且可以通过这个控制器来进行日志的记录，权限的鉴定，使系统有一个统一的入口
拦截过滤器模式：对应用程序的请求或相应做一些预处理/后处理。定义过滤器，并在把请求传递给川籍目标应用程序之前应用在请求上。过滤器：认证/授权/记录日志/跟踪请求，然后请求传递给处理程序
1.8 传输对象模式
客户端向服务器一次性传递带有多个属性的数据，传输对象也被称作为数值对象
传输对象是一个具有getter/setter方法的简单的类，是可序列化的，所用它通过网络传输
2. DOM和BOM概述、API和WebAPI的概念
什么是BOM：浏览器对象模型，是JavaScript有能力与浏览器对话
BOM提供了访问浏览器各种功能部件的途径，浏览器窗口本身、浏览器历史
什么是DOM：文档对象模型，使程序和脚本能够动态的访问和更新文档的内容、结构、样式，并独立于平台和语言的接口
W3C DOM提供了一套HTML和XML文档的标准对象，以及访问这些文档的标准接口（方法）。
DOM和BOM是独立于程序语言和平台的标准，都是由一组对象组成，对象中定义了属性和方法
API:就是给程序员提供的一种工具，一边可以更加轻松实现某种功能
webAPI：是浏览器提供的一套浏览器功能和页面元素的API，一般都是方法和函数
2.1 DOM
节点：
由结构图，DOM树。整个文档就是一个文档节点，document
每一个html标签都是一个元素节点，element
标签中的文字是文本节点(空格，回车也是文本节点),text
标签的属性是属性节点，Attribute
一切都是节点,node
2.2 获取标签对象的主要方式
获取html元素
h4--理解
document.getElementById('id');---节点
document.getElementsByClassName('className');----节点的集合
document.getElementsByTagName('tagName');----节点的结合
document.getElementsByName('name');----NodeList---数组
h5---掌握
document.querySelector('选择器');--符合要求的第一个元素
document.querySelectorAll('选择器');---复合要求的所有的元素---NodeList--数组
2.3 控制标签内容
值---文本内容----掌握
1.文本内容
innerText
innerHTML
textContent
2.表单标签的值
value
2.4 控制style样式
dom.style.属性名='属性值';
当属性名中有'-'，在js中需要使用小驼峰命名法
background-color====>backgroundColor
dom.style.border='1px solid #ccc';
添加到标签的style属性中
2.5 控制class
dom.className='class名'
3.事件
3.1 事件四要素
事件源：谁来触发--标签
事件类型：什么事件？鼠标事件，键盘事件
事件处理函数：触发事件之后要进行的行为
事件对象：事件发生时的相关信息都保存到事件对象中
添加事件
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);
})
|
