DTCloud

Promise是一个表示异步操作最终完成或失败的对象。它可以处于三种状态：待定（pending）、已完成（fulfilled）和已拒绝（rejected）。待定表示操作正在进行中，已完成表示操作成功完成，已拒绝表示操作失败。在异步操作完成时，可以调用resolve()方法将Promise状态转换为已完成（fulfilled），或者调用reject()方法将Promise状态转换为已拒绝（rejected）。为了更好地理解Promise的实现方式，我们可以简单地自己实现一个基本的Promise。

使用类的概念可以提高代码的可维护性和可扩展性。通过将相关的数据和方法封装在一个类中，可以提高代码的组织性和可读性。类的继承和多态让我们能够构建更具灵活性的代码结构，使得代码更容易扩展和重用。此外，TypeScript 还提供了接口（interface）的概念，可以进一步定义类的结构和行为。多态是面向对象编程的一个重要概念，它允许不同的对象对同一个方法做出不同的响应。子类可以继承父类的属性和方法，并且可以覆盖父类的方法或添加新的方法。中，我们可以使用类的继承和方法的重写来实现多态。类，并添加了一个新的成员。

TypeScript 是一种由 Microsoft 开发的强类型的 JavaScript 超集语言，它为 JavaScript 添加了类型检查和更强大的开发工具支持。在使用 TypeScript 进行项目开发时，掌握一些技巧可以大大提高开发效率和代码质量。本文将介绍一些实用的 TypeScript 技巧，帮助开发者更好地利用 TypeScript 的特性。

这篇文章主要是为了记录，本人在使用中遇到的一些问题，供参考网上的个人文章和官网的都差不多，都没有我遇到的问题，这篇文章只着重把我遇到的问题地方贴出来。

在JavaScript中，数组是一种非常重要的数据类型。数组提供了一系列常用的方法，可以方便地对数组进行操作和处理。本文将介绍JavaScript中几种常用的数组方法的含义、返回值以及是否改变原数组。

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，它可以在网页上展示高质量的图像，并且可以无损缩放。在前端开发中，SVG 图片被广泛用于创建图标、图形和动画效果。此篇文章将讲述在前端vue项目中封装svg组件，使其svg简单使用。

​ 所谓归一化坐标，可以理解为在屏幕中的某个矩形中建立一个平面直角坐标系（可以称为归一化坐标系），右为此坐标系x轴正方向，上为此坐标系y轴正方向，且x轴取值范围为[-1,1]，y轴取值范围为[-1,1]，那么。内归一化坐标系y轴的轴方向相反（无需考虑x轴就是因为屏幕坐标轴的x轴与归一化坐标轴的x轴方向相同），而此前所有计算中y值均为屏幕坐标轴的y值，是故将点从屏幕坐标轴转到归一化坐标轴时，应当对y值进行取反，即。​ 归一化坐标，是一个二维坐标，仅有X/Y两个维度，且X和Y的取值范围均为。

之前用的方法是通过听到scroll事件或者使用setInterval来判断，这种方法的缺点是，由于scroll事件触发频率高，计算量很大，如果不做防抖节流的话，很容易造成性能问题，而setInterval由于其有间歇期，也会出现体验问题。举例来说，如果同时有两个被观察的对象的可见性发生变化，那么changes数组里面就会打印出两个元素，如果只观察一个元素，我们打印changes[0]就能获取到被观察对象。还有callback 参数，目标元素的可见性变化时，就会调用观察器的回调函数callback。

模块化编程是一种将程序拆分为独立模块的开发方法，每个模块具有明确定义的功能和接口。JavaScript中的模块化编程能够提高代码的可维护性、可重用性和可测试性。本文将详细介绍JavaScript中的模块化概念、几种常见的模块化方案，并提供更多的代码示例。

上面代码中，JavaScript 将“𠮷a”视为三个字符，codePointAt 方法在第一个字符上，正确地识别了“𠮷”，返回了它的十进制码点 134071（即十六进制的20BB7）。在第二个字符（即“𠮷”的后两个字节）和第三个字符“a”上，codePointAt()方法的结果与charCodeAt()方法相同。对于这种4个字节的字符，JavaScript 不能正确处理，字符串长度会误判为2，而且charAt()方法无法读取整个字符，charCodeAt()方法只能分别返回前两个字节和后两个字节的值。

其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

三个状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）；状态变化：pending —> fulfilled 或 pending --> rejected （变化不可逆）；

类型推断：TypeScript 支持类型推断，可以根据变量的值推断出变量的类型，提高代码的可读性和可维护性。类型别名和泛型结合使用：使用类型别名和泛型结合使用可以定义更加复杂的数据类型，提高代码的可读性和可维护性。类型断言：使用类型断言可以在开发者确定一个变量的类型时，告诉编译器其类型，提高代码的可读性和可维护性。类型交叉和类型联合：使用类型交叉和类型联合可以定义更加复杂的数据类型，提高代码的可读性和可维护性。类型别名和接口：使用类型别名或接口可以定义复杂的数据类型，提高代码的可读性和可维护性。

TSConfig 是 TypeScript 编译器的配置文件，用于指定 TypeScript 编译器的行为。TSConfig 以 JSON 格式存储，并且支持许多配置选项，包括编译器选项、文件列表和 TSConfig 继承等。

当传入一个 key 时，removeItem() 方法会从 localStorage 中删除指定的数据。key() 方法一般用于遍历 localStorage 中所有的数据时，传入一个以 0 开始计数的数字，它会返回对应的 key 的名字。调用此方法后，会清空当前域名下所有存储在 localStorage 中的数据。调用时不需要传入任何参数。getItem() 方法可以用来访问已存储在浏览器 localStorage 中的数据。从它的名字可以得知，此方法可以用来存储数据到 localStorage 中。

平常在写代码的时候，我们经常会用到数组这个类型，那么数组到底有多少方法，方法各自的作用又是什么呢？

普通的函数声明声明一个函数表达式async形式的箭头函数。

Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”;Proxy 对象的所有用法，都是上面这种形式，不同的只是handle参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

MQTT 是一种轻量级的消息传递协议，广泛应用于物联网和分布式系统中。在前端应用中使用 MQTT 可以实现实时消息传递和数据同步。本文将介绍如何使用 MQTT 在前端应用中实现消息传递。在上面的例子中，客户端 A 和 B 订阅了主题 ‘data’，并在收到更新时更新本地数据。客户端 C 发布了一个更新到主题’data’，导致所有订阅该主题的客户端都会收到更新。其中 ‘my-topic’ 是主题，‘Hello, MQTT!

JS 引擎是单线程的，直白来说就是一个时间点下 JS 引擎只能去做一件事情,JS 做的任务分为同步和异步两种，所谓 “异步”，简单说就是一个任务不是连续完成的，先执行第一段，等做好了准备，再回过头执行第二段，第二段也被叫做回调；事件循环由宏任务和在执行宏任务期间产生的所有微任务组成。完成当下的宏任务后，会立刻执行所有在此期间入队的微任务。宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）执行过程中如果遇到微任务，就将它添加到微任务的任务队列中。执行一个宏任务（栈中没有就从事件队列中获取）

表格被用作网页的主要构建块，但是作为页面布局元素，使用表格现在被认为是糟糕的做法，有时候，您必须使用表格（并且它们被认为是显示表格数据的出色实践），如果是这样，明确地指定表格单元格、行和列的宽度和高度，否则，浏览器必须执行许多操作来计算如何显示它们，这会降低页面加载速度。网页的加载速度是评估网站质量一个重要指标，原因在于大多数用户能够容忍的网页加载时间只有几秒，如果超出了访客的忍受范围他们会毫不留情地关掉你的网页，所以网页载入速度会极大地影响网站的流量和访问。因此,到其他资产的连接被延迟了。

【代码】[深入vue3之refs] ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef等使用与讲解。

在运行时，Web客户端是一个单页应用程序。相反，它仅请求所需的内容，然后替换/更新视图。在这里，我们在web / static / src / js插件中对Web客户端代码进行了非常快速的概述。这意味着当用户使用Odoo时，Web客户端类（和动作管理器）实际上会创建并销毁许多widget。这是私人Web应用程序，可以在其中查看和编辑商务数据。这是一个单页应用程序（该页面不会重新加载，仅在需要时才从服务器获取新数据）。它的职责是协调所有子组件，并提供服务，例如rpcs，本地存储等等。

在选点过程中(鼠标移动过程中)，若鼠标在模型之上，鼠标位置处会显示一个圆点，表示此处可点选，在选完一个点后，鼠标移动过程中鼠标位置和选点之间会有连线，且线段的距离会动态变化。从起始点开始，首先，绘制 y 轴的线段，那么就使用起始点 start 和新的点py : Vector3(start.x, p.y, start.z) 绘制线段，再使用 py 和新的中间点 pz: Vector3(start.x, p.y, p.z) 来绘制 z 轴线段，最后使用 pz 和终点 p 来绘制 x 轴线段。

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。可以快速的在web页面中绘制出二维码。通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库引入文件 (具体文件附在文章尾部)htmljs。

在进入H5公众号后，利用js 进行刷新一次，然后打个标记。

参考资料1、2、3、4、提供了插件功能，一切功能都可以以插件来实现，方便使用和弃用。

抽象语法树（Abstract Syntax Tree, AST），是源代码语法结构的一种抽象表示，它以树状的形式表示编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。高级语言的编译、机器码的生成一些高级编辑器的错误提示、代码高亮、代码自动补全；前端工具，例如eslint、pretiier，对代码错误或风格的检查，babel、typescript对代码的编译处理等。

context：配置基础目录；Entry：配置模块的入口；Output：配置如何输出最终需要的代码；Module：配置处理模块的规则；Resolve：配置寻找模块的规则；Plugins：配置扩展插件；DevServer：配置DevServer开发服务器；target：配置构建目标；Optimization：配置优化内容，拆包等；devtools：配置sourcemap；watch和watchOptions：配置监听文件；

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。通过原型对象添加属性和方法：原型继承的方法并不是自身的，我们要在原型链上一层一层的查找，这样创建的好处是只在内存中创建一次，实例化的对象都会指向这个 prototype 对象。在原型链上添加对象和方法，创建的对象，原型链上继承的方法和属性不是自身的，通过原型链查找都会指向原型对象，节省内存。调用了两次构造函数，做了重复的操作，一次是在创建子类原型时调用，另一次在子类构造函数中调用。

合并对象，接收一个目标对象和一个或多个源对象作为参数，将每个源对象中可枚举(Object.propertyIsEnumerable()返回true)和自有属性(Object.hasOwnProperty()返回true)复制到目标对象。Object.defineProperty(obj, propertyName, descriptor) // 用于对象的单个属性定义，参数：对象，属性名称，描述符对象。按照一个可指定的深度递归遍历数组，将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

BOM：Browser Object Model（浏览器对象模型），浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构，就是浏览器提供的API。

1、对于直接调用的函数来说，不管函数被放在了什么地方，this都是window2、对于被别人调用的函数来说，被谁点出来的，this就是谁3、call、apply时，this时第一个参数。bind要优于call/apply哦，call参数多，apply参数少4、在构造函数中，类中(函数体中)出现的this.xxx=xxx中的this是当前类的一个实例。

this . status = PENDING this . value = null this . reason = null this . onResolveCallbacks = [ ] // pending时回调函数存储 this . onRejectedCallbacks = [ ] } }

如果写成正常函数的形式，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组，对应模板字符串解析后的值。上面代码中，String.fromCharCode()不能识别大于0xFFFF的码点，所以0x20BB7就发生了溢出，最高位2被舍弃了，最后返回码点U+0BB7对应的字符，而不是码点U+20BB7对应的字符。上面代码中，String.raw()方法的第一个参数是一个对象，它的raw属性等同于原始的模板字符串解析后得到的数组。作为函数，String.raw()的代码实现基本如下。

this指向全局对象window，注意严格模式下，this为undefined。

/ 行为型// 不同的对象之间划分责任和算法的抽象化// 命令模式// 请求以命令的形式包裹在对象中, 并传给调用对象// 对于游戏角色的控制// 接受者console.log('角色开始奔跑');//触发者run() {console.log('请给我爬');// 指令器console.log('执行命令');// 模板模式// 在模板中, 定义好每个方法的执行步骤. 方法本身关注于自己的事情// 想要成功吃个鸡, 大概分几步console.log('打开电源');

【代码】js设计原则。

【代码】调用腾讯天气 qq-weather。

ie和edge浏览器在调用xhr.upload.onprogress进度事件时，仍然只会发送post或者get请求，但是火狐等高端一点的浏览器会将其视为跨域问题，并在post或者get请求之前，自动发出一个option请求。那么坑爹的就是，后台不解决option，后续新的请求就不会得到响应。后台处理option请求就行。