ts

md/Java框架/Spring/README.md

@@ -129,3 +129,16 @@
 | Web | spring-web | 客户端及 Web 远程调用 |
 | WebSocket | spring-websocket | Websocket 和 SockJS 实现 |
 | Test | spring-test | 测试模拟对象和测试框架 |
+
+## Jar包
+  Jar包下载：
+[https://repo.spring.io/ui/#/artifacts/browse/tree/General/libs-release-local/org/springframework/spring](https://repo.spring.io/ui/#/artifacts/browse/tree/General/libs-release-local/org/springframework/spring)
+[https://repo.spring.io/ui/native/libs-release-local/org/springframework/spring/](https://repo.spring.io/ui/native/libs-release-local/org/springframework/spring/)
+
+* spring-core
+* spring-context
+* spring-beans
+* spring-expression
+* spring-jcl
+* junit
+* hamcrest-core

md/前端可视化/Cesium/Cesium.js小技巧.md

@@ -29,3 +29,40 @@ viewer.scene.globe.enableLighting = true;
 ```js
 viewer.scene.screenSpaceCameraController.enableZoom = false;
 ```
+
+- 相机控制
+
+```js
+// true，则允许用户旋转相机。
+// false，相机将锁定到当前标题。此标志仅适用于2D和3D。
+viewer.scene.screenSpaceCameraController.enableRotate = false;
+
+// true，则允许用户平移地图。
+// false，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
+viewer.scene.screenSpaceCameraController.enableTranslate = false;
+
+// true，允许用户放大和缩小。
+// false，相机将锁定到距离椭圆体的当前距离
+viewer.scene.screenSpaceCameraController.enableZoom = false;
+
+// true，则允许用户倾斜相机
+// false，相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
+viewer.scene.screenSpaceCameraController.enableTilt = false;
+
+// 设置最大最小放缩量
+viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1200;
+// 设置最大放缩量
+viewer.scene.screenSpaceCameraController.maximumZoomDistance = 2500;
+```
+
+- Cesium 加载完成
+
+```js
+const helper = new Cesium.EventHelper();
+helper.add(viewer.scene.globe.tileLoadProgressEvent, function (event) {
+  console.log(“每次加载矢量切片都会进入这个回调”);
+  if (event == 0) {
+    //console.log(“这个是加载最后一个矢量切片的回调”);
+  }
+});
+```

md/前端可视化/WegGL/01_WebGL基础/1.1 - WebGL与WebGL程序.md

@@ -0,0 +1,63 @@
+## WebGL 概念
+
+&emsp;&emsp;WebGL 是一种 JavaScript 应用程序编程接口(API),可在任何兼容的 Web 浏览器中使用计算设备的图形处理单元 (GPU) 来呈现实时 2D/3D 计算机图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 \<canvas>元素中使用。 这种一致性使 API 可以利用用户设备提供的硬件图形加速。
+
+## WebGL 程序
+
+&emsp;&emsp;WebGL 程序的基本组成部分：
+
+- HTML
+- CSS
+- HTML canvas 元素
+- 要渲染的 3D 对象的图形数据
+- 加载、配置、渲染图像数据以及响应事件的 JavaScript 程序
+- 执行图形渲染关键部分的 OpenGL 着色器程序
+
+## GPU
+
+&emsp;&emsp;现代计算设备具有多个不同类型的处理器：
+
+- CPU（中央处理单元）：是设备的“大脑”。CPU 执行一般处理并运行控制设备整体功能的操作系统 (OS)。
+- GPU（图形处理单元）：专门设计用于渲染 3D 图形。
+
+&emsp;&emsp;现代计算设备还具有未不同目的而设计的多种类型的存储器：
+
+- RAM（随机存取存储器）：存储程序数据和程序指令。
+- 图形内存：用于视频和图形处理的独立内存系统。GPU 具有专为 3D 图形设计的专用内存。
+
+![计算设备中的主要硬件](../img/hardware_overview.png)
+
+##### 图形处理器
+
+&emsp;&emsp;根据 NVIDIA 的说法，GPU 是“具有集成变换、照明、三角形设置/裁剪和渲染引擎的单芯片处理器，能够每秒处理至少 1000 万个多边形。” 与具有针对顺序处理优化的几个内核的多核处理器不同，GPU 由数千个较小的内核组成，可以高效地处理并行工作负载。因此，GPU 加速了帧缓冲区（包含完整帧数据的 RAM 的一部分）中图像的创建，用于输出到显示器。
+
+![cpu_and_gpu.jpg](../img/cpu_and_gpu.jpg)
+
+##### GPU 加速计算
+
+在 GPU 加速计算中，应用程序被加载到 CPU 中。每当遇到计算密集型代码部分时，就会加载该部分代码并在 GPU 上运行。它使系统能够以有效的方式处理图形。
+
+![gpu_accelerated_computing.jpg](../img/gpu_accelerated_computing.jpg)
+
+&emsp;&emsp;GPU 将有一个单独的内存，它一次运行一小部分代码的多个副本。GPU 处理其本地内存中的所有数据，而不是中央内存。因此，需要 GPU 处理的数据应该加载/复制到 GPU 内存，然后进行处理。
+
+&emsp;&emsp;在具有上述架构的系统中，应该减少 CPU 和 GPU 之间的通信开销以实现更快的 3D 程序处理。为此，我们必须复制所有数据并将其保存在 GPU 上，而不是反复与 GPU 通信。
+
+## 请求渲染流程
+
+&emsp;&emsp;当客户端从 Web 服务器请求网页时，会发生以下事件序列：
+
+1. 服务器将网页的 HTML 描述发送给客户端，客户端将网页存储在 RAM 中。
+
+2. 客户端的 Web 浏览器读取 HTML 页面内容并请求 HTML 代码中引用的任何其他文档，包括图像、JavaScript、CSS 等文件。所有这些文件都存储在客户端的 RAM 中。
+
+3. 如果有与页面关联的 JavaScript 代码，它就会被执行。对于包含 3D 图形的页面，JavaScript 代码将执行以下任务：
+   - 它可能会请求从服务器下载其他数据文件（例如，描述要渲染的 3D 图形对象的数据）。
+   - 它将获取并初始化与将呈现图形的 HTML 画布元素关联的 WebGL 图形上下文。
+   - 它将配置模型数据并将其复制到 GPU 的内存中。（从技术上讲，数据被复制到 GPU 的顶点对象缓冲区）。
+   - 它将建立“事件处理程序”，将 HTML 事件与将在事件发生时执行的 JavaScript 代码相关联。
+4. 最后，网页被渲染到浏览器中的一个窗口，网页等待用户事件。定时器事件可以设置为定期自动生成事件，这可以创建 3D 图形的动画。
+
+&emsp;&emsp;当 JavaScript 事件处理程序启动将图形渲染到 HTML canvas 元素中时，它会告诉 GPU 哪个对象缓冲区包含它想要渲染的数据，然后发出 WebGL“draw”命令。请注意，要渲染的数据通常已经在 GPU 内存中。在典型的图形程序中，模型数据仅被复制到 GPU 的内存一次。这可以节省时间并使图形渲染高效快速。当我们使用术语“real-time graphics”时，我们的意思是可以在不到 1/30 秒的时间内完成渲染，并且用户可以查看流畅的图形动画。只有最大限度地减少 GPU 内存和 RAM 之间的数据传输，才能实现如此快速的渲染。
+
+![WebGL 程序的不同部分存储和执行的位置](../img/data_location.png)

md/前端可视化/WegGL/01_WebGL基础/1.2 - 渲染管道.md

@@ -0,0 +1,19 @@
+## 图形分类
+
+  计算机描述图形有两种基本方式：
+
+- 光栅图形
+
+    使用像素点描述图形，如果这些点足够小并且靠得足够近，就看不到是单个点，而是一张“图片”
+
+- 矢量图形
+
+    使用数学方程将对象描述为几何形状。图片是通过渲染过程根据数学描述创建的，渲染的结果是二维光栅图像。
+
+  3D 计算机图形是使用几何数据的三维表示来执行计算、渲染 2D 图像的图形。
+
+## 图形管道
+
+  将对象的矢量图形表示转换为光栅图像的过程由以下步骤执行：
+
+![render_pipeline](../img/render_pipeline.png)

md/前端可视化/WegGL/01_WebGL基础/1.3 坐标系.md

@@ -0,0 +1,3 @@
+## 齐次坐标
+
+  齐次坐标使用如下的符号描述：(x, y, z, w)，等价于三维坐标(x/w, y/w, z/w)。如果齐次坐标的第 4 个分量是 1，就可以将它当作三维坐标来使用。w 的值必须是大于等于 0 的。如果 w 趋近于 0，其表示的点将趋近无穷远。

md/前端可视化/WegGL/02_着色语言/着色器.md

@@ -0,0 +1,27 @@
+## 着色器
+
+##### 顶点着色器(Vertex shader)
+
+  顶点着色器是用来描述顶点特性(如位置、颜色等)的程序。顶点(vertex)是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。
+
+##### 片元着色器(Fragment shader)
+
+  进行逐片元处理过程的程序。片元(fragment)是一个 WebGL 术语，可理解为图像的单元。
+
+## attribute
+
+  被称为存储限定符，表示接下来的变量是一个 attribute 变量。attribute 变量必须声明成全局变量，数据将从着色器外部创给该变量。变量的声明格式：
+
+> attribute \<类型> \<变量名>
+
+```js
+// 获取attribute变量的存储位置
+const a_Position = gl.getAttribLocation(gl.program, "a_Position");
+
+// 将定点位置传输给attribute变量
+gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
+
+// OR
+const position = new Float32Array([1.0, 2.0, 3.0, 1.0]);
+gl.vertexAttrib4fv(a_Position, position);
+```

md/前端可视化/WegGL/README.md

@@ -0,0 +1,35 @@
+##### WebGL 基础
+
+##### 着色语言
+
+##### 绘制图形
+
+##### 矩阵与变换
+
+##### 相机
+
+##### 投影与视口
+
+##### 光照与着色
+
+##### 贴图纹理
+
+##### 剪裁
+
+##### 层级模型
+
+##### 曲线与曲面
+
+##### 高级绘制
+
+- 超越流水线绘制结构
+- 光线跟踪
+- 全局光照和路径跟踪
+- 并行绘制
+- 隐函数和等高线图
+- 体绘制
+- 等值面与不仅立方体
+- 不仅四面体
+- 网格简化
+
+##### WebGL 性能优化

md/前端基础/CSS/demo.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      div {
+        width: 400px;
+        background: linear-gradient(gray, gray) no repeat;
+        background-size: 100% 1px;
+        background-position: 0 1.15em;
+        text-shadow: 0.05em 0 white, -0.05em 0 white;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      1. Frame by Frame Animation There are times when we need an animation that
+      is quite difficult to achieve with raw CSS transition properties on
+      elements. For example, a progress indicator or a moving icon can be a
+      difficult task to achieve with raw CSS properties. In such cases,
+      image-based frame-by-frame animation is a perfect choice where you can
+      achieve all types of challenging tasks flexibly. Note: We can also use
+      GIFs for most cases, but there are certain limitations to using GIFs. They
+      are limited to 256 color palettes and also they can’t have alpha
+      transparency which becomes a big problem when there are items underneath
+      the GIF. GIFs are great for portable tasks, but not a recommended choice
+      for experimentation.
+    </div>
+  </body>
+</html>

md/前端进阶/TypeScript/1_基础类型.md

@@ -10,9 +10,9 @@ let isBool: boolean = false;
 
 ```ts
 let dec: number = 6;
-let hex: number = 0xf00d;
-let binary: number = 0b1010;
-let octal: number = 0o744;
+let hex: number = 0xf00d; // 十六进制
+let binary: number = 0b1010; // 二进制
+let octal: number = 0o744; // 八进制
 ```
 
 ## 字符串
@@ -24,7 +24,7 @@ let name = "Brendan";
 let username = "Eich";
 ```
 
-  还可以使用末班字符串反引号(`)来定义多行文本和内嵌表达式(\${expr})。
+  还可以使用模块字符串反引号(`)来定义多行文本和内嵌表达式(\${expr})。
 
 ```ts
 let firstName = "Brendan";
@@ -93,7 +93,13 @@ enum Color {
 
 ## 任意值 any
 
-  
+  指定 any 为类型可以忽略来自 TypeScript 的所有类型检查。any 除非必须（通常是为了向后兼容），否则不要使用。
+
+## unknown
+
+  在实际上不知道类型并希望确保类型安全时使用 unknown 修饰变量。
+
+  使用 unknown 时，可以将所有类型关联到一个变量，但不能使用 unknown 类型转换为具有其他类型的变量。
 
 ## 空值 void