Type-Challenges

这里记录一些基于type-challenges的一些挑战题目来学习的typescript type笔记

背景

1
2
3
4
5
6
7
8
9
10
11
12
13

// 以下这三个类型均来源于 '@type-challenges/utils' 这些类型将会在接下来用于判断挑战的结果。这里简单介绍以下这三个类型 
import { Equal, Expect, NotAny } from '@type-challenges/utils'
// Expect 是一个泛型 接受一个参数 类型T 类型T要继承自true即类型T要为true否则会报错 如此就实现了判断类型是不是true的方法。
type Expect<T extends true> = T
// 这个可化繁一下
// export type Equals<X, Y> =
//    (<T>() => T extends X ? 1 : 2) extends
//    (<T>() => T extends Y ? 1 : 2) ? true : false;
// 这里做了个延迟判断
// 简单来说就是 Ts本身在给定X，Y之前无法确定T类型就延迟判断， 给定X，Y了之后(<T>() => T extends X ? 1 : 2) extends (<T>() => T extends Y ? 1 : 2)整理要为true即T同时具有X和Y的属性，如果T不同时具有X和Y的属性即整体为false。这样就是延迟判断。
type Equal<X, Y> = <T>() => T extends X ? 1 : 2 extends <T>() => T extends Y ? 1 : 2 ? true : false
// 做了一个简单的判断 T 为any类型的话会报错
type NotAny<T> = true extends IsAny<T> ? false : true

版本：V5.0.2

背景

ECharts基于笛卡尔坐标系的折线图，柱状图。默认自适应的Y轴普遍都很整齐美观(间隔，最大值是默认是整数且通常为10的倍数，对人类友好)。这是如何实现的呢？我们尝试从ECharts的源码中来一探究竟。

结论

总体来说要实现友好的间隔(niceTicks )和范围(niceExtent)，首先要根据原始的值的范围和分段数量来获取每个分段的大小，在对这个数字进行美化，具体美化规则见上文代码，大体思路为判断数字的首位距离1,2,3,5,10谁更近就将其作为数字的首位并抹去其余位的数字。获得美化后的分段大小后再根据分段的大小和原始范围来确定分段的个数。这部分的理论依据见Nice numbers for graph labels - heckbert 1990.pdf · Yuque。

版本：V5.0.2

背景

Echarts源码阅读系列文章的前置任务，学习优秀开源框架、熟悉代码组织结构，了解核心模块。

辗转相除法求最大公约数

怕不是上了个假大学系列第二篇。

问题

求252和105的最大公约数。

答案

21

公交车概率论问题

怕不是上了个假大学系列第一篇。

问题

公交车站有两趟公交车、A五分钟一趟、B十分钟一趟。问在该公交车站一分钟内等到车的概率。

答案

0.28

Canvas与Svg互转

本文主要以两个库canvg和canvas2svg为例。尝试探寻Svg与Canvas如何实现互转，以及上述两个库的可用性问题。

SCRIPT5018: 错误的数量词

正则问题

问题：IE 11 不支持(?<= ) (?<! ) 正则

解决方案： 1. 检索此类正则并手动修复

资料：

https://docs.microsoft.com/zh-cn/scripting/javascript/misc/unexpected-quantifier-javascript?f1url=%3FappId%3DDev12IDEF1%26l%3DZH-CN%26k%3Dk(VS.WebClient.Help.SCRIPT5018)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp

解决方案： 2. 如果是子依赖项报错可在外层项目再走一遍webpack来纠正。

资料：

如果是基于vue-cli的项目在vue.config.js中构建配置如下：

1
2
3

module.exports = {
  transpileDependencies:['your lib name']
} 

原理为：将以上node_modules内的包再走一次webpack编译，如果项目本身webpack配置是支持IE11的这些包也将会支持IE11。

非基于vue-cli的项目请根据原理酌情修改webpack配置。

版本：V4.6.0

API介绍

[focusNodeAdjacency](https://echarts.apache.org/zh/option.html# series-graph.focusNodeAdjacency)：主要在关系图及桑基图中应用，表示是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。具体操作为修改其余节点的透明度。

背景

设计师认为突出节点时其余点透明度过低，使用该API发现无法修改被忽略节点及连线的透明度。

同源策略是什么

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，”同源政策”是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

同源的定义

如果两个页面的协议，主机和端口（如果有指定）都相同，则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”，或简单地叫做“tuple”. (“tuple” ，“元”，是指一些事物组合在一起形成一个整体，比如（1，2）叫二元，（1，2，3）叫三元)

下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL 组成

{protocol}://{host}:{port}/{filePath}?{query(key=value&key2=value2)}#{fragment}

另请参见文件的源定义: URLs.

参考 & 引用

https://www.cnblogs.com/rain-chenwei/p/9520240.html
https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
https://blog.csdn.net/shuai_wy/article/details/51186956
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

Git Bash 美化

终端美化的方案有很多、首推ob my zsh，但其在windows平台配置较为复杂，如果不太想折腾，仅仅就Git Bash做一个简单的美化和实用化、可以看这篇文章。

基础效果

最终效果

这里删除了基本无变化且个人并不关心的用户、主机、和系统信息，显示了当前时间并对分支样式做了修改。