菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈紫怡-20221107-设计模式&BOM&DOM-01 [打印本页]

作者: Dasmondlicht 时间: 2022-11-7 23:17
标题: 陈紫怡-20221107-设计模式&BOM&DOM-01
一、今日学习内容：

设计模式

概念

程序员针对特定问题，给出简洁优化的处理方案

常用设计模式

单例模式

组合模式

观察者模式

代理模式

工厂模式

策略模式

工厂模式

简单的工厂模式

复杂的工厂模式

抽象工厂模式

抽象类

建造者模式

一个建造者，使用不同的工具堆砌出的一种模式

单例模式

特点：

一个类只有一个实例，并且提供可全局访问点，全局对象就是最简单的单例模式

原型模式

创建对象的模式

观察者模式

数据访问对象模式：抽象和封装对数据源的访问和存储

MVC模式

MVC是一种架构模式，它将应用抽象分为3部分：模型（数据）、视图、控制器（发布器）

一个事件发生的过程（通信单向流动）

用户在视图V（view）上与应用程序交互

控制器（control）出发事件，要求模型M改变状态（读写数据）

模型M将数据发送到视图V，更新数据，展现给用户

在js传统开发模式中，大多是基于事件驱动的

hash驱动

DOM驱动

模型事件

js中MVC的特点：单向流动，事件驱动

前端控制器模式、拦截过滤模式

前端控制器模式

是用来提供一个集中的请求处理机制，所有的请求都由一个单一的处理程序处理，该处理程序可以做认证、授权、记录日志或者跟踪请求，然后把请求传递给相应的处理程序

前端控制器

处理应用程序所有类型请求的单个处理程序，应用程序可以是基于web的应用程序，也可以是基于桌面的应用程序

调度器

前端控制器可能使用一个调度器对象来调度到请求相应的具体处理程序

视图：是为了请求而创建的对象

优点：统一管理，统一调度，将请求统一拦截和记录

缺点：转发器故障将引发整个系统瘫痪

拦截过滤器模式

概念

对应用程序的请求或相应做一些预处理/后处理，定义过滤器，并把请求传递给传递目标应用程序之前应用在请求上，

过滤器

认证/授权/记录日志/跟踪请求，然后请求传递给处理程序

传输对象模式

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元素

document.getElementById('id')----节点

getElementsByClassName('className');----集合

document.getElementsByTagName('h1');

document.getElementsByName('box1');

document.querySelector('选择器');

document.querySelectorAll('选择器');

控制标签内容

值----文本内容

1.文本内容

innerText

innerHTML

textContent

2.表单标签的值

value

控制style样式

dom.style.属性名='属性值'；

当属性名中有'-'，在js中需要使用小驼峰命名法

background-color====>backgroundColor

dom.style.border='1px solid #ccc';

添加到标签的style属性中

控制class

dom.className='class名'

事件四要素

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)