Nolan's Blog

利用 whistle 进行移动端调试

HOC、render props、 hooks

为什么要有 whistle？ 移动端网页是无法查看网络请求的，而且也没 console 控制台输出一些信息； 步骤 手机和 pc 端在同一网络环境下，通过 ifconfig grep inet 命令找到内网 ip 在手机端 wifi 配置代理（pc 端的地址 + whsitle 的端口号 8899 ） 在手机端安装...

Posted by nolan on April 30, 2020

多包管理利器lerna

多包管理利器lerna

今天在接触团队的一个新项目时，接触了一个多包管理利器，名叫 lerna。他优化了 git 和 npm 管理多包的工作流，包括更改多包版本号，以及自动在 git 中打 tag。 目前，vue,babel,react 等都在用。 链接 官方文档 参考中文博客 两种模式 Fixed/Locked mode (default) vue,babel 都是用这种，在 publish 的时候...

Posted by nolan on April 20, 2020

MySQL 常用命令

mysql 连接、数据库操作、数据库数据操作、数据库表字段操作

mysql 操作 mysql 服务启动 mysql.server start Mysql 连接 本地数据库连接 mysql -u root -p yourpassword 远程数据库连接 mysq...

Posted by nolan on April 13, 2020

React源码解读之创建更新

React源码解读之创建更新

创建更新的方式 render / hydrate setState/forceUpdate ReactDom.render 首先会创建 ReactRoot 对象，然后调用他的 render 方法 创建 ReactRoot 的时候会调用 DOMRenderer.createContainer 创建 FiberRoot，在后期调度更新的过程中这个节点非常重要 FiberRo...

Posted by nolan on March 18, 2020

React源码解读之packages_react.md

React源码解读之packages_react

React 代码主要逻辑都是在 Packages 这个文件夹下，今天我们来解读下这个文件夹下的 React 目录。 React 位置 react.js 输出接口 export { Children, createRef, Component, PureComponent, createContext, forwardRef, lazy, me...

Posted by nolan on March 17, 2020

浏览器的渲染过程

dom 树的构建、样式计算、布局、分层、栅格化、重绘、重排

HTML 构建 DOM 树 浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换成浏览器能理解 的结构 - Dom 树。输入 document 可以查看 Dom 树。 CSS 样式计算 1.把 css 转成浏览器可理解的样式表 styleSheets; 输入 document.styleSheets 可以查看。 ...

Posted by nolan on March 13, 2020

HTTPS

https 原理及加解密过程

原理 服务器给客户端颁发一个证书，客户端发送请求前，用证书做加密，到达服务器后，服务器用根证书解密。 密码学相关概念 密钥 通常是一个字符串或数字，进行加密/解密算法时使用。 公钥和私钥都是密钥，只不过一般公钥是对外开放的，加密时使用；私钥是不公开的，解密时使用。 非对称加密 使用公钥加密，在客户端与服务器相互验证的过程中用的就是非对称加密算法。 有 RSA、DSA/DSS、...

Posted by nolan on March 10, 2020

DNS

相关概念、工具、解析过程

从实习就开始在做域名和 dns 的前端工作，今天整理下 DNS 相关的知识； 相关概念 域名分层 根域 顶级域 二级域 三级域 权威 DNS 服务器 保存着域名和 dns 解析关系数据的服务器； 递归 DNS 服务器 去 root NameServer、top-level NameServer、second-level nameserver 去递...

Posted by nolan on March 4, 2020

axios 笔记

axios api、特性、demo

最近的 axios 比较流行，而项目中还是用传统的 ajax 请求，正好有个新项目需要从零开始，准备在新项目中引入 axios，所以私下里先学习一下。 概述 axios 是一个 http 请求库，有以下特点： 跨平台：可以在浏览器端和 node 端同时使用，浏览器端基于 xhr，node 端基于 http 天然支持 promise 更多的 api ： 取消请求、请...

Posted by nolan on March 3, 2020

移动端适配

流式布局、响应式、viewport、rem

为什么要做移动端适配？ 在企业生产中，设计师往往会以 640px 的标准尺寸输出视觉稿，但是实际设备宽度不一定是 640px，所以如果只按照视觉稿标注的 px 去实现，就会出现不同宽度设备下的大小样式问题。 适配方案 流式布局 流式布局通常会通过百分比来定义宽度，通过固定 px 值设置高度，大屏幕下有些元素宽度被拉的很长，但高度不变，所以会出现拉伸的情况。 固定宽度 有些项目为了...

Posted by nolan on February 26, 2020

FEATURED TAGS
FE js 算法 FullStack ts nodejs 工具 杂谈
ABOUT ME

格物致知，长期主义

wechat： RedNolan

✉️ 545921090@qq.com