- 博客(103)
- 收藏
- 关注
RSS订阅原创 Mac OS : 源码安装nginx （不需homebrew）
下载 nginx http://nginx.org/download/nginx-1.19.10.tar.gz解压到 /usr/local下载 pcre https://ftp.pcre.org/pub/pcre/pcre-8.44.tar.gz解压到 /usr/local/nginx-1.19.10下载 openssl https://www.openssl.org/source/openssl-1.1.1k.tar.gz解压到 /usr/local/nginx-1.19.10进入nginx根
2021-05-08 11:53:42
618
原创 TS：链表
class Node { constructor(data){ this.data = data; this.next = null; }}class LinkedList { constructor(head){ if(typeof head === 'undefined'){ this.length = 0; this.head = null; }else{ this.length = 1; this.head = new Node(head); }
2021-03-08 12:30:40
842
原创 TS：线性表
抽象描述线性表：由大于等于0个元素构成的有序序列存储实现数组存储实现利用数组连续存储空间顺序存放线性表元素type ListElement<T> = Ttype List<T> = T[]操作集初始化空线性表function MakeEmpty<T> ():List<T> { return []}返回线性表长度function Length<T> (list:List<T>):number {
2021-03-08 12:20:51
287
原创 TS：栈、队列
栈LIFO：后进先出class Stack { constructor(){ this.items = [] } // 从栈顶放入元素 push(...element){ this.items.push(...element) } // 从栈顶取出元素 pop(){ return this.items.pop() } size(){ return this.items.length } clear(){ this.items = []; } // 返回栈顶第
2021-03-07 19:44:57
665
原创 TS：type 和 interface
相同点// 对象interface User { name: string age: number}type User = { name: string age: number};// 函数interface SetUser { (name: string, age: number): void;}type SetUser = (name: string, age: number): void;继承（extends）与 交叉类型（Intersection Type
2021-02-20 22:43:22
1503
原创 TS：泛型
官方文档介绍软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。使用示例ts中泛型就是在编译期间不确定方法使用的类型(广泛之意思)，在方法调用时，指定泛型具体指向类型。// 1 泛型函数// 获取数组中最小值 （数字）funct
2021-02-20 00:06:11
1752
原创 ES6：Symbol
symbol 是一种基本数据类型 。Symbol()函数会返回symbol类型的值，该symbol具有暴露内建成员对象的静态属性和暴露全局Symbol注册的静态方法。类似于内建对象类，但作为构造函数来说它并不完整，也不支持 new Symbol()语法。const symbol0 = Symbol(0);const symbol1 = Symbol();const symbol2 = Symbol('');const symbol3 = Symbol('a');const symbol4 = Sy
2021-02-08 15:59:58
79
原创 HTML：defer 和 async
通过为script标签添加defer和async属性也可以实现异步加载js文件。<script data-main="js/main.js" src="js/require.js" defer></script>defer：设置了defer属性的js文件会通过异步方式加载，不会阻塞页面渲染。设置了defer属性的js文件会在页面渲染完毕后，DOMContentLoaded事件调用前执行，即使script标签不在body底部。如果有多个设置了defer的script标签，则
2021-01-25 15:50:09
282
原创 React：性能优化
减少子组件重复渲染：getDerivedStateFromProps只要父组件重新渲染，则不论子组件props是否发生变化，其getDerivedStateFromProps都会被执行，故在getDerivedStateFromProps内将 props 赋值到 state 时，使用的props可能并没有发生变化，导致子组件进行重复渲染。除此之外，在每次setState后getDerivedStateFromProps也会执行，此时getDerivedStateFromProps可能引发state再次
2021-01-25 15:31:46
143
翻译 React：hooks
函数组件React中使用函数组件和原生组件有两点区别：函数组件自身fiber没有与之对应的真实DOM，仅作为children的父级，不作为children的DOM容器函数组件的children是通过执行函数返回的，不是从props.children直接获取的示例：// 原生组件 // JSX形式：const App = <h1>title:{props.title}</h1>;const App = React.createElement( "h1", //
2021-01-16 00:34:26
468
翻译 React: fiber
requestAnimationFrame屏幕刷新率（通常为） 60Hz 即 1秒60帧，折合1000ms/60，平均每帧约 16.6ms。浏览器无法严格控制每16.6ms执行一帧，而是通过vSync标识符动态控制每帧执行时间，（非阻塞情况下）大约为16.6ms左右。在高刷新率显示设备上每帧时间会缩短。非空闲阶段：前3阶段为js执行阶段，后2阶段为渲染阶段，js执行时间过长将导致渲染阻塞。第4阶段rAF阶段：window.requestAnimationFrame回调函数执行阶段空现阶段：
2021-01-15 15:38:37
413
翻译 React: diff算法
同级比较React 的diff 算法 对虚拟DOM树（和fiber树）进行分层比较，只比较相同层级节点，忽略跨层级DOM移动操作情形，从而实现一次遍历比较新旧两颗完整虚拟DOM树（和fiber树）。因此 React 官方建议不要进行 DOM 节点跨层级的操作。元素比较React使用下面方式来比较是否组件发生变化，需要应用到真实DOM节点：如果上一次提交更新的老fiber和此次传入的新虚拟DOM元素有相同的type， 则保持当前的真实 DOM 节点，仅使用新的 props 进行更新如果type不同
2021-01-15 05:05:44
193
原创 React: Virtual DOM
Virtual DOM（虚拟DOM）：使用js对象表示真实DOM对象，精简真实DOM对象中的原生DOM属性和方法，保留必要属性和方法。虚拟DOM保存在内存中，方便随时调用。对虚拟DOM使用diff算法得出真实DOM对象最小必要操作，减少真实DOM对象实际操作，节省性能开销。// 示例const virtualDom = { key:'A1', tag:'div', children:[{ key:'B1', tag:'div', children:[{ key:'C1',
2021-01-13 23:46:16
167
转载 HTTP：Sever Push
HTTP2.0协议新增Sever Push实现服务器主动向客户端推送某些数据，当客户端需要时可以直接在本地缓存中进行获取。推送实现标识依赖资源静态Link标签法<link rel="preload" href="push.css" as="style">HTTP头表示法Link: <push.css>; rel=preload; as=stylepush.css为资源地址，rel=preload表明资源是预加载的，as表明资源文件类型。另外，nopush表示浏
2021-01-13 19:23:06
168
转载 HTTP：Range 和 Content-Range
简述断点续传：指的是在上传/下载时，将任务（一个文件或压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传/下载，如果碰到网络故障，可以从已经上传/下载的部分开始继续上传/下载未完成的部分，而没有必要从头开始上传/下载。可以节省时间，提高速度。断点续传的用途有时用户上传/下载文件需要历时数小时，万一线路中断，不具备断点续传的 HTTP/FTP 服务器或下载软件就只能从头重传，比较好的 HTTP/FTP 服务器或下载软件具有断点续传能力，允许用户从上传/下载断线的地方继续传送，这样大大减少了用户
2021-01-13 18:09:31
1373
转载 HTTP： HTTP2.0 和 HTTPS
HTTP 1.1Range和Content-Range：HTTP1.0当请求一个资源时，只能请求该资源完整数据。HTTP1.1可以通过Range和Content-Range实现只请求该资源的部分数据，从而实现断点续传功能。Connection：keep-alive。HTTP是无状态连接协议，HTTP1.0每次发送请求都要创建新的TCP连接，反复创建连接造成大量连接耗时。HTTP1.1通过创建长连接可以实现创建一次连接发送多个请求，有效的减少了需要多次请求数据时新连接创建的成本，解决传输的问题。Ho.
2021-01-13 18:01:37
457
翻译 JS：Performance
Performace APIPerformance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。调用window.performace方法会返回Performance对象，包含以下属性：timeOrigin：性能测试开始的时间戳timing：各项
2021-01-13 15:05:26
5343
转载 JS：MessageChannel
MessageChannel：通信管道对象，可以实现两端的通信。MessageChannel的onmessage回调属于宏任务。var channel = new MessageChannel();// MessageChannel实例默认具有port1和port2两个对象属性var port1 = channel.port1;var port2 = channel.port2;// MessageChannel实例onmessage事件可以实现监听并绑定回调函数port1.onmessage
2021-01-07 18:30:12
1220
2
转载 JS：Web Worker
由于JS单线程特点，所有任务只能依次执行，无法利用CPU多线程优势，进行计算密集或高延迟任务会造成线程阻塞和UI卡顿。Web Worker可以在JS主线程外创建一个Worker线程来执行JS任务，与主线程互不干扰，减轻主线程负担。由于Worker线程一旦创建成功，即会一直运行，不受主线程打断，容易造成资源浪费，不应过度使用，且当Worker使用完成后应关闭。Web Worker使用是需注意：脚本来源：worker进程中运行的脚本必须来源于网络资源，无法加载本地资源同源限制：worker进程中运行
2021-01-07 18:04:22
1025
翻译 HTTP: CDN缓存机制
CDN（Content Delivery Network）即内容分发网络，通过在网络各处放置节点服务器，构成在现有的互联网基础之上的一层智能虚拟网络。CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，用于确保快速可靠地分发静态内容，这些内容可以缓存，最适合在网速庞大的网络中存储和分发。适用范围CDN 对于常见的 HTTP 请求方式（GET POST HEAD PUT DELETE OPTIONS）均是支持的，但是并不是
2021-01-06 15:25:39
1637
转载 HTTP: 请求报文、响应报文
HTTP 请求报文由3部分组成(请求行+请求头+请求体)POST /DEMOWebServices2.8/Service.asmx/CancelOrder HTTP/1.1 Host: api.efxnow.com Content-Type: application/x-www-form-urlencoded name=tomimage.pngHTTP请求报文1是请求方法,GET和POST是最常见的HTTP方法,初次以外还包括 DELETE、HEAD、OPTIONS、PUT、TRACE，
2020-12-27 13:26:33
386
原创 HTTP:状态码
HTTP状态码通常分为以下五类情况：100-199：请求成功，客户端继续请求才能完成整个处理200-299：请求成功，已完成整个处理300-399：请求完成，客户端需继续细化请求400-499：请求错误500-599：响应错误1XX100 Continue：初始的请求已经接受，客户应当继续发送请求的其余部分101 SwitchingProtocols：服务器将遵从客户的请求转换到另外一种协议2XX**200 OK：成功。**对GET和POST请求的应答文档跟在后面201 Creat
2020-12-27 12:26:45
159
原创 JS: || 和 ??
JavaScript 里 var a =a ||{} 啥意思？var a;if(a === 0 || a === "" || a === false || a === null || a === undefined) a = {}那句话的定义。还有你这种情况 a 是函数的入口参数吧，代码是这样的对吧function(a){ var a = a || {}}它等价于function(a){
2020-12-22 22:38:10
17977
3
原创 JS: 排序算法
冒泡排序依次比较两个相邻元素大小，如果顺序错误则交换位置，递归此操作。function bubbleSort(data){ var temp=0; for(var i=data.length;i>0;i--){ //由于每次执行都会把最大的数移动到数组尾部， //所以每次循环长度减少1，避免不必要比较 for(var j=0;j<i-1;j++){ // 比较相邻元素 if(data[j]>data[j+1]){ //交换元素位置 temp=
2020-12-21 23:19:35
149
原创 React: onRef 和 ref
onRef实现父组件调用子组件方法class Child extends Component{ constructor(props){ super(props) this.state = { //声明变量 text: '山有木兮木有枝' } if(props.onRef){ //如果接收到onRef方法 则调用该方法传入子组件this指针 props.onRef(this) } } func =(arg)=>
2020-12-19 23:43:45
1449
1
转载 CSS3: flex
弹性布局 flexible box基本概念：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。容器的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器存在两根轴：主轴（main axis）和交叉轴（cross axis）。容器属性：flex-direction：主轴方向row ：水平 从左到右 默认row-reverse： 水平 从右到左col：垂直 从上到下col-reverse：垂直 从下到上
2020-12-17 16:14:18
148
原创 JS: 算法时间复杂度分析
语句频度：设 n 为求解的问题的规模，基本操作（或语句）执行次数总和称为语句频度，记做f(n)。时间复杂度：算法（或程序）中基本操作（或语句）重复执行的次数总和称为时间复杂度，记做T(n)，且有T(n) = O(f(n)) 。求时间复杂度步骤：1. 去掉f(n)中所有加法常数2. 只保留最高阶项举例：function plus1(num){ console.log(num); // 1 num++ // 1 console.log(num); // 1}语句频度： f(n
2020-12-16 15:29:22
1169
翻译 ES6：Map 和 Set
Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。Objects 和 Maps 类似，它们都允许你按键存取值、删除键、检测一个键是否绑定了值。过去我们一直都把对象当成 Maps 使用，不过 Maps 和 Objects 有一些重要的区别。在下列情况里使用 Map 会是更好的选择：项 目MapObject额外键不包含任何额外键，只包含明确声明的键包含原型链中的键，声明时可能冲突键类型任何类型字符串、Symb
2020-12-16 10:57:11
113
原创 JS: 对象遍历、对象拷贝
LAMP指Linux+Apache+MySQL/MariaDB+Perl/PHP/Python，是一组常用来搭建动态网站或者服务器的开源软件。它们本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。软件版本操作系统和软件版本如下 ：CentOS：7.2 64位Apache：2.4.23MySQL：5.7.17PHP：7.0...
2020-12-15 17:31:57
324
原创 JS: 数据类型判断 typeof 、 instanceof 、Object.prototype.toString.call
typeoftypeof 运算符返回一个用来表示表达式的数据类型的字符串。返回结果：“number” : number“string” : string“boolean” : boolean“object” : array object null“function” : function“undefined” : undifinedinstanceofinstanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototyp
2020-12-15 16:00:48
114
原创 HIT计算机本科课程
课程梳理一二三一面向对象的程序语言设计 C++ java二高数 线代 离散数学数电和模电 通信原理数据结构和算法数据库系统原理 数据库系统设计与开发 SQL计算机组成原理<Computer systems,A programers perspective>微机系统 汇编语言三操作系统原理及其应用（主要是linux系统，掌握shell命令行）计算机网络 《TCP IP详解三卷》Java方向：(Java方向中J2EE最重要，是工程组织，精通后可以直接就业，本人是Java方
2020-09-10 23:58:04
416
转载 lerna: 最佳实践
最近在工作中使用了lerna进行前端包的管理，效率提升了很多。所以打算总结一下最近几个月使用lerna的一些心得。有那些不足的地方，请包涵。该篇文章主要包括在使用lerna的一些注意事项，和使用过程中与其他工具的整合，最终形成的一个最佳实践。package的指的是一个可以通过npm包管理工具发布的一种目录结构，翻译过来感觉不太适合，所以就用package来说明吧。前端开发...
2019-03-11 10:14:45
11622
1
转载 lerna: 基础使用
lerna概要lerna是GitHub上面开源的一款js代码库管理软件， 用来对一系列相互耦合比较大、又相互独立的js git库进行管理。解决各个库之间修改混乱、难以跟踪的问题。lerna可以优化这种情形下的工作流。对于一些功能比较全的库，我们往往会把各个小功能拆分成独立的npm库，他们直接有比较强的依赖关系。比如：Babel、React等开源代码都是按照这种方式进行处理的。代码库...
2019-03-11 10:10:17
5119
翻译 CI：GitLab-CI 和 Gitlab-Runner 安装使用
系统环境：mac：10.13安装 GitLab-Runnersudo curl --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64Give it permissions to e...
2019-01-02 18:33:23
1722
翻译 CentOS：部署cpnm私有npm库
服务端搭建部署：服务端系统和软件：CentOS：7.2 64位Node：v10.15.0Git安装cpmjsnpm install -g cnpm registry=https://registry.npm.taobao.org 安装cnpmjs.orggit clone git://github.com/cnpm/cnpmjs.org.git /usr/local/...
2019-01-01 17:08:03
1073
转载 Git：git pull 冲突 清除 staged
问题当 git pull 时，如果有冲突，那么除了冲突文件，其它文件都会做为staged区的文件保存起来。重现$ git pullA app/controller/index.jsA app/controller/home.jsM app/view/index.art......A app/static/css/common.cssPull is not...
2018-11-29 10:55:26
1350
转载 HTML5：WebSocket
单TCP连接全双工通讯协议WebSocket 允许服务端主动向客户端推送数据。浏览器和服务器只需要完成一次握手，就直接可以创建持久性的连接，并进行双向数据传输。实例var ws = new WebSocket('ws://ws.domain.com',[protocal]); 属性// readyState 连接状态 if(ws.readyState == 0){} // 连接未建立...
2018-11-29 10:22:16
138
原创 CSS3：animation
CSS3 animation简写属性：#test { animation: test 2s linear 1s 1 normal; -webkit-animation: test 2s linear 1s 1 normal;}展开属性：#test { /*动画所使用的 keyframe 名称*/ animation-name: test; /*动画时长*/ ...
2018-11-28 18:21:19
1199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人