9-18——9.22小周总结
最近在做的一个项目中，有一些点都不难但是还蛮有意思，特此来记录一番!
1. 实时动态计时
这个需求并不难，最初稍微找了下有木有现成的组件，发现没有，可能是太简单了没有封装的必要。
12345678910111213141516171819202122232425262728export default { data () { return { timer: null } } created() { this.timer = setInterval(this.updateCurrentTime, 1000) // 每秒更新当前时间 } destroyed() { clearInterval(this.timer) // 清除定时器 } methods: { updateCurrentTime() { const no ...
CornerstoneJs Advanced
Image Cache
Cornerstone 将图像存储在图像缓存中以跟踪内存使用情况。
当图像加载对象中的 Promise 解析时，生成的图像将由 Cornerstone 存储在图像缓存模块中的对象中。它被设置为作为最近最少使用 (LRU) 缓存运行。
设置最大缓存大小，默认1GB（setMaximumSizeBytes）
手动清除所有图像的缓存（purgeCache）
检索缓存的摘要 (getCacheInfo)
更改特定Image的记录缓存大小（changeImageIdCacheSize）
Enabled Element Layers
将图层添加到启用的元素允许 Cornerstone 显示标签图并执行图像融合。
Enabled Element Layers API 允许开发人员使用 Cornerstone 添加构建一组复合图像。
Basics：
启用的元素可以有多个层。
每个图层都类似于一个启用元素 - 它们每个都有自己的图像和视口、离屏渲染画布等……
一次只能有一个层处于活动状态。
图层具有可见性和不透明度属性，并由图层 ID 唯一引用。
When a Laye ...
react-redux的connect
一、UI组件和容器组件
React-Redux将所有组件分为两大类：UI组件 和 容器组件
UI组件：只负责UI的呈现，不带有任何业务逻辑，没有状态state值的使用，所以的参数是通过this.props获取。
容器组件：负责管理数据和业务逻辑，不负责UI的呈现，有业务逻辑，并且使用Redux提供的API
二、connectReact-Redux提供connect方法，用于从UI组件生成容器组件。connect的意思，就是将这两种组件连起来。
导入1import { connect } from 'react-redux'
使用1export default connect(mapStateToProps, mapDispatchToProps)(AppUI);
connect方法可以省略mapStateToProps参数，那样的话，UI组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。
mapStateToProps：更新props ==> 作为输入源。返回一个对象，key为UI界面对 ...
CornerstoneJs基础概念篇
Cornerstone 是一个开源项目，其目标是提供一个完整的基于网络的医学成像平台。
关键特性
基于HTML5/Javascript的库，可以轻松地将交互式医学图像添加到web应用程序中
作为从企业查看器、报告查看器登构建更复杂医疗成像应用程序的基础
支持所有基于HTML5的浏览器，包括手机、平板电脑和台式机
显式所有常见的医学图像格式（例如8位灰度、16位灰度、RGB颜色）
高性能图像显示（例如通过webworker）
通过图像加载器插件设计从具有不同协议的不同系统检索图像
API支持更改视口属性（例如ww/wc、缩放、平移、反转）
仅支持2D成像
Concepts 概念
Enabled Elements
通过网页中的脚本标记引用 Cornerstone JavaScript 库文件
引用一个或多个图像加载器的 JavaScript 文件，Cornerstone 将使用该加载器在网页中实际加载像素数据（例如 WADO、WADO-RS、自定义）
将一个元素添加到 DOM 中，该元素将用于显示其中的图像
使用 CSS 将元素定位在页面上以及所需的宽度和高度
...
TailwindCss基本介绍和使用
TailwindCss是什么官网 总的来说, 就是设置好了一堆工具类, 定义好样式可以直接调用。
引入
安装1npm install -D tailwindcss
创建配置配件tailwind.config.js123456789npx tailwindcss initmodule.exports = { content: ["./src/**/*.{html,ts,js}"], theme: { extend: {}, }, plugins: [],}
在项目的公共css文件（src/style.css）中添加以下内容，用 @tailwind 指令添加 Tailwind123@tailwind base;@tailwind components;@tailwind utilities;
运行 tailwindcss CLI 工具，指定源文件 ./src/style.css 和输出文件./src/output.css，开启监听生效目录中所有出现的 class 类名的变化 ...
JavaScript十大排序算法
排序是最最最基础了，但是老是忘记，好记性不如烂笔头！
序、算法概述
算法分类十种常见排序算法可以分为两大类：
比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。
非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。
算法复杂度
排序方法
时间复杂度（平均）
时间复杂度（最坏）
时间复杂度（最好）
空间复杂度
稳定性
冒泡排序
O(n²)
O(n²)
O(n)
O(1)
稳定
快速排序
O(n㏒n)
O(n²)
O(n㏒n)
O(n㏒n)
不稳定
简单插入排序
O(n²)
O(n²)
O(n)
O(1)
稳定
希尔排序
O(n^1.3)
O(n²)
O(n)
O(1)
不稳定
简单选择排序
O(n²)
O(n²)
O(n²)
O(1)
不稳定
堆排序
O(n㏒n)
O(n㏒n)
O(n㏒n)
O(1)
不稳定
归并排序
O(n㏒n)
O(n㏒n)
O(n㏒n)
O(n)
稳定
计数 ...
TS类型挑战题目记录-中等篇3
Absolute
实现一个接收string,number或bigInt类型参数的Absolute类型,返回一个正数字符串。1234567891011121314type Absolute<T extends number | string | bigint> = `${T}` extends `-${infer U}` ? U : `${T}`type cases = [ Expect<Equal<Absolute<0>, '0'>>, Expect<Equal<Absolute<-0>, '0'>>, Expect<Equal<Absolute<10>, '10'>>, Expect<Equal<Absolute<-5>, '5'>>, Expect<Equal<Abso ...
TS类型挑战题目记录-中等篇2
Trim Left
实现 TrimLeft ，它接收确定的字符串类型并返回一个新的字符串，其中新返回的字符串删除了原字符串开头的空白字符串。1234567891011type TrimLeft<S extends string> = S extends `${" " | "\n" | "\t"}${infer R}` ? TrimLeft<R> : Stype cases = [ Expect<Equal<TrimLeft<'str'>, 'str'>>, Expect<Equal<TrimLeft<' str'>, 'str'>>, Expect<Equal<TrimLeft<' str'>, 'str'>>, Expec ...
TS类型挑战题目记录-中等篇1
好了, 接下来到中等的挑战了, 拭目以待。
Get Return Type
不使用 ReturnType 实现 TypeScript 的 ReturnType 泛型。12345678910type MyReturnType<T> = T extends (...args: any) => infer R ? R : neverconst fn = (v: boolean) => { if (v) return 1 else return 2}type a = MyReturnType<typeof fn> // 应推导出 "1 | 2"
Omit
不使用Omit实现TypeScript的Omit<T, K> 泛型。Omit会创建一个省略 K 中字段的 T 对象。12345678910111213type MyOmit<T, K extends keyof T> = { [key in keyof T as key extends K ? never : ...
TS类型挑战题目记录-简单篇
最近在看TypeScript类型, 发现远不是我想的只是基于JavaScript上加点类型注释。
后来在github上发现了TypeScript type challenges(我愿称之为极其变态的挑战)
对目前的我来说, 还是有很大的难度… 特此记录一下简单篇的类型训练！
Pick
实现 TS 内置的 Pick<T, K>，但不可以使用它。从类型 T 中选择出属性 K，构造成一个新的类型。123456789101112131415type MyPick<T, K extends keyof T> = { [P in K]: T[P]}interface Todo { title: string description: string completed: boolean}type TodoPreview = MyPick<Todo, 'title' | 'completed'>const todo: TodoPreview = { titl ...