Leslie Waong

第一章 快速入门TypeScript 中文手册 深入理解 TypeScript TypeScript简介对比于JS，TS是JS的超集，简单的说就是在 JavaScript 的基础上加入了类型系统，让每个参数都有明确的意义，从而带来了更加智能的提示。 相对于JS而言，TS属于强类型语言，所以对于项目而言，会使代码更加规范，从而解决了大型项目代码的复杂性，其次，浏览器是不识别TS的，所以在编译的时候，TS文件会先编译为JS文件。 TypeScript是JavaScript的超集。 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。 TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。 TS完全兼容JS，换言之，任何的JS代码都可以直接当成TS使用。 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却 ...

Linux终端命令explainshell,将自己不懂的命令行语句输入进去查询，即可查到对应释义 系统指令 指令 解释 whoami 查询系统当前的用户名 uname -a 查询主机名、系统内核/CPU等信息 uptime 查询系统运行时间，用户数、负载 env 查询系统的环境变量 iostat 查询IO速率/CPU使用情况 df -h 查询磁盘使用信息 du -sh 查询指定目录大小 last 查询用户登录记录 导航移动指令绝对路径大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径， 例如只要看到这个路径：c:/website/img/photo.jpg 我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。 这样完整的描述文件位置的路径就是绝对路径。 我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。(也可以认为以/开头的都为绝对路径) 相对路径所谓相对路径，顾名思义就是自己相对与目标位置。 不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出 ...

Git基础Git&GitHubGit基础版本控制 版本控制是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统 有了它你就可以将某个文件回溯到之前的状态，甚至将整个项目都回退到过去某个时间点的状态。 就算你乱来一气把整个项目中的文件改的改删的删，你也照样可以轻松恢复到原先的样子。但额外增加的工作量却微乎其微。 你可以比较文件的变化细节，查出最后是谁修改了哪个地方，从而找出导致怪异问题出现的原因，又是谁在何时报告了某个功能缺陷等等。 集中式(svn)svn因为每次存的都是差异，需要的硬盘空间会相对的小一点，可是回滚的速度会很慢 优点: 代码存放在单一的服务器上，便于项目的管理 缺点: 服务器宕机（员工写的代码得不到保障） 服务器炸了（整个项目的历史记录都会丢失） 分布式(git)git每次存的都是项目的完整快照，需要的硬盘空间会相对大一点 (Git团队对代码做了极致的压缩，最终需要的实际空间比svn多不了太多，可是Git的回滚速度极快) 优点: 完全的分布式 缺点: 学习起来比SVN陡峭 托管中心（维护远程库） 局域网：可以自己搭建一个GitLa ...

快捷键 解释 快捷键（mac） 快捷键（win） 注释 command+/ Ctrl+/ 快速生成网页 html:5 html:5 代码格式化 Shift+Alt+F Shift+Alt+F 向上或向下复制一行 Shift+option+Up 或 Shift+option+Down Shift+Alt+Up 或 Shift+Alt+Down 在当前行下方插入一行 command+Enter Ctrl+Enter 在当前行上方插入一行 command+Shift+Enter Ctrl+Shift+Enter 万能键：打开命令面板。在打开的输入框内，可以输入任何命令 command+Shift+P F1 或 Ctrl+Shift+P 查找 command+F Ctrl+F 查找替换 Command + Option + F Ctrl+H 删除整行 Command +Shift+K Ctrl+Shift+K 键盘快捷方式查看与修改 ctrl+K ctrl+S 插件Live Sever为静态和动态页面启动具有实时重载特性的本地开发服务器。 补 ...

React 路由相关理解SPA的理解 单页Web应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面，只会做页面的局部更新。 数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component 路由分类后端路由 理解： value是function, 用来处理客户端提交的请求。 注册路由： router.get(path, function(req, res)) 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据 前端路由 浏览器端路由，value是component，用于展示页面内容。 注册路由: <Route path="/test" component={Test}> 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件 rea ...

React Router 6 快速上手概述 React Router 以三个不同的包发布到 npm 上，它们分别为： react-router: 路由的核心库，提供了很多的：组件、钩子。 react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。 react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。 与React Router 5.x 版本相比，改变了什么？ 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。 语法的变化：component={About} 变为 element={<About/>}等。 新增多个hook：useParams、useNavigate、useMatch等。 官方明确推荐函数式组件了！！！ …… Componen ...

居中布局与Flex居中布局水平居中 text-align: center设置块元素或表格单元格中内容的水平对齐方式。这意味着它像vertical-align一样工作，但在水平方向。不能直接用于行内元素 ，另外，这个内容不一定是行内元素，块元素中有h1(块元素)一样可以实现效果。 margin: 0 auto absolute + transform flex + justify-content: center 垂直居中 line-height: 父元素height（基线之间的距离，行距=line-height-font-size，推荐在设置 line-height 时使用无单位数值）注意子元素是否存在margin。适合文本。 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。使行内元素盒模型与其行内元素容器垂直对齐/垂直对齐表格单元内容。不能用它垂直对齐块级元素。 absolute + transform flex + align-items: center table、grid 水平垂直居中HTML ...

原型和继承原型每个函数都有一个属性prototype，它指向函数的原型，默认情况下它是一个普通Object对象。 调用该构造函数所创建的实例的隐式原型指向该构造函数的原型对象。 JS同样存在由原型指向构造函数的属性：constructor，即Func.prototype.constructor --> Func JS中所有对象(除了null)都具有一个__proto__属性，该属性指向该对象的隐式原型。 JavaScript所有的对象本质上都是通过new 函数创建的，包括对象字面量的形式定义对象(相当于new Object()的语法糖)。 所有的函数本质上都是通过new Function创建的，包括Object、Array等。所有的函数都是对象。 实例对象在查找属性时，如果查找不到，就会沿着__proto__去与对象关联的原型上查找，如果还查找不到，就去找原型的原型，直至查到最顶层，这也就是原型链的概念。 所有函数(包括Function)的__proto__指向Function.prototype 自定义对象实例的__proto__指向构造函数的原型 函数的protot ...

let、const和var的区别var 存在变量提升 即变量可以在声明之前调用，值为undefined。 可以重复声明。 在函数中使用var声明变量的时候，该变量是局部的；对于声明在任何函数外的变量来说是全局的。 let 不存在变量提升，let声明变量前，该变量不能使用（暂时性死区）。 let命令所在的代码块内有效，在块级作用域内有效。 let不允许在相同作用域中重复声明，注意是相同作用域，不同作用域有重复声明不会报错。 const 不存在变量提升。 存在块级作用域。 同一作用域不允许重复声明变量。 const声明一个只读的常量。一旦声明，常量的值就不能改变。const并不是变量的值不能改动，而是变量指向的内存地址所保存的数据不得改动。例如，在引用内容是对象的情况下，这意味着可以改变对象的内容。 变量提升和函数提升在ES6之前，js是没有块级作用域，只有两种作用域 全局作用域 函数作用域 什么是没有块级作用域? 12345var i=1;if(true){ var a = '123';}console.log(a);// 123 ...

this指向 引言 要理解this的设计，我们需要先了解Javascript中内存的数据结构； Javascript内置七种数据类型，可以分为基本数据类型和对象数据类型，在这里我们主要讲解一下对象数据类型在内存中的存储方式； 1var obj = { name: 'Heternally'}; Javascript引擎在处理上面代码时，会在堆内存中，生成一个对象{ name: 'Heternally'}，然后把这个对象在内存中的地址赋值给变量obj。所以在读取obj.name时，需要先从变量obj拿到地址，然后再从对应地址中拿到对象，再返回它的name属性。 对象的属性可能是一个函数，当引擎遇到对象属性是函数的情况，会将函数单独保存在堆中，然后再将函数的地址赋值给对象属性；而Javascript是允许在函数体内引用当前环境的其他变量，那么问题来了，函数可以在不同的运行环境执行，所以我们就需要一种机制，能够在函数内获得当前运行环境，由此诞生了this，它的设计目的就是指向函数运行时所在的环境。 如何正确判定t ...

DOM事件总结DOM事件的级别DOM事件的级别，准确来说，是DOM标准定义的级别。包括： DOM0的写法： 1234//这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的element.onclick = function () { alert('hello');} 上面的代码是在 js 中的写法；如果要在html中写，写法是：在onclick属性中，加 js 语句。 1<button onclick="alert('hello');">我是按钮</button> DOM2的写法： 1234// 高版本浏览器element.addEventListener('click', function () { alert('hello');}, false); 【重要】上面的第三参数中，true表示事件在捕获阶段触发，false表示事件在冒泡阶段触发（默认）。如果不写，则默认为false。 1234// IE8 ...

HTML语义化 良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。 语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。 优点 标签语义化有助于构架良好的HTML结构（让页面的内容结构化） 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）。 满是div的页面这些设备如何区分那些是主要内容优先阅读？ 清晰的结构有利于团队的开发和维护。 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。 常用的一些语义化标签 <h1>~` ，作为**标题**使用，并且依据重要性递减，` 是最高的等级。 <p>段落标记，知道了 <p> 作为段落，你就不会再使用 <br/> 来换行了，而且不需要 <br/> 来区分段落与段落。 <p> 中的文字会自动换行，而且换行的效果优 ...