- 博客(222)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端面试常问--计算机网络--HTTP3
在前端面试中，除了最为重要的JavaScript知识外，计算机网络和操作系统也是尤为重要的（html和css还算比较简单的），而计算机网络中http协议是经常被问到的内容，包括常见的状态码，常见的头部字段，握手过程等等，而这里要说的是其中一个常问的问题，http版本在之前我已经写过一篇http版本相关的博客HTTP基本学习与演变中（HTTP/0.9，HTTP/1.0，HTTP/1.1，HTTP/2.0，HTTPS）的比较，但里面并没有包含HTTP3，所以这里额外写了个HTTP3的内容实际上在之前我也没在
2020-11-03 20:51:22
923
原创 前端面试常问--计算机网络--网络攻击XSS与CSRF
XSS（Cross Site Scripting）XSS攻击全称跨站脚本攻击，之所以首字母是X，是为了区别于层叠样式表CSS使用cookie，localStorage，sessionStorage时要注意是否有代码存在XSS注入的风险，攻击者在有XSS缺陷的页面会窃取用户的对应信息XSS注入的方法XSS注入实际上就是通过页面设计时的缺陷，利用浏览器对于某处代码的解析，让浏览器去执行恶意代码在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。在内联的 JavaScript 中，
2020-11-02 17:25:39
1159
原创 vite学习之路（一）初识vite，vite的使用与工作机制
最近闲下来后开始整理之前的知识了，早在vue3.0正式出来之前，尤大就已经提到了做了一个新的web应用开发工具vite解下来的几篇文章我会对vite的使用，到与webpack（其实应该是webpack-dev-server，后面会解释为什么）的比较，以及源码解析，简单地实现vite部分功能来写，欢迎大家在评论区提出各种建议问题那么话不多说，开始vite学习之路vite是什么首先，vite为什么叫做vite，vite实际上是法语中快的意思，所以顾名思义，这个工具给我们带来的就是更快的开发体验，它实际上
2020-10-31 23:04:27
29644
6
原创 前端面试手撕代码小集合（仍在补充中）
上岸半个月，开始回来学习写博客，先看了之前自己写的面经，决定先把一些常见的题目总结出来（以下皆为面试bat字节时遇到的题目）这里直接上代码，测试有问题的欢迎各位在评论区指出，注释看不懂其中代码也欢迎提出问题实现promise的APIPromise.all参数：数组返回：一个promise对象功能：该方法接受一个数组作为参数，数组成员为Promise对象，若不是Promise对象，则先使用Promise.resolve方法变为对象。而事实上，数组参数中的每个值都会经过Promise.resol
2020-10-31 10:03:00
479
原创 vue中修改数组内容视图没有发生更新问题源码解析
改变数组长度无法触发视图更新在vue中，我们可能会有这种情况，修改了数组的长度，但是视图没有发生更新<template> <div id="app"> <div v-for="(item,index) in arr" :key="index"> {{index}}:{{item}} </div> <button @click="click">btn</button> <
2020-09-13 14:32:26
1675
原创 Electron开发笔记----前端小白开发桌面应用之路（四）桌面应用中的跳转
桌面应用中跳转浏览器链接在桌面应用中，我们打开一个链接，有几种不同的情况1. 直接在应用中跳转到该链接地址当我们在Electron.js写的桌面应用中写入一个a标签来做跳转时，如下<a href="https://www.baidu.com">跳转</a>点击这个跳转时，会发现并不是在浏览器中实现跳转，而是在electron应用中打开了这个页面，如下图2. 在浏览器中打开链接地址我们有时需要通过浏览器去打开一个链接，像vscode里面，就有当我们写的是一个页面的地址
2020-08-16 13:36:19
2186
原创 Electron开发笔记----前端小白开发桌面应用之路（三）顶部菜单和右键菜单的创建
顶部菜单的编辑桌面应用的菜单是我们很常用的一个功能，大到各种应用，小到一个小小的记事本，都有自己的菜单，那么接下来就看看如何实现一个菜单传入模板生成菜单Electron提供了一个模块Menu来实现菜单功能，我们直接通过一个demo来演示首先创建如图的目录这里menu文件夹下的menu.js是用来写菜单的信息，包括菜单的内容，以及菜单的点击事件触发的回调，这里实际上是在主进程中调用的，但是为了可以区分功能和复用，我写在menu.js中，并在主进程中require它主进程index.jscon
2020-08-01 13:46:19
1032
原创 Electron开发笔记----前端小白开发桌面应用之路（二）文件的读写和新窗口的创建
在本系列的上一篇文章中，我们谈到了如何去搭建一个简单的hello wordl桌面应用，那么这篇文章，来谈谈几个我们在桌面应用中常用的功能文件的读写对于一个桌面应用来说，很多信息都会保存在本地的文件，在我们使用该应用时，读取本地对应的文件，去显示不同的内容这类似于我们在使用web端时，需要去从服务端读取我们想要的配置文件等信息，将信息以各种形式渲染到页面上。对于桌面应用来说，设置一般都是保存在本地的，我们可以将桌面应用读取本地的文件，和web端发起请求的行为对比，其实原理都是一样的。而这里的读写，我们
2020-07-29 11:08:20
1096
原创 Electron开发笔记----前端小白开发桌面应用之路（一）聊聊Electron和我的第一个Electron应用
ElectronElectron.js是什么，如果你想使用你的前端知识，去开发一个桌面应用，那么你应该会了解到Electron或者是nw，而这两者之间的区别，我在这里就不展开说了，这里主要要说的是Electron.jsElectron是在2013年为了开发Github上可编程的文本编辑器Atom的框架而开发出来的一、为什么会有Electron首先，在学习Electron.js之前，我们先来聊聊，为什么会有Electron这种东西以下为我的个人观点：我个人觉得，Electron这类框架的出现，是
2020-07-26 13:59:04
1453
原创 windows apache下php环境的搭建
一、 软件下载链接apache：https://www.apachelounge.com/download/php：https://windows.php.net/download二、 安装软件根据电脑版本到上面的链接安装，然后解压到本地磁盘，存放路径最好不要有中文名，不然可能会报错以win64为例apache下载版本为apache解压内容如下php下载版本为php解压内容如下三、 配置php在php根目录找到php.ini-development文件，改名为php.ini，然
2020-06-18 10:47:35
385
原创 从node.js的文件监听到webpack的热编译实现
我们知道，webpack可以通过配置实现热更新，让我们在编写代码时不需要手动去执行一些编译命令，而是在保存的时候就可以自动更新视图，那么这些功能是怎么做到的呢首先，我们分解一下要做的事情，我们需要去监听文件的更新，当文件更新时，去修改对应的视图部分，那么，我们先看看如何去监听文件的更新node.js实现监听文件更新使用node.js实现监听文件更新，既然是和文件有关，那么盲猜fs中可能有相关的API。对于文件的监听，fs提供了两个API，watch和watchFile，这两个API最简单的区别，在于
2020-05-27 15:36:27
676
2
原创 透过V8深入理解JavaScript的函数
函数什么是函数在JavaScript中，函数其实也是一个对象，所以函数也可以有自己的属性和值，它与对象不同的地方在于，它可以被执行，执行时会创建函数作用域。V8如何去执行函数我们知道，在执行函数的时候，我们只需要在函数名后面，加上一个括号，在括号里传入参数，就可以执行这个函数了，但是，V8是怎么做到执行这个函数的，V8如何找到这个函数的相关代码既然函数是一个对象，那么它就有自己的属性，除了我们给它添加的属性，函数本身有两个属性，分别是name和code。name属性存储着函数的名字，而code以
2020-05-18 12:12:35
519
原创 透过V8深入理解JavaScript的对象
我们知道，V8是Chrome用来编译执行JavaScript的JavaScript引擎，所以如果我们要了解JavaScript，那么结合V8能让我们更好地理解，这篇博客将结合V8，来谈谈JavaScript种的对象对象什么是JavaScript的对象什么是JavaScript的对象， JavaScript中的对象，并不是单单指Object，JavaScript这门语言本身，是基于对象的，可以说，JavaScript里面的大部分内容，都是由对象构成的。比如函数，数组，这些都是由对象构成的，甚至一些基本类
2020-05-15 19:27:32
536
原创 从V8来谈谈JavaScript代码的执行
我们知道，V8引擎是Google开发的开源JavaScript引擎，目前用在Chrome浏览器和Node.js中，核心功能是将JavaScript解析成机器能理解的机器码，供机器执行。什么是V8我们可以把V8看成一个虚拟机，其通过模拟实际计算机的各种功能来实现代码的执行，如模拟计算机的CPU，堆栈，寄存器等，此外，虚拟机还有自己的一套指令系统有这样的虚拟机带来的好处是，只要我们按照虚拟机的规范去编写代码，那么即使我们在不同的操作系统，相同的代码执行出来的结果也能是相同的。可能Java虚拟机大家也都听过
2020-05-15 19:10:28
685
原创 手写webpack部分功能实现ES module语法的编译
我们知道，webpack是一个强大的打包工具，能通过引入各种插件依赖来对代码进行处理，今天就简单实现以下webpack里面的一部分核心内容手写webpack所需的babel npm 包这里给一个package.json，可以先把相关的npm包安装下来{ "name": "mywebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Er
2020-05-08 17:50:39
1019
原创 前端面试题 我在面试bat字节时被问的ES6相关问题
做为前端开发，应该都知道，ES6是我们必学的，而之所以强调ES6，是因为在ES6那个版本增加了很多东西，以至于阮一峰大佬还写了本书，也因此，我们经常会在面试里面被问到，你了解ES6吗，知道哪些新特性，而在你说出来之后，就会引来一系列的问题，这篇博客就从我面试bat字节时被问到的一些问题和网上的面经结合做一些总结和问题的回答，同时也会谈到如何从被问的问题里面“引导”面试官去问你其他的问题新增声明符...
2020-05-05 23:40:07
578
1
原创 Vue3.0都快发布了，还不看看Vue和React的区别
现在常用的三大框架中，常常会拿Vue和React来做比较，上周尤大又开了个Vue3.0beta的直播，所以就想着写篇两者比较的博客，拖着拖着拖到五一，总算整出来了。实际上之所以会想去写这篇文章，也是尤大在直播里提到了好几次React的内容，在更新Vue3.0上参考了很多React的功能，而之前虽然学过React，但也就只是做个todo-list玩玩而已，没做过实际的项目，所以也借此来熟悉一下Re...
2020-05-01 19:08:51
5239
原创 笔记中的笔记，聊聊尤大在vue3.0 beta直播里说了什么
在vue3.0 beta直播过后一天，掘金就有了别人家的笔记，确实笔记做的很好，但是我想在这份笔记上，加上我看直播时的一些感受，去做自己的笔记（我还是推崇多做自己的笔记，而不是单单只看别人的笔记，写笔记会让自己对知识点更加深刻，即使会花比较多的时间，但一些知识做笔记是很有必要的）因为直播过后那两天有事，所以今天才把这份笔记整理出来事实上一个月前我才重新看了去年和前年的vue conf并整理了...
2020-04-25 23:22:20
632
原创 React学习笔记（十）React Hook
Hook是React16.8的新增特性，让我们能在不使用class的情况下使用state和其他的React属性Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook不能在class中使用。React提供了一些内置的Hook，也允许我们去自定义Hook，useState就是其中的一个内置Hook（有关内置Hook API，请移步https://z...
2020-04-23 11:09:42
326
原创 在React中如何判断组件是函数还是类
在React中，支持使用class和function来声明一个组件，而实际上，我们在使用这个组件时，因为class和function的不同，所以我们的使用也存在不同我们知道，function是可以直接调用的，但是class是需要通过new去创建一个实例来使用的function// 你的代码function Greeting() { return <p>Hello</p...
2020-04-21 23:39:06
2477
原创 从HTTP的安全问题到HTTPS
在说HTTPS之前，我们先说说HTTP通信过程中的一些问题风险无加密处理的HTTPHTTP为我们的网络通信带来了很多益处，但HTTP同样也有它的缺点，我们知道，HTTP是一个未加密的协议，所以在传输过程中，它有可能遇到以下风险1. 窃听风险通信使用明文（不加密），内容可能会被窃听事实上，即使是已经加密了的通信，也会被窥视到通信内容，只是通过加密处理，别人可能无法得知传输内容的真实信息窃...
2020-03-20 16:58:20
568
原创 在两场vue conf后谈谈vue3.0要更新的内容相关笔记
从去年就一直说的沸沸扬扬的vue3.0发布，虽然到现在还没有正式发布的事件，但做为前端开发，我们还是要去了解的，那么vue3.0会更新什么内容呢，早在2018年11月尤大就在远程演讲中说到了，vue3.0会带来更快更小更易于维护更好的多端渲染支持新功能（新的API）下面就这些内容来说一下vue3.0的更新，这些内容基本上都是我在看了2018年和2019年的中国Vue conf视频后...
2020-03-18 16:06:34
567
原创 减少回流重绘的方法及相关的性能测试(performance)结果分析
回流必将引起重绘，而重绘不一定引起回流我们经常会看到上面这句话，那么回流和重绘是什么呢回流计算DOM节点在设备视口(viewport)内的确切位置和大小的过程，会在页面节点的几何属性或者布局发生变化时发生的发生回流的情况添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）内容发生变化，比如文本变化或图片被另一个不同尺寸的图片...
2020-03-05 17:32:57
759
原创 前端面试题 ES5-ES6 function-class实现类的区别记录详解
在ES5中，我们是通过function来实现类和类的继承，而在ES6中，我们多了class这个语法糖，除了看起来更像一个类外，在很多方面class做到了比function更加严格1. 写法上在ES5中，我们是通过prototype和Object.create()来实现类和继承function Person(){}function Student(){}Student.prototype ...
2020-03-02 17:28:39
1240
原创 个人博客搭建笔记----在自己的主题中添加自定义的404页面
我们在网上经常可以看见一些自定义的404页面，虽然404是一件悲伤的事情，但是有好看的界面的话多少会开心一点，为了更好的用户体验，弄一个自定义的404页面是很必要的既然自定义的404页面这么重要，那自己定义的博客又怎么能少了呢我在自己的主题里面添加了自定义的404页面，如图所示（虽然也说不上好看，但至少比默认的好一些）（ps：我自己已经搭建了一个主题可以使用，在github上有相关的使用指...
2020-03-01 15:23:47
371
原创 leetcode股票买卖问题 js解法
714. 买卖股票的最佳时机含手续费题目给定一个整数数组 prices，其中第 i 个元素代表了第 i 天的股票价格 ；非负整数 fee 代表了交易股票的手续费用。你可以无限次地完成交易，但是你每次交易都需要付手续费。如果你已经购买了一个股票，在卖出它之前你就不能再继续购买股票了。返回获得利润的最大值。示例 1:输入: prices = [1, 3, 2, 8, 4, 9], fee ...
2020-02-29 19:35:50
691
原创 JavaScript实现类 公有方法 私有方法 静态方法
在面向对象语言诸如java中，我们经常能看到class也就是类，而在JavaScript中，我们也可以实现类ES6之前的实现要通过JavaScript实现一个类，可以通过this的指向来实现function Person(name,age){ this.name = name this.age = age}var p = new Person('Bob',18)这...
2020-02-28 19:14:19
1830
原创 chrome浏览器控制台性能监控
要实现对性能的优化，首先就要做到能合理有效地监控性能，发现哪里的性能出现问题，才能更好地去优化性能，这里我们说说如何通过chrome进行性能监控1. 通过使用performance monitor来监控在控制台使用ctrl+shift+p打开command menu，输入performance monitor来监听可以监听如图的内容这里的数据比较直观，也就不多说了2. perform...
2020-02-28 15:47:46
8575
1
原创 个人博客搭建笔记----hexo踩坑记录
1. post.excerpt摘要没有显示出来需要在文章里面添加<!-- more -->该注释标签上面的内容即为摘要2. post.excerpt摘要没有按html解析，按文本解析使用的时候写成<%= post.excerpt %>不该写成<%=，应该写成<%-<%- post.excerpt %>3. hexo deplo...
2020-02-22 16:36:29
655
原创 个人博客搭建笔记----hexo主题代码高亮
我在之前的博客中自己搭建了一个hexo主题simp，在文章添加中，默认文章里面代码是没有特定样式的，就如下面如果我们要添加样式，可以通过引入highlight.js来修改样式在代码中添加这两行<link href="https://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesh...
2020-02-21 01:22:13
2882
原创 个人博客搭建笔记----hexo自定义主题搭建
使用hexo搭建过博客都知道，hexo里面有很多个主题可供我们选择，但是，如果那些主题里面没有我们自己想要的咋整，做为一名前端开发，这个时候当然是选择DIY我这里采用的模板文件是ejs，所以下面的内容需要了解一些ejs的使用，我在文章过程中不会去详述相关的语法新建自定义主题在themes文件夹下创建一个自己的文件夹做为自己定义的主题，我这里写成simp主题目录新建下列目录simp //...
2020-02-20 16:07:46
1098
原创 详谈JavaScript内存泄漏和底层垃圾回收机制
内存泄漏定义我们知道，程序的运行需要操作系统或者运行时提供内存，而对于持续运行的程序，内存会被持续占用，适时地回收当前不执行的程序占用的内存是很重要的，没有及时地回收内存，轻则造成系统性能变差，重则进程崩溃那么，什么是内存泄漏呢，简单来说，内存中的某个空间被占用，在应当回收的时间没有被回收，就算是内存泄漏了有些语言需要自己手动去清除占用内存而又没有在执行的程序，而像JavaScript这...
2020-02-19 17:45:16
392
原创 个人博客搭建笔记----hexo部署到github上及踩坑记录
在我们通过修改_config.yml配置文件，选择自己喜欢的主题和做一些修改后，接下来就是要把我们自己的博客部署上去了，这里以部署到github为例首先在github上新建一个仓库，这里因为我已经建好了这个仓库所以会有重名的报错然后安装hexo-deployer-git用于部署npm install hexo-deployer-git --save接下来修改以下项目根目录下的_conf...
2020-02-15 01:54:10
608
原创 个人博客搭建笔记----hexo根目录下的_config.yml配置解释
我们在使用hexo初始化一个项目的时候，在根目录下会有一个配置文件_config.yml，这个文件配置了所写博客里面的内容，我们从根目录的该文件来说明每个配置的作用# Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/Hex...
2020-02-13 18:13:02
17600
1
原创 前端工程化 搭建自己的脚手架工具详细步骤
我们开发时使用vue的话，一般不会是自己去配置相关的配置，而是会直接使用vue-cli工具，使用react时会用create-react-app，这里我们来试着搭建一个自己的脚手架工具就我现在所会的搭建方法，将模板放到github仓库中，通过执行命令来将github上的代码拉取到本地使用yeoman-generator，将模板放在generator中，通过yo来将generator中的模板...
2020-02-05 18:39:42
2958
1
原创 使用chalk时颜色不变的问题解决
一般情况下是直接引入chalk然后使用相关的API就可以改变颜色了const chalk = require("chalk")console.log(chalk.green("hello"))执行上面的内容，字体颜色却不变，有下面的解决方法关闭工具重新打开虽然不知道为啥，但我的git工具确实有次是关闭后重新打开就可以了设置enabled为true这是我去issues上看到的，有两...
2020-02-03 17:33:24
1575
1
原创 前端工程化 构造简单的微信小程序开发脚手架工具
这篇博客要说的脚手架工具我以前发布到npm上了，是generator-wxfile的1.1.1版本，后面可能还会继续有版本更新，所以要测试功能的话要下载对应的版本基本功能在我的另一篇文章前端工程化 发布一个自动生成微信开发文件的npm包中，我使用yeoman实现了重复文件的生成，而在这里我使用plop来实现这个功能，使用yeoman来将一开始的文件拉到本地，要完成的有以下几个功能询问用户构...
2020-02-03 01:53:27
805
1
原创 小型前端脚手架工具plop的简单使用
在我之前的另一篇文章前端工程化 通过yeoman-generator将文件加载到本地中说到了如何通过yeoman将文件加载到本地，但实际上使用plop工具也可以首先要将plop安装到全局环境npm i plop -g再将plop安装到当前项目中npm i plop -D然后要在项目根目录中新建一个plopfile.js文件，用于编写在命令行向用户提出问题，并根据用户输入的内容来进行各...
2020-02-02 17:19:17
6746
1
原创 LeetCode 289.生命游戏 JavaScript
题目根据百度百科，生命游戏，简称为生命，是英国数学家约翰·何顿·康威在1970年发明的细胞自动机。给定一个包含 m × n 个格子的面板，每一个格子都可以看成是一个细胞。每个细胞具有一个初始状态 live（1）即为活细胞， 或 dead（0）即为死细胞。每个细胞与其八个相邻位置（水平，垂直，对角线）的细胞都遵循以下四条生存定律：如果活细胞周围八个位置的活细胞数少于两个，则该位置活细胞死亡；...
2020-02-01 22:48:52
268
原创 前端工程化 发布一个自动生成微信开发文件的npm包
做为一个前端开发者，要是连npm包也没用过那也是太low了，我们知道，我们用到的npm包实际上也是别人开发发布上去的，那我们如何去发布自己的npm包呢我们知道，在开发微信小程序的时候，每个页面对应的文件放在一个文件夹下，这个文件夹的名字和里面文件的文件名都要一样，而每次写一个新的页面我们都要先创建一个文件夹，再按这个文件夹的名字来创建wxml，wxss，js，json文件，万一写错了还会报错，这...
2020-02-01 17:01:44
915
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人