w-t-w/w-t-w.github.io

w-t-w.github.io's Issues

javascript outline | wtw's Frontend

https://white-than-wood.zone/2022/10/25/javascript-outline/

var 变量提升 重复声明 全局作用域绑定 let、const 不再拥有 var 的缺陷特性 TDZ(临时死区) 块级作用域绑定 let 变量声明 const 常量声明 优先声明最佳实践 字符串 utf-8

think of tapable | wtw's Frontend

https://white-than-wood.zone/2022/10/15/think-of-tapable/#more

Tapable 什么是 Tapable 简单来说,类似于 EventEmitter 的一种发布订阅模式,也就是观察者模式,但不同的是,Tapable 的流程以及应用场景要广泛复杂的多.Tapable 作为 Webpack 的主要骨架而流行,因此也受到前端开发爱好者的研究. 订阅模式类型 —— Hook 在 Tapable 中订阅模式类型被称为 Hook,也就是 “钩子”,基本分为四种

daily problems | wtw's Frontend

https://white-than-wood.zone/2022/08/30/daily-problems/

npm npm run scripts 为何 npm 执行 package.json 中的 scripts 命令时,即使全局环境变量下不存在的脚本命令也能执行? 解: 首先 npm run package.json 中的 scripts 脚本命令时,会新建一个 shell 脚本,并将 scripts 中的脚本命令放入其中执行,因此 shell 命令(一般是 bash)完全可以执行;其次,

create Simplepack | wtw's Frontend

https://white-than-wood.zone/2022/10/14/create-simplepack/#more

create Simplepack搭建一个简易的 webpack —— Simplepack. 配置文件 12345678910111213141516// simplepack.config.jsconst {resolve} = require('path');const OUTPUT_DIR = resolve(process.cwd(), &#x

hexo next | wtw's Frontend

https://white-than-wood.zone/2022/08/30/hexo-next/?

引言此博客用于搭建 hexo next 主题的字典工具类博客.基本不会探索深究配置的原因,敬请知悉~ hexo 安装 步骤 首先要用 npm 资源依赖管理工具安装全局命令 hexo-cli. npm install hexo-cli -g 然后使用 hexo 初始化博客目录,比如 blog 目录,目录名要与后续个人建立的 github 上 hexo 托管代码的 repository 库同名.

unresolved problems | wtw's Frontend

https://white-than-wood.zone/2022/09/20/unresolved-problems/

前端领域内所不知道的都探索于此!

think of react | wtw's Frontend

https://white-than-wood.zone/2022/11/17/think-of-react/

react特性 数据驱动 JSX 语法糖动态声明更加灵活 Virtual DOM 与 Diff 算法配合使用,可保证性能 基于 class 生命周期 创建阶段 constructor: 初始化 getDerivedStateFromProps: 合并组件外的 props 至组件内 state,不推荐使用 render: react 组件内唯一的描述 UI 的方法,必须设置 componentDi

think of v8 | wtw's Frontend

https://white-than-wood.zone/2022/11/22/think-of-v8/

v8 垃圾回收机制 使用分代回收策略,分为新、老生代. 新生代: 新生代的堆内存被分为多个 Semispace,每个 Semispace 分为两部分 from 和 to,分配对象空间时,只在 from 中分配,to 是闲置的,垃圾回收机制会按照以下步骤: 查找 from 中还存活的对象,将其全部移入到 to 反转 from 和 to 对 to 尽数回收 新生代 -> 老生代 新生

think of webpack | wtw's Frontend

https://white-than-wood.zone/2022/08/30/think-of-webpack/

webpackentry 属性值 为何设置 entry 的属性值必须为相对路径,而绝对路径却会报错? 解: entry 是 webpack 构建打包的入口,是搜索全局资源的起点,它的属性值是设置为相对于整个项目而言的,也就是当前项目根目录,在 webpack context 属性不变的情况下, entry 属性值永远相对于当前项目根目录,当然如若 context 属性发生改变,entry

think of nodejs | wtw's Frontend

https://white-than-wood.zone/2022/08/30/think-of-nodejs/

npmbrowserslist 作用 用于编译转化样式文件以兼容浏览器的对于各类浏览器版本的筛选. 分类 [“>0.2%”]: 指的是现阶段的用户比例>0.2%的所有浏览器版本. [“last 2 versions”]: 指的是现阶段所有浏览器最近发布的两个版本. [“not dead”]: 指的是现阶段没有被删除销毁的所有浏览器版本. [“defaults”]:

think of algorithm | wtw's Frontend

https://white-than-wood.zone/2022/11/26/think-of-algorithm/

算法排序 冒泡排序 1234567891011121314function bubbleSort(array) { const result = [...array], length = result.length; for (let i = 0; i < length; i++) { for (let j = 0; j <

think of browser | wtw's Frontend

https://white-than-wood.zone/2022/11/24/think-of-browser/

browserprocess 分析 浏览器的进程 浏览器进程 渲染进程 GUI 线程: 用于处理解析渲染 html、css JS 线程: 也就是程序员所说的所谓 “JS 单线程” 定时器线程: 处理定时器(setTimeout、setInterval),将符合条件的回调事件移入至事件触发线程 事件触发线程: Event Loop 事件循环执行机制 异步 HTTP 请求线程: 处理 http 请

think of javascript | wtw's Frontend

https://white-than-wood.zone/2022/11/22/think-of-javascript/

jscompose ES5 12345678function compose() { var args = Array.prototype.slice.call(arguments); return function (x) { return args.reduceRight(function (a, b) { ret

think of css | wtw's Frontend

https://white-than-wood.zone/2022/11/21/think-of-css/#more

css水平居中对于父子关系的布局，如何让子元素居中就是一个课题~ text-align + inline-block 1234567 .parent { text-align: center;}.children { display: inline-block;} absolute + transform(translate)