Vue2项目配置flow类型检查

发表于 2023-03-24

Flow 是 JavaScript 代码的静态类型检查器。它做了很多工作来提高你的工作效率。使您编码更快、更智能、更自信，并且规模更大。

Flow 通过静态类型注解检查你的代码是否有错误。这些类型允许您告诉 Flow 您希望您的代码如何工作，Flow 将确保它确实以这种方式工作。

Vue2的源代码就使用了Flow进行静态类型检查。下面介绍在Vue2项目中安装配置使用Flow的方法。

安装步骤

Babel是一个支持 Flow 的 JavaScript 代码编译器。Babel 将获取您的 Flow 代码并删除所有类型注释。

1	npm install --save-dev @babel/core @babel/cli @babel/preset-flow

接下来，您需要在项目的根目录下创建一个文件，即.babelrc，并将”@babel/preset-flow”配置在您的”presets”.

1	{ "presets": ["@babel/preset-flow"] }

flow可以直接通过npm或者yarn安装。

1	npm install --save-dev flow-bin

安装完成后在package.json中加入下面的脚本:

1
2
3

"scripts": {
  "flow":"flow check"
}

使用方法

配置flow

首先生成flow配置文件.flowconfig：

1	.\node_modules\.bin\flow init

使用flow

新建一个文件index.js：

1 2	// @flow let a:number = '3';

// @flow或者 /* @flow */告诉flow检查这个文件
输入npm run flow 执行类型检查

注：在vue单文件组件使用flow需要额外配置

注：项目路径不能存在中文

请参考vue2.0项目配置flow类型检查。

参考链接

Threejs学习笔记

发表于 2023-03-23 | 更新于 2023-03-29

Three.js是一个跨浏览器的 JavaScript 库和应用程序编程接口(API)，用于使用WebGL在Web 浏览器中创建和显示动画3D 计算机图形。

Three.js 允许使用JavaScript语言创建图形处理单元(GPU) 加速的 3D 动画作为网站的一部分，而无需依赖专有浏览器插件。

Three.js入门教程

请参考一篇文章了解 threejs 在 vue 项目中的基本使用。

three.js 动画系统

参考链接

轨道控制器（OrbitControls）,by threejs.
一篇文章了解 threejs 在 vue 项目中的基本使用,by wjw1014.
用封装好的threejs库快速生成全景-Panolens.js,by 乘风转舵.
关于梳理封装Threejs工具类这档事,by FlyTeng_1874.
Three.js - 监听window 的 resize 事件，使浏览器窗口变动自适应,by 已注销.
How to trigger an event when element is resized in Vue.js?,by stackoverflow.
Resize Observer API,by mozilla.
Three.js Animation in Canvas doesn’t resize properly in Vue Application,by stackoverflow.
three.js 动画系统,by discoverthreejs.

Object构造函数创建

使用对象字面量表示法来创建对象

使用工厂模式创建对象

使用构造函数创建对象

原型创建对象模式

组合使用构造函数模式和原型模式

参考链接

追求理解的教学设计读书笔记

发表于 2023-03-18 | 更新于 2023-07-09

《追求理解的教学设计方法》一书采用逆向设计方法，认为教学设计应分为如下三个阶段：

阶段1–预期成果

所确定的目标

教学设计目标，该设计将达到什么目标?

理解

学生将理解…

大概念是什么?
期望他们获得的特定理解是什么?
可预见的误解是什么？

基本问题

什么样的启发性问题能够促进探究、理解和学习迁移?

学生将会知道…

作为本单元的学习结果，学生将会获得哪些关键知识和技能？
习得这些知识和技能后，他们最终能够做什么？

学生将能够做到…

阶段2–评估证据

表现性任务

学生通过哪些真实的表现性任务证明自己达到了预期的理解目标？
通过什么标准评判理解成效？

其他证据

学生通过哪些其他证据（例如：小测验、考试、问答题、观察、作业、日志）证明自己达到了预期成果？
学生如何反馈和自评自己的学习？

阶段3–学习计划

设计关键的教学和学习活动。哪些学习体验和教学能够使学生达到预期的结果，以WHERETO分类学习活动。

W=帮助学生知道此单元的方向和预期成果？帮助教师知道学生从哪开始先前知识和兴趣？
H=把我学生情况和保持学生兴趣？
E=武装学生，帮助他们体验主要观点和探索问题?
R=提供机会去反思和修改他们的理解及学习表现？
E=允许学生评价他们的学习表现及含义？
T=对于学生不同的需要、兴趣和能力做到量体裁衣个性化？
O=组织教学使其最大程度地提升学生地学习动机与持续参与地热情，提升学习效果？

参考链接

追求理解的教学设计(第二版),by 格兰特·威金斯杰伊·麦克泰格.
Understanding by Design,by Ryan S. Bowen.

Windows无法启动MongoDB服务器1067错误恢复记录

发表于 2023-03-13

因断电导致Windows系统无法启动MongoDB后台服务，报1067错误。下面记录该故障的修复过程。

解决方法

移除文件 the file /data/db/mongod.lock
运行命令 mongod.exe –repair

1	run mongod.exe --repair --config %mongodb_install_path\mongod.cfg"

启动MongoDB服务

1	net start MongoDB

参考链接

Mongodb启动失败1067错误,by CWSSSS.
意外关机后恢复的MongoDB的数据,by mongodb.

VLAN

请参考VLAN 基础知识和什么是VLAN。

无线数字通信中数据速率、载波频率和带宽的关系

请参考无线通信系统中数据带宽、载波频率和载波带宽的关系怎样理解？和无线数字通信中数据速率、载波频率和带宽的关系。

香农定理

香农定理给出了信道信息传送速率的上限（比特每秒）和信道信噪比及带宽的关系。香农定理可以解释现代各种无线制式由于带宽不同，所支持的单载波最大吞吐量的不同。

在有随机热噪声的信道上传输数据信号时，信道容量$R_{max}$与信道带宽W，信噪比S/N关系为：
$$R_{max}=W*log2(1+S/N)$$

注意这里的log2是以2为底的对数。

奈奎斯特准则

对于一个带宽为W（Hz）的无噪声低通信道，最高的码元传输速率Bmax:

$$B_{max}=2W(Baud)$$

即每赫兹带宽的理想低通信道的最高码元传输速率是每秒2个码元。

载波

载波（carrier wave）是指被调制以传输信号的波形，一般为正弦波。一般要求正弦载波的频率远远高于调制信号的带宽，否则会发生混叠，使传输信号失真。可以这样理解，我们一般需要发送的数据的频率是低频的，如果按照本身的数据的频率来传输，不利于接收和同步。使用载波传输，我们可以将数据的信号加载到载波的信号上，接收方按照载波的频率来接收数据信号，有意义的信号波的波幅与无意义的信号的波幅是不同的，将这些信号提取出来就是我们需要的数据信号。载波就是携带信息/信号的波形，它携带的方式是进行频率、振幅、相位间隔调制。

电子计算机科学中，基频（baseband）加上载波（carrier wave）而成为宽频（broadband）。

载波是信号调制与发射的载体，它只有一个中心频率，和带宽本身没任何关系。比如11n协议规定可以工作在2G频段，也可以工作在5G频段，其他因素都一样的。假定20M带宽，工作在2G频段的时候载波频率是2.4GHz，那它实际占用的频谱资源是2.390GHz-2.410GHz。工作在5G频段的时候载波频率是5GHz，那它实际占用的频谱资源是4.990GHz-5.010GHz。

调制

模拟信号调制

请参考幅度调制。

数字信号调制

请参考数字调制的原理。

参考链接

VLAN 基础知识,by 行道科技.
什么是VLAN,by huawei.
集线器、交换机、路由器、网桥、网关之间的区别和联系,by danielxue7.
带宽和频率的关系到底是什么？,by zhihu.
无线通信系统中数据带宽、载波频率和载波带宽的关系怎样理解？,by zhihu.
无线数字通信中数据速率、载波频率和带宽的关系,by furious.
调制,by wikipedia.
数字信号,by baidubaike.
数字调制的原理,by bebr.
幅度调制,by wikipedia.

网页音频无法自动播放的解决方案

发表于 2023-02-06 | 更新于 2023-02-09

最近在维护一个网页应用时，发现其音频偶尔无法自动播放，且报如下错误：

1	Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

该错误产生原因是chrome66之后都禁止音视频的自动播放。要解决该问题，可以在用户首次进入页面时，提示用户点击启动音视频自动播放，模拟用户交互。js代码如下：

1
2
3

<script>
  window.confirm("是否启动语音自动播放？")
</script>

以上方法有问题，不能模拟用户交互，还是需要用户真正点击网页。另外还可以参考文章解决浏览器无法自动播放音频的问题的解决方案。

参考链接

Chrome 66禁止声音自动播放之后,by 人人网FED.
解决浏览器无法自动播放音频的问题,by 寻找_.
chrome66 禁止自动播放后，有什么比较好的方法实现audio的自动播放吗？,by segmentfault.

常用二进制比较工具

发表于 2023-02-05

二进制比较工具可用来快速分析两份二进制文件的差异部分，分析二级制文件是否被修改，或其他用途。常用的二进制比较工具主要有：

Beyond Compare

Hex Comparison

UltraCompare

参考链接

常见的比较二进制工具有哪些,by markingNavicat.

GIS数据基本概念解读

发表于 2023-02-02

GIS栅格和矢量数据组织及服务的基本概念可以参考聊聊GIS数据的四个分层与GIS服务。

参考链接

聊聊GIS数据的四个分层与GIS服务,by 为名.

监控数据库表记录变化的解决方案

发表于 2023-02-01

监控数据库表记录的变化，并从中获取变化后的数据，这是二次开发所面临的难题。目前有多种解决方案，各有优缺点。

触发器（Trigger）加异步通知（Notify）

实例请参考SQL 监控表字段变化。

监听数据库操作日志

例如mysql可以通过配置my.ini将数据库操作日志写到文本文件中，然后通过分析文本去获取变化。

轮询数据库表

每隔一段时间获取数据库表记录，查找数据是否发生变化。