设计原则

面向对象程序设计

面向对象程序设计（OOP，Object-oriented programming）是种具有对象概念的编程典范，同时也是一种程序开发的抽象方针。

• 它可能包含数据、特性、代码与方法。
• 对象则指的是类（class）的实例。
• 它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。

面向对象程序设计的基本概念：

• 类与对象：
  • 类：定义事物的抽象特点。类的定义包含了数据的形式以及对数据的操作。
  • 对象：类的实例（Instance），可以调用类中的方法。
• 封装：通过限制只有特定类的对象可以访问该特定类的成员，通常利用接口实现消息的传入传出。通常来说，成员的访问权限被分为 3 种：公有成员（public）、私有成员（private）以及保护成员（protected）。
• 继承：根据已有类创建新类，子类继承父类。
  • 子类比父类要更加具体化。
  • 如果父类实现了某个接口，那么其所有子类都必须实现该接口。
• 多态：由继承而产生的相关的不同的类，其对象对同一消息会做出不同的响应。程序能够检测对象所属的实际类，并在当前上下文不知道其真实类型的情况下调用其实现的能力。

创建型设计模式

创建型模式提供创建对象的机制，增加已有代码的灵活性和可复用性。

工厂模式 （Factory Method）

在父类中提供一个创建对象的方法，允许子类决定实例化对象的类型。

适合应用场景：

• 如果无法预知对象确切类别及其依赖关系时。可以将创建产品的代码与实际使用产品的代码分离，从而能在不影响其他代码的情况下扩展产品创建部分代码。
• 希望用户能扩展软件库或框架的内部组件时。在使用子类替代标准组件时，可以将各框架中构造组件的代码集中到单个工厂方法中，并在继承该组件之外允许任何人对该方法进行重写。
• 希望复用现有对象来节省系统资源，而不是每次都重新创建对象。

结构型设计模式

结构型模式介绍如何将对象和类组装成较大的结构，并同时保持结构的灵活和高效。

适配器模式 （Adapter）

能使接口不兼容的对象能够相互合作。

适合应用场景：

• 希望使用某个类，但是其接口与其他代码不兼容时，可以使用适配器类。适配器模式允许创建一个中间层类，其可作为代码与遗留类、第三方类或提供怪异接口的类之间的转换器。
• 需要复用这样一些类，他们处于同一个继承体系，并且他们又有了额外的一些共同的方法，但是这些共同的方法不是所有在这一继承体系中的子类所具有的共性。可以将缺少功能的对象封装在适配器中，从而动态地获取所需功能。

行为型设计模式

行为模式负责对象间的高效沟通和职责委派。

职责链模式 （Chain of Responsibility）

允许将请求沿着处理者链进行发送。收到请求后，每个处理者均可对请求进行处理，或将其传递给链上的下个处理者。

适合应用场景：

• 当程序需要使用不同方式处理不同种类请求，而且请求类型和顺序预先未知时，可以使用责任链模式。该模式能将多个处理者连接成一条链。接收到请求后，它会“询问”每个处理者是否能够对其进行处理。这样所有处理者都有机会来处理请求。
• 当必须按顺序执行多个处理者时，可以使用责任链模式。无论以何种顺序将处理者连接成一条链，所有请求都会严格按照顺序通过链上的处理者。
• 如果所需处理者及其顺序必须在运行时进行改变，可以使用责任链模式。如果在处理者类中有对引用成员变量的设定方法，将能动态地插入和移除处理者，或者改变其顺序。

网络请求

XMLHttpRequest 对象

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。

XMLHttpRequest 实例属性

• XMLHttpRequest.readyState ： 返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

  值	状态	描述
  0	UNSENT	XMLHttpRequest 代理已创建，但尚未调用 open() 方法
  1	OPENED	open() 方法已经被调用，可以使用 XMLHttpRequest 实例的 setRequestHeader() 方法，设定 HTTP 请求的头信息
  2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得
  3	LOADING	响应体部分正在被接收。responseText 属性已经包含部分数据
  4	DONE	请求操作已经完成。服务器返回的数据已经完全或失败

• XMLHttpRequest.response ： 只读。返回响应的正文（即 HTTP 回应的 body 部分）。返回的类型为 ArrayBuffer、Blob、Document、JavaScript Object 或字符串中的一个，取决于请求的 responseType 属性。

  • 如果请求未成功或尚未发送，则返回 null。
  • 如果 responseType 属性为 "text" 或 "" （空字符串），在请求状态为 LOADING 时，response 属性包含到目前为止该请求已经取得的内容。

• XMLHttpRequest.responseType ： 枚举字符串。用于指定响应中包含的数据类型。

  • 该属性可写。在调用 open() 方法之后、调用 send() 方法之前，可设置该属性的值。
  • 如果 responseType 设为 "" （空字符串），等同于默认值 "text"。
  • responseType 属性枚举值
    • ""（空字符串） ： 等同于 "text" ，表示服务器返回文本数据。
    • "arraybuffer" ： ArrayBuffer 对象，表示服务器返回二进制数组。
    • "blob" ： Blob 对象，表示服务器返回二进制对象。
    • "document" ： Document 对象，表示服务器返回一个文档对象。
    • "json" ： JSON 对象。
    • "text" ： 字符串。

• XMLHttpRequest.responseText ： 只读。返回从服务器接收到的字符串。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。

• XMLHttpRequest.responseXML ： 字符串。表示发送数据的服务器的网址。

  • 如果 URL 为空，则返回空字符串。
  • 如果 URL 有锚点，则位于 URL # 后面的内容会被删除。
  • 如果 URL 有重定向，responseURL 的值会是经过多次重定向后的最终 URL。

• XMLHttpRequest.responseURL ： 只读。返回从服务器接收到 HTML 或 XML 的 Document 对象。

  • 如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。
  • 该属性生效的前提是 HTTP 回应的 Content-Type 头信息等于 text/xml 或 application/xml 。要求在发送请求前，XMLHttpRequest.responseType 属性要设为 document。
  • 如果 HTTP 回应的 Content-Type 头信息不等于 text/xml 和 application/xml ，从 responseXML 获取数据（即把数据按照 DOM 格式解析），需要手动调用 XMLHttpRequest.overrideMimeType() 方法，强制进行 XML 解析。

• XMLHttpRequest.status ： 只读。返回 XMLHttpRequest 响应中的 HTTP 状态码。

  • 请求成功状态码为 200 ，如果服务器没有返回状态码，该属性默认是 200 。请求发出之前，该属性为 0 。
  • HTTP 响应状态码分类
    • 信息响应 (100 – 199)
    • 成功响应 (200 – 299)
    • 重定向消息 (300 – 399)
    • 客户端错误响应 (400 – 499)
    • 服务端错误响应 (500 – 599)

• XMLHttpRequest.statusText ： 服务器返回的一个 DOMString 类型的文本信息（包含了响应的 HTTP 状态码）。

• XMLHttpRequest.timeout ： 表示请求的超时时间（毫秒），超过该时长，请求会自动终止。默认值为 0 ，表示没有超时限制。

• XMLHttpRequest.upload ： 返回一个 XMLHttpRequestUpload 对象，用来表示文件上传的进度。可以通过对其绑定事件来监听上传进度。

  事件	描述
  onloadstart	获取开始
  onprogress	数据传输进行中
  onabort	获取操作终止
  onerror	获取失败
  onload	获取成功
  ontimeout	获取操作在用户规定的时间内未完成
  onloadend	获取完成（不论成功与否）

• XMLHttpRequest.withCredentials ： 布尔值，表示跨域请求时，用户信息（比如 Cookie 和认证的 HTTP 头信息）是否会包含在请求之中，默认为 false 。

  • 同源请求设置 withCredentials 无效。
  • 为了让这个属性生效，服务器必须显式返回 Access-Control-Allow-Credentials 头信息。

JSON

概述

JSON （JavaScript Object Notation） 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。

JSON 语法支持 3 种类型的值：

• 简单值：字符串、数值、布尔值和 null ，但是 undefined 不可以。
  • 数值：禁止出现前导零（JSON.stringify 方法自动忽略前导零，而在 JSON.parse 方法中将会抛出 SyntaxError）；如果存在小数点，则后面至少跟一位数字。
  • 字符串：必须使用双引号。禁止某些控制字符；Unicode 行分隔符（U+2028）和段分隔符（U+2029）被允许。
• 对象：表示有序的键/值对。值可以是简单值，也可以是复杂类型。
• 数组：表示可以通过数值索引访问值的有序列表。数组的值可以是任意类型。

Web Components

Web Components 由自定义元素（Custom element）、影子 DOM （Shadow DOM）、HTML 模板（HTML template）三个技术组成，它们可以一起使用来创建独立的可重用组件。

• 自定义元素（Custom element）：一组 JavaScript API，允许自定义元素以及其行为，可在用户界面中按需使用。
• 影子 DOM （Shadow DOM）：一组 JavaScript API，用于将封装的 “影子” DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。可以保持元素功能私有，可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML 模板（HTML template）：<template> 和 <slot> 元素可以编写不在呈现页面中显示的标记模板，可以作为自定义元素结构的基础被多次重用。

JavaScript API

postMessage 多窗口通信

window.postMessage

语法 ： otherWindow.postMessage(message, targetOrigin, [transfer])

描述 ： 用于安全地实现跨源通信。例如：在 a.com 页面中，向其 iframe 子窗口 b.com 页面发送消息。

参数 ：

navigator 对象，screen 对象

navigator 对象

Navigator 接口表示用户代理的状态和标识，包含浏览器和系统信息。它允许脚本查询它和注册自己进行一些活动。

navigator 属性

• navigator.permissions ： 只读属性。返回一个权限对象，可用于查询和更新权限 API 所涵盖 API 的权限状态。
• navigator.userAgent ： 返回浏览器的 User Agent 字符串，表示用户设备信息，包含了浏览器的厂商、版本、操作系统等信息。
• navigator.cookieEnabled ： 只读属性。返回一个布尔值，来表示当前页面是否启用了 cookie 。
• navigator.onLine ： 返回浏览器的联机状态的布尔值，true 表示在线，false 表示离线。只要浏览器连接网络的能力发生变化，该属性就会发送更新。
• navigator.language ： 只读属性。返回一个表示用户偏好语言（通常是浏览器界面语言）的字符串。
• navigator.languages ： 只读属性。返回代表用户首选语言的字符串数组。
• navigator.geolocation ： 只读属性。返回一个 Geolocation 对象，通过这个对象可以访问到设备的位置信息。
  • navigator.geolocation.getCurrentPosition(success, error, options) ： 确定设备的位置并返回一个携带位置信息的 Position 对象。
  • navigator.geolocation.watchPosition(success, error, options) ： 注册监听器，在设备的地理位置发生改变的时候自动被调用。每当设备位置改变时，返回一个 long 类型的该监听器的 ID 值。
  • navigator.geolocation.clearWatch(id) ： 注销使用 geolocation.watchPosition() 注册的位置监听器或错误监听器。
• navigator.clipboard ： 返回一个可以读写剪切板内容的 Clipboard 对象。
  • navigator.clipboard.read() ： 从剪贴板读取数据（比如图片），返回一个 Promise 对象。在检索到数据后，Promise 将兑现一个 ClipboardItem 对象的数组来提供剪切板数据。
  • navigator.clipboard.readText() ： 从操作系统读取文本，返回一个 Promise 对象。在从剪切板中检索到文本后，Promise 将兑现一个包含剪切板文本数据的 DOMString。
  • navigator.clipboard.write() ： 写入任意数据至操作系统剪贴板。异步操作，在操作完成后，返回的 Promise 的将被兑现。
  • navigator.clipboard.writeText() ： 写入文本至操作系统剪贴板，返回一个 Promise 对象。在文本被完全写入剪切板后，返回的 Promise 将被兑现。
• .....

window 对象

window 对象属性

window.name

window.name ： 获取/设置窗口的名称（只能保存字符串，如写入不是字符串，会自动转成字符串）。主要用于为超链接和表单设置目标（targets），窗口不需要有名称。

只要浏览器窗口不关闭，这个属性是不会消失的。访问 a.com 时，该页面的脚本设置了 window.name ，在同一个窗口里面载入 b.com，新页面的脚本可以读到上一个网页设置的 window.name。页面刷新也是这种情况。一旦浏览器窗口关闭后，该属性保存的值就会消失，因为这时窗口已经不存在了。