- 博客(80)
- 收藏
- 关注
RSS订阅原创 （二叉）树的遍历
树，包括图，在遍历时都存在两种方式：深度优先遍历和广度优先遍历。树，一定有一个根节点，而图，没有根节点，但图中的任意节点都可以作为根节点使用（当然该节点一定要有边，否则没有意义）深度优先遍历访问当前节点将当前节点的children作为子树的根节点递归访问使用递归的方式// 传入树的根节点，开始深度优先遍历function dfs(root) { // 访问节点数据 console.log(root.val); if (root.children.length > 0) {
2021-06-11 18:31:00
226
1
原创 JavaScript数组拍平（扁平化）
数组扁平化指的是将多维数组转换为一维数组，实现的思路包含以下几种：拼接＋递归拼接指的是新建一个空数组作为结果数组，将原数组进行分析变换后拼接到新数组上，最终返回新数组。递归指的是由于不知道多维数组嵌套有多少层，所以对原数组采用递归的分析方式来解决。通用的方式function flatten(arr) { let result = []; // 遍历数组元素，查看元素是否为数组类型 for (let i = 0; i < arr.length; i ++) { if (A
2021-06-09 21:39:18
453
原创 浏览器使用video播放m3u8类的直播流媒体
关于m3u8文件格式描述m3u8 是一种基于 HTTP Live Streaming 视频流媒体格式。m3u8文件本身是一个纯文本文件，用于存放整个视频的基本信息和分片(Segment)组成。由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持，浏览器目前可以通过<video src="./test.m3u8" type="application/x-mpegURL">来播放。生成使用ffmpeg工具对mp4格式的视频进行基于hls协议分割可以得到m
2021-03-09 14:14:12
7710
原创 Next.js基本使用
Next.js创建项目使用命令 npm init next-app [your app name]页面路由系统创建页面：页面：放置在pages文件夹中的React组件，需要被默认导出组件文件中不需要手动引入React页面的URL地址与文件地址一一对应页面跳转Link组件：默认使用JavaScript进行跳转，即SPA形式，如果禁用了JavaScript，则使用<a>进行跳转引入：import Link from 'next/link'
2021-03-04 15:13:00
2260
1
原创 简易的打包器--webpack打包原理
手写一个简单的类似webpack的打包器打包流程说明：定义依赖分析函数，通过读取文件内容，分析得到该文件导入的依赖项code => AST => 得到导入声明,记录导入声明中的依赖项路径 => AST->code => 返回记录当前文件filename、依赖项dependencies和转译后的code的对象定义分析依赖图列表的函数，传入项目的入口文件，递归调用依赖分析函数，得到所有文件的依赖关系图列表，返回该列表。核心在于如何递归调用依赖分析函数，这里使用广
2021-02-23 20:39:53
301
2
原创 封装Vue组件库
封装Vue组件组件库开发很多项目都会用到界面和功能相似的组件，为了能在不同项目中最大程度重用组件，所以会进行组件库开发，以提供不同项目基础的组件开源组件库Element-UIiView组件驱动开发CDDComponent-Driven Development自下而上构建UI从组件开始，到页面结束：先隔离开发组件，再组合成页面组件最大程度重用并行开发可视化测试组件边界情况的处理组件可以访问$root属性，获取到当前组件树的根Vue实例，如果当前组件没有父实
2020-12-10 20:53:45
1205
原创 安装sharp包的注意事项
sharp包是基于node.js的高性能图片处理器在使用npm安装sharp的时候，需要注意以下问题使用镜像地址：npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"npm config set sharp_libvips_binary_host "https://npm.taobao.org/mirrors/sharp-libvips"提前下载好sharp某版本号对应的libvips依赖包，放在np
2020-11-11 17:14:02
3655
2
原创 配置命令行启动应用程序
场景需求在命令行中启动应用程序是常见的需求，输入一个命令和路径，就可以在输入的路径下启动对应的应用程序，这样的方式很方便，免得去点击应用程序图标才能打开，类似于vscode的code命令。方法以下方式都针对Mac OS系统终端输入的命令会在$PATH环境变量下寻找，$PATH包含了几个目录，通常选择/usr/local/bin目录来存放新增的命令。方式一将应用程序的可执行文件链接到usr/local/bin目录下，这里以CocosCreator应用程序为例。打开Application目录，找
2020-11-05 20:52:55
775
原创 为其他仓库托管平台添加密钥
一般而言，除了在GitHub仓库外，很多公司习惯在GitLab上托管代码。因此，开发者通常会有多个密钥，分别为多个托管平台使用。参考资料生成新 SSH 密钥并添加到 ssh-agent生成密钥对使用如下命令生成一个SSH 密钥对ssh-keygen -t rsa -b 4096 -C "[email protected]"其中，- C标志是为了在密钥中添加注释，从而可以在众多的密钥中识别该密钥。输入密钥对的保存路径。如果不使用默认的路径（通常是~/.ssh/），则需要自定义路径，
2020-09-17 15:16:51
174
原创 服务端渲染SSR的原理与部署
SPA单页应用缺点首屏渲染时间长不利于SEO服务端渲染服务端执行前端框架代码，生成网页内容，返回客户端，客户端激活为SPA。现代化服务端渲染，或称为同构渲染，应用称为服务端渲染应用或同构应用什么是渲染把数据和模板拼接为完整的HTML文件传统服务端渲染数据渲染发生在服务端前后端耦合，不利于维护服务端压力大页面请求的数据量大，但模板中大多数字符都是多余的客户端渲染数据渲染发生在客户端首屏渲染慢：相比于服务端渲染且不带JavaScript脚本的情况加载JavaSc
2020-08-11 13:21:05
1104
原创 Vuex原理解读
组件内的状态管理状态管理流程状态管理state：驱动应用的数据源view：声明方式将state映射到视图actions：响应在view上的用户输入，导致的状态变化单向数据流组件之间通信方式父组件给子组件传值子组件中通过声明props来接收数据父组件通过相应属性给子组件传值子组件给父组件传值父组件监听自定义事件子组件使用$emit()触发自定义事件，抛出值（内联代码可以用$event拿到该值）不相关的组件传值使用自定义事件传值不相关的组件没有父子关系，所以需要一
2020-08-04 16:34:03
257
原创 webpack的tree-shaking
先来看tree-shaking的几种使用情况情况一// ./common/util.jsimport lodash from 'lodash-es';var func1 = function(v) { alert('111');}var func2 = function(v) { return v;};export { func1, func2}// ./index.jsimport { func2 } from '../common/util';var a
2020-08-03 21:05:22
468
原创 Vue源码解读
Vue的不同构建版本对于Vue的不同构建版本，以下图说明有min后缀的是生产版本，其他是开发版本Full表示完整版，同时包含编译器和运行时编译器：将模板字符串编译为JavaScript渲染函数的代码，即template => h()，体积大（3000多行），效率低运行时：用来创建Vue实例，渲染并处理虚拟DOM等代码，不包含编译器，体积小，效率高Runtime-only是运行时版本，不包含编译器UMD：通用模块化版本，支持多种模块方式，可以在浏览器环境下直接运行（挂载到wind
2020-07-31 14:43:29
375
原创 浏览器网络与安全
HTTP协议HTTP/0.9只有一个请求行，并没有 HTTP 请求头和请求体，因为只需要一个请求行就可以完整表达客户端的需求了。服务器也没有返回头信息，这是因为服务器端并不需要告诉客户端太多信息，只需要返回数据就可以了。返回的文件内容是以 ASCII 字符流来传输的，因为都是 HTML 格式的文件，所以使用 ASCII 字节码来传输是最合适的。HTTP/1.0支持多种类型的文件下载是 HTTP/1.0 的一个核心诉求增加了请求头和响应头来支持多种不同类型的数据首先，浏览器需要知道
2020-07-29 14:21:06
791
原创 浏览器页面的事件循环系统
概述由于浏览器页面的渲染进程的主线程要执行很多任务，如DOM构建、样式计算、布局计算、绘制、JavaScript执行、接收输入事件等，并且这些任务因为需要交互性来不断产生，无法事先安排，因此需要一个任务调度系统来统筹规划这些任务的执行。在浏览器中，统筹调度任务的系统就是事件循环系统（Event-Loop）事件与循环事件循环系统在于事件和循环这两个概念事件：接收外部的输入事件，产生任务循环：线程执行完任务后并不退出，而是循环等待输入事件产生的任务并执行其实这两个概念使用ES6的generator函
2020-07-27 15:28:13
347
原创 浏览器中的JavaScript执行机制
执行上下文变量提升在JavaScript代码执行时，JavaScript引擎把变量和函数的声明提升到代码开头的“行为”，提升后的变量会设置默认值undefined，函数声明是有值的。变量提升发生在JavaScript的编译阶段。JavaScript的执行流程JavaScript代码会经过编译后再执行编译阶段生成执行上下文生成可执行代码执行上下文之环境变量JavaScript执行一段代码时的运行环境，保存代码执行时的变量环境、词法环境、外部执行上下文outer和this。比如调用函
2020-07-26 12:43:32
522
原创 浏览器架构、渲染原理与页面优化
注：以下内容来自于极客时间李兵老师的《浏览器工作原理与实践》课程总结浏览器架构多进程架构概述现代浏览器采用多进程架构的模式，一般而言，一个页面会是一个渲染进程（可能存在同一站点same-site多页面复用同一个渲染进程的情况），另外，还有浏览器的主进程、GPU进程、网络进程、插件进程等等。如下图各个进程的功能主进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blin
2020-07-24 15:23:20
604
1
原创 Vue虚拟DOM原理与snabbdom
虚拟DOMJavaScript对象描述真实DOM真实DOM的属性很多，创建DOM节点开销很大虚拟DOM只是普通JavaScript对象，描述属性并不需要很多，创建开销很小手动操作DOM很难跟踪以前的DOM状态，而虚拟DOM可以跟踪上一次状态，维护程序的状态信息。虚拟DOM的作用维护视图与状态的关系复杂视图情况下，可以提升渲染性能还可以实现跨平台渲染，如SSR、原生应用、小程序等虚拟DOM开源库Snabbdomvirtual-domSnabbdom基本使用snabbdo
2020-07-21 23:05:15
319
原创 Vue响应式原理与模拟
Vue数据响应式原理：数据劫持（拦截）、观察者模式Vue2: getter和setterVue3: Proxy通信模式发布订阅模式事件中心，提供发布事件（emit方法）和订阅事件（on）的接口，是发布订阅模式的核心，作为事件和事件处理函数的仓库。订阅者：使用事件中心的订阅接口来订阅某种类型的事件，待事件发布时，会调用事件处理函数发布者：使用事件中心的发布接口来发布某种类型的事件，触发事件处理函数的调用观察者模式：Vue的响应式机制观察者（订阅者）：watcher拥有一个up
2020-07-20 20:47:15
214
原创 Vue-Router核心原理实现
vue-router基本使用配置路由文件// 路由配置文件router/index.js// 导入vue和vue-routerimport Vue from 'vue'import VueRouter from 'vue-router'// 导入首页视图文件import Index from '../views/Index.vue'// 注册路由插件// Vue.use()用来注册插件，会调用传入对象的install方法Vue.use(VueRouter)// 定义路由规则，即
2020-07-17 21:50:50
514
原创 前端工程化之规范化
为什么要有规范标准开发需要多人协同开发者不同的编码喜好统一标准，降低维护成本哪里需要规范化标准代码、文档、日志开发过程中的人为成果代码标准化决定项目质量，最为重要如何实施规范化人为的标准约定通过工具实现LintESLint安装安装：npm install eslint -D，安装后就会在node_modules/.bin/下有一个CLI程序。使用先配置，再检查使用eslint --init生成配置文件，可以是JavaScript，也可以是JSON文件。使用npx
2020-07-14 20:22:45
527
原创 JavaScript打包之Rollup和Parcel
Rollup：打包ESM主要面向打包JavaScript类库。使用方法安装npm install rollup -D，同时在node_modules/.bin/目录下会安装有CLI程序。使用npx rollup <entry file> --format <module type> --file <output file>来对指定的入口文件进行打包，其中–format后面的<module type>指定打包后的模块遵循的模块规范（如iife – 立即
2020-07-14 11:00:39
334
原创 JavaScript打包之Webpack
打包：从开发到生产解决ES Module的浏览器兼容问题，编译ES6+到ES5解决模块请求频繁的问题，模块打包成一个文件资源都需要模块化，管理所有资源的依赖关系，便于业务代码与相关资源的统一维护打包工具作用：使用模块化为开发环境提供便利，使用打包为生产环境提供效率。Webpack：打包所有资源webpack的执行是node环境，因此相对路径必须要用./开头，不能省略。配置文件webpack会运行配置文件，拿到配置文件导出的配置对象，有多种导出配置对象的方式直接导出配置对象modul
2020-07-13 22:48:23
843
原创 JavaScript模块化概述
模块化演进阶段一：文件即模块，使用<script>标签引入污染全局作用域命名冲突无法管理模块依赖关系阶段二：命名空间方式，文件暴露一个全局对象，所有方法挂载到全局对象上形成命名空间缓解命名冲突，但无法避免没有私有属性，从而无法避免出现私有属性值被不小心更改的情况依赖关系仍然无法管理阶段三：IIFE立即执行函数表达式，可以给全局对象上挂载属性来暴露接口，也可以返回一个对象来暴露接口。私有成员得到保证通过IIFE传递参数，可以在一定意义上管理依赖关系。如;(fun
2020-07-10 15:57:31
156
原创 前端工程化之自动化构建
自动化构建源代码自动转换为生产环境代码NPM Scripts脚本实现自动化利用npm scripts脚本实现自动化，npm scripts原理参照阮一峰老师博客钩子机制实现构建流：pre-<name>：该命令在name命令之前先启动post-<name>：该命令在name命令之后才启动npm-run-all模块：同时并行执行多个脚本命令，如npm-p build serve同时启动build和serve脚本命令常用自动化构建工具gulp：基于虚拟文件对象
2020-07-07 11:55:50
443
原创 npm包安装与npm link
npm包安装的两种方式全局安装npm install <package-name> -g意义：将安装的包作为一个命令行工具，在任意目录下都可以访问调用安装路径：默认安装在 /usr/local/lib/node_modules下，可以通过配置安装到其他路径下。如通过nvm（node版本管理工具）可以配置到对应的node版本下面局部安装npm install <package-name>意义：在当前目录下，使用require语句加载安装路径：在当前目录下的node
2020-07-06 12:50:25
1541
原创 前端工程化之脚手架工具
脚手架工具常用脚手架工具React项目create-react-appVue项目vue-cliAngular项目angular-cliYeoman通用型脚手架工具Plop创建一个组件/模块所需要的文件（类似于Yeoman的sub-generator）Yeoman基本使用全局安装yeoman：npm install yo -g全局安装generator：安装项目对应的generator包，让yeoman运行generator包来创建项目基本结构。yeoman + generator包
2020-07-04 11:16:20
421
原创 JavaScript语言层面的优化
JavaScript优化内存管理高级语言自带垃圾回收机制如果不注意内存管理，可能会导致内存泄漏问题。内存管理：开发者主动申请空间、使用空间和释放空间。JavaScript中并未提供相应的API，由执行引擎根据语言来执行内存管理操作。申请空间let obj = {};使用空间obj.name = 'foo';释放空间obj = null;垃圾回收与常见GC算法垃圾回收程序执行时，会阻塞JavaScript的执行。两种对垃圾的判断：对象不再被引用时，称为垃圾对象不能从根上访问
2020-06-30 21:00:11
188
原创 JavaScript相关的类型注解系统
TypeScrip类型系统强类型与弱类型（类型安全方面）非权威机构的定义强类型函数的实参与形参的类型必须相同类型约束不允许隐式类型转换弱类型函数的实参与形参的类型在语法上不必相同类型上约束少允许任意的数据隐式类型转换JavaScript的TypeError是在运行时通过逻辑判断抛出的，而不是编译时就会抛出。静态类型与动态类型（类型检查方面）静态类型变量在声明时类型就是明确的，且声明后变量的类型不允许再修改通俗地说，静态表示的是看一眼就知道是什么动态类型变量在
2020-06-29 22:43:50
1499
原创 ES2015新特性
ECMAScript概述JavaScript = ECMAScript + 运行环境的API其中，运行环境包括浏览器和Node环境ES2015（ES6来泛指ES2015之后的新标准）新特性解决原有用语法上的不足let、const与块级作用域let、const声明的变量只在{}包裹的块级作用域内有效// 将会打印出三次foo;for(let i = 0; i < 3; i ++) { let i = 'foo'; console.log(i);}// 这段代码相当于如下
2020-06-28 17:58:40
710
原创 ES6中的Promise实现原理
Promise规范要点Promise是一个类，接收一个函数作为参数，该函数称为执行器，创建Promise对象时，执行器会立刻执行；Promise有三种状态，分别为pending等待、fulfilled成功、rejected失败；其中pending会转换为fulfilled或者rejected，一旦状态更新，则无法再更新状态；执行器函数接收两个参数，分别为resolve函数和reject函数，用于更新Promise对象的状态then()方法内部需要判断状态，状态成功则调用onFulfilled函数，
2020-06-20 20:40:07
859
原创 JavaScript的函数式编程简介
函数式编程的优点React的推广、Vue3开始采用可以抛弃模拟面向对象编程的this打包时，利用sideEffects来过滤副作用代码方便测试，并行处理lodash、underscore、ramda等库帮助开发函数式编程的概念编程范式，对运算过程的抽象，将程序的本质（输入通过运算得到输出的过程）进行进一步的抽象，把运算过程中各种运算进行更加细粒度的划分为各种各样的函数，然后用函数的组合方式来抽象得到整个运算。这样有利于复用代码，灵活组合出不同的运算过程。函数一词指的是数学中的函数定义，即
2020-06-19 16:39:25
254
原创 从matrix变换函数矩阵来说明CSS Transform的原理和操作
文章以二维变换为例说明，三维变换采用类似的操作理解即可。变换的坐标系统默认的变换坐标系统，变换原点为元素中心，x轴与y轴与web中定义的一致。其中，变换原点可以用transform-origin属性来设置。transform是以该坐标系统为参考，对变换中图形上每个点的坐标进行更新，来得到变换后的图形。i→= ai→+bj→\overrightarrow{i} =\ a\overrightarrow{i} +b\overrightarrow{j} i= ai+bj线性变换线性变
2020-05-11 19:30:35
359
原创 button元素被点击后自动获得焦点
元素在被鼠标点击后，会自动获得焦点，此时如果按下enter键，就会触发元素的click事件。但是元素如果是用Tab键获得焦点后按下enter，则只会触发一次click，然后就失去焦点，再按下enter键并不会触发click事件。因此，如果要避免鼠标单击获得焦点的情况，要在click事件回调里设置失去焦点行为，这样就不会出现按下enter触发click的情况了。表单元素很可能都有这类特性，鼠标单击获...
2020-04-11 15:43:18
1933
原创 CSS经典布局——sticky footer粘滞页脚
简述sticky footer粘滞页脚布局是经常使用的CSS经典布局之一，其表现形式是：页脚始终在视口的底部，不管是内容区内容较少不足以占据视口高度，还是内容区内容很多超过视口高度导致出现滚动条，页脚都处于视口的底部，并且不会遮住内容。表现形式内容区内容不多内容区内容很多HTML代码与CSS代码<!DOCTYPE html><html lang="en">...
2020-04-03 18:41:39
426
原创 HTML编码、innerHTML、innerText与URL编码
HTML编码字符集为了让浏览器知道页面应该显示什么，必须要给页面一个明确的字符集用于浏览器编码解码。通常，我们都用utf-8字符集。如<meta charset="UTF-8">来指定页面所用的字符集。这样一来，浏览器可以根据utf-8字符集来显示内容。点击这里先展示一下HTML特殊字符与字符实体对照表。浏览器对HTML标签内的特殊字符解析时，为什么直接写特殊字符也行，写特殊字符...
2020-02-29 22:14:23
554
原创 JavaScript设计模式——单例模式
本文由《JavaScript设计模式与开发实践》–曾探著总结而来。应用场景某个作用域内（如全局作用域）只需要一个具备功能的对象。例如全局的window，登录框等等。总之，就是在顶级的作用域中用来掌控顶级信息的对象。这样的对象是唯一的，适合用单例模式来创建。创建方式思路：包括两点，首先要创建这样的对象。创建对象可以用ES6语法中的类（或ES5的构造函数），通过new 类名()来创建，也可...
2020-02-26 16:16:25
577
原创 npm安装Electron 7.x以上版本的方法
在国内安装Electron 7版本时常常会在安装electron的时候卡在npm install.js不动，因此需要对npm做如下配置registry=https://registry.npm.taobao.orgsass_binary_site=https://npm.taobao.org/mirrors/node-sass/phantomjs_cdnurl=http://npm.taob...
2020-01-23 18:49:48
1224
2
原创 nodemon--node.js工程自动热启动构建工具
在用node写应用时，常常会遇到更改代码后要重启项目来观察更改后的效果，手动重启费时费力，利用nodemon包来实现自动热重启，设定监视的文件或文件路径，发生更改后执行重启命令，这样就避免了手动反复重启的繁琐，加快项目的开发速度。...
2019-12-13 19:15:53
239
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人