- 博客(77)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 【留存】eslint安装与配置
安装安装依赖 npm i eslint -D初始化eslint配置文件npx eslint --init输入该命令后，会让你选择一系列配置的，我选择的配置如下图所示：然后跟着提示一步步走，最终会生成一个.eslintrc的js文件，如下所示：默认rules的规则为空，可以自己自行添加.配置文件需要注意，想要生效需要在对应的编辑器里面安装eslint！！！我东拼西凑，写了个配置，如下所示：module.exports = { env: { br
2021-04-27 15:15:49
489
原创 【已解决】 webpack5 Cannot find module ‘webpack-cli/bin/config-yargs‘
今天写一个项目的配置文件，用了webpack 5，然后用webpack-dev-server启动时，竟然报了以下错误看到错误后，我就第一时间去看了官网，发现官网是用webpack serve，而不是像之前的用webpac-dev-server启动，于是我尝试在package.json修改之后，就成功的启动了项目。...
2021-04-25 16:58:44
604
原创 三种浏览器刷新操作，对缓存的影响
简介刷新浏览器有以下三种操作：正常操作：地址栏输入URL，跳转链接，前进或者后退手动刷新：F5，点击刷新，点击菜单刷新强制刷新：Ctrl+F5不同刷新操作，不同的缓存策略正常操作：强制缓存和协商缓存均有效手动刷新，强制缓存失效，协商缓存有效强制刷新：强制缓存和协商缓存均无效如果对强制缓存和协商缓存还不是很了解的朋友，可以看下我这篇博客...
2021-04-23 15:33:55
1508
原创 JS实现继承的几种方式
原型链的续篇来了，如果不是太了解原型链朋友，可以先看下我的这篇博客，相信你会有所收获的~构造继承构造函数绑定 function Animal(){ this.species = '动物'; } Animal.prototype.eat=function(){ console.log('我是动物') } function Cat(name,color){ Anim.
2021-04-14 21:07:44
138
原创 从__proto__和prototype来深入理解JS原型链
简介首先继承作为JS面向对象编程核心之一，到底是什么东东呢？在我的理解中，从广义上来讲，就是让子类能有父类的属性和方法，从而父类就一处定义，多处复用，从狭义上来讲，就是玩原型链的，也就是说如果大家掌握了原型链，也就掌握了继承，接下来呢，我会从两部分给大家做个分享，分别是原型链实现继承原型链在说原型链之前，我先说下__proto__和prototype这两个属性，因为接下来，这两个词会经常出现__proto__，用来读取或设置当前对象的原型对象（prototype），并且每个JS对象一定对应
2021-04-14 13:35:34
277
1
原创 【已解决】Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
今天在create-react-app添加scss，报了以下错误其实报错原因写的很明白了，但还是记录下吧，因为感觉会有不少朋友还是不知道该怎么去解决？解决方案如下：第一步删除原有node-sassnpm uninstall node-sass+第二步，下载个4版本的npm install [email protected]...
2021-03-15 14:29:13
1295
原创 【已解决】Cannot find name ‘Set‘. Do you need to change your target library?
今天跟着ts中文官网敲的时候，遇到了以下这个问题：其实上面说的很明显，意思就是让咱修改个编译时需要引入的库，为什么会出现这种原因呢，是因为咱们在ts的配置里面配置target为es5时，它默认注入的库为DOM，ES5，ScriptHost，显然Set在es5时是不存在，所以就编译失败，官方有这么一句话，相信大家看到就非常明白了，如下图所示：那么，怎么解决呢，很简单，就是手动指定lib为['es6','dom']即可~具体配置如下：{ "compilerOptions": {
2021-01-18 16:24:59
3341
原创 【已解决】video标签不会自动播放问题
今天在写一个视频组件的时候，写了autopaly但还是不会自动播放，于是我就去MDN上搜了一下，果真是找到了答案，MDN给出的解释如下图所示：很明显，我们只需要加上muted属性就可以自动播放了，muted属性是限制声音的打开与关闭的意思。...
2020-12-28 17:16:32
3961
原创 react-app 端口更改
在启动多个react-app项目时，难免会遇到端口冲突，因为默认端口都是3000，虽然react-app会自动判断，并设置新的端口，但每次启动他都需要判断下，就显得很冗余，所以就有了以下两种解决方案：第一种就是修改react-scripts自身，具体修改如下图所示第二种，命令设置process.env.PORT，但为了兼容性，这里咱们需要利用cross-env插件npm i cross-env -D然后修改package.json，如下图所示：那么这两种方案呢，我比较推荐使用第二种，
2020-12-21 13:44:11
523
原创 react-app 自定义脚手架配置
自定义脚手架有两种方法：第一种就是package.json的npm run eject执行完命令，就会出现脚手架的配置文件夹，因为这种方法是不可逆的，所以不推荐使用，这里我也就不过多赘述了，有兴趣的朋友，可以执行下看下效果。重点讲下第二种，就是利用插件react-app-rewired和customize-cranpm i react-app-rewired customize-cra -S接下来首先修改package.json修改过后如下图所示：接着添加一个名为config-overr
2020-12-21 11:52:54
263
原创 memoize – 返回 memoized（缓存的）函数
memoized函数实现原理：使用一组参数初次调用函数时，缓存参数和计算结果，当再次使用相同的参数调用该函数时，直接返回相应的缓存结果。function memoize(func) { if (typeof func != 'function') { throw new TypeError('Expected a function') } const memoized = function(...args) { const key = args[0] const cac
2020-12-14 10:46:14
1671
2
原创 webpack only one instance of babel-polyfill is allowe
今天在接受之前的项目时，起项目报了这个错误然后就看了下他的配置文件，这个项目是用vue-cli2搭建的，主要引起错误的原因如下图所示：用了这种方式后，babel-polyfill与其他的插件造成了冲突，也就是说有两个地方都用到了babel-polyfill于是我的解决方案如下所示:第一步去掉配置文件的babel-polyfill entry: { app: './src/main.js', }第二步，在main.js加上以下代码if (!global..
2020-12-10 22:18:01
2803
原创 前端网络请求并发控制
简介以下为各大浏览器并发请求限制的数量（只在同一与域名下有效）可以看出主流浏览器请求并发数一般在2-8之间，这就可以解释下为什么把一些静态资源放在CDN上了，就是因为同域下并发请求有限制，这样就会造成请求阻塞，从而在一定程度上降低了页面渲染的速度，当然这只是部分原因哈，其他原因，比如请求头小，加载速度快等，在这里就不展开讲了。回归正题，接下来，咱们以chrome浏览器为例，看下它的并发请求。浏览器并发为了演示效果，我在html同时加载10张图片，html如下<!DOCTYPE html&
2020-12-02 11:40:59
3158
原创 localStorage存爆了怎么办？
简介作为前端开发人员，localStorage和sessionStorage是会经常用到的，之前由于项目原因，存爆的情况是几乎不存在，所以一直没有写过针对存爆的逻辑，然而最近做一个功能，就是在大文件上传，存MD5的时候，考虑到会存爆，就从头到尾写了一遍，接下来就和大家分享一下我的思路。处理逻辑处理存爆的中心思想就是用新的去替换无用的项，什么算无用的，就要看你们的业务具体是什么了？就比如，大文件上传，我定义的所谓无用的就是最早上传的那个，我会去找到它，然后删除，在存上新文件的MD5，那么，接下来，咱们就
2020-10-26 22:06:10
1441
原创 【已解决，原因】run `npm audit fix` to fix them, or `npm audit` for details html
对于下载包，之前为了能快点，一直使用cnpm下载包，今天有意无意的就用了npm下载，就出现了以下的问题 added 253 packages from 162 contributors and audited 1117 packages in 42.157sfound 5 vulnerabilities (1 low, 4 high) run `npm audit fix` to fix them, or `npm audit` for details html当然，出现这个问题，自我感觉不是因
2020-09-29 17:52:51
27728
3
原创 小程序必备逻辑------登录
前言小程序登录，官方是这么解释的,通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系，简单的说，就是先调用微信登录，然后根据返回值，设计自己的用户体系，自定义自己的登录态，废话不多了，开干~登录首先，先贴上官方提供的流程图，如下所示：OK，有了流程图，接下来，咱们就按照流程图一步步往下走，第一步小程序调用wx.login，代码如下： wx.login({ success (res) { if (res.
2020-09-15 11:14:35
369
原创 小程序必备逻辑------授权
简介小程序登录，在小程序项目中是必不可少的，可能有些朋友会想，为什么叫授权登录，这是因为在小程序中，部分接口是需要得到用户的授权才能调用，所以我就通称它为授权登录，而实际上，授权是授权，登录是登录，那么接下来，我就分两部分，和大家做个分享~授权文章开头已经介绍过，部分接口需要得到用户的授权方可调用，那么小程序把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个scope 之后，其对应的所有接口都可以直接使用。scope的列表如下图所示：接下来，咱们就以us
2020-09-14 15:35:57
1058
原创 小程序必备逻辑------自动更新版本
具体就不讲了，我就直接贴代码了，代码里面都有注释，相信大家都能看的明白，当然如果有更好的，欢迎大家指教~function autoUpdate(){ var self = this // 判断小程序更新机制API兼容性 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() //1. 检查小程序是否有新版本发布 updateManager.
2020-09-07 15:46:16
235
原创 HTTPS 详解
简介本篇博客主要是针对https进行了一个剖析，我会从以下三个方面进行讲解：为什么要有https?他用来解决什么呢？https的通信过程https和http的区别下面首先说下为什么要存在https.为什么要有https大家应该都知道http是明文传输，那么明文传输就会造成以下风险窃听风险，第三方可以获知通信内容篡改风险，第三方可以修改通信内容冒充风险，第三方可以冒充他人身份参与通信那么https就出现了，它主要的目的就是所有信息都是加密传播，第三方无法窃听具有校验机制，一
2020-07-19 11:41:07
1171
原创 从0到1搭建属于自己的博客
前言早一年前，就特想自己搭建个博客，记录并总结自己的学习历程，但是由于自身技术的欠缺，这一年多就一直在CSDN上做总结，现在，终于，在天时地利人和的情况下，我要开始搭建属于自己的博客，当然，我会把从0到1搭建的全过程分享给大家，大家如果想搭建的话，可以做个参考哦，如果有什么好东西，欢迎指教~简介首先，这个博客我打算前后端全自己写，前端用vue，后端用node，并且前后端分离，并不会采用SSR的形式，有的人可能会说，为什么不用wordpress或者Hexo呢？答：因为我想亲力亲为，我要亲身体验下从产品到
2020-07-13 15:26:26
316
原创 原生实现图片懒加载
什么是懒加载，大白话就是只加载用户所看到区域的资源，那么懒加载怎么实现呢？实现原理就是监听滚动轮，判断当前图片是否在可视区内（包括滚动高度），如果不在就则进行加载那么就存在一个问题就是，频繁操作DOM，对性能极其不友好，所以我们需要进行节流控制~具体代码如下所示：<!DOCTYPE html><html> <head> <title>图片lazyload</title> <style>
2020-07-13 15:18:49
226
原创 图片使用base64位存储的利弊
优点提升性能: 网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少https请求。加密: 让用户一眼看不出图片内容 , 只能看到编码。方便引用: 在多个文件同时使用某些图片时, 可以把图片转为base64格式的文件, 把样式放在全局中, 比如common.css, 以后在用的时候就可以直接加类名, 二不需要多层找文件路径, 会提升效率缺点
2020-07-09 11:09:09
2345
原创 如何优化highlight高亮markdown
简介最近一直在纯手工搭建自己的个人博客，其中用到了highlight插件来高亮markdown，刚开始本地开发的时候也没注意，渲染的挺快，但是真正放到服务器上的时候，我都惊呆了，一个js竟然用了2.5s加载，体验极差，在经过一系列优化之后，最终降到了26ms，非常的nice，下面我就讲下我整个的优化过程。优化历程首先呢，我发现这个webpack压缩过后的JS大概有1.5M，所以第一想到就是在nginx配置了gzip压缩，代码如下 gzip on; gzip_min_length 1
2020-06-27 23:11:43
1450
原创 算法-----数组生成对象
今天和朋友聊天，聊到了面试，就和我分享一个没做出来的算法面试题，如下所示： var a = [ '/a/2/c', '/a/b', '/d/2', ] // 生成 { a:{ 2:{ c:{} }, b:{}, d:{ 2:{} } }仔细看过之后，这道题其实就是考验引用类型的特性，指针的问题，和生成链表道理是一样的，解法如下：
2020-06-13 17:06:42
193
原创 webpack 配置了url-loader，但是图片还是打包报错？
最近自己在手动搭建博客，就自己配了一套webpack，但是在开发过程程中，遇到了这么一个问题，就是我配置了url-loader，但是还是打包报错，就是很纳闷，刚开始怀疑是路径的问题，loader解析不到，说以报错，可惜并不是，最终经过一系列鼓捣之后，终于终于发现了问题的所在，首先，先看下我的url-loader的配置 { test: /\.(png|gif|jpe?g)$/, use: {
2020-06-11 14:18:18
777
原创 webpack 4x - vue文件 style标签热替换失败问题
今天在开发个人博客的时候，发现在.vue文件修改style标签里样式时，不会热替换，然后就去查了下webpack文档，文档给出的答案是：const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOpt
2020-05-24 19:11:11
382
原创 Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
简介因为实际开发中，很少用到event对象的这几个值，每当写的时候又记不清，然后就要浪费时间去查找准确的资料，很是不爽，所以就做个记录~话不多说，直接上图（ps:图是网上找的，如果侵权，立马删除）：针对offsetX, clientX, pageX, screenX，图上已经标的很明白了，就不做讲解了~event.xevent.x代表点击的点距离可视区左边框的距离，而它在不同浏览器处理结果是不一样的，首先看以下代码<body> <div> 外
2020-05-09 15:09:21
1435
原创 node 代码调试
启动项目时，添加--inspect命令node --inspect ./xx.js这时，在浏览器输入chrome://inspect，弹出以下界面然后在 Target 部分，点击inspect链接，就能进入调试工具了。第二种方法，在对应网站的，F12打开调试控制台，如下所示：可以看出多了一个node的logo，点击即可打开~这时，就可以愉快的进行调试了，调试界面如下...
2020-05-08 23:25:45
129
原创 npm发布一个属于自己的包
前言首先完全符合CommonJS规范的包目录应该包含如下这些文件：package.json:包描述文件bin: 用户存放可执行的二进制文件的目标lib: 用于存放JavaScript的代码doc:用于存放文档的目录test:用户存放单元测试用例的代码Markdown:项目说明注意，规范是规范，完全可以自己控制的，比如可以习惯性用src来存放js代码~还有这里就不对包描述文件展...
2020-04-02 19:13:41
193
原创 webpack之常用loader安装及配置方式和常见问题
babel-loader用来处理ES6＋并将其编译成ES5，它使我们能够在工程中使用最新的语言特性（甚至在提案中），同时不必特别关注这些特性在不同平台的兼容问题。安装方式:npm i babel-loader @babel/core @babel/preset-env -Dbabel-loader：它是使Babel与webpack协同工作的模块@babel/core: 很明显，它是B...
2020-03-20 17:37:49
1016
原创 浅谈webpack之模块打包原理
针对webpack的模块打包原理，我们还是以实际例子来讲解，例子如下所示： // 入口文件 main.js import addContent from "./add-content"document.write("My first Webpack Demo!<br>")addContent()// add-content.jsexport default funct...
2020-03-19 12:18:06
660
原创 webpack 打包之指定配置文件
简介首先，需要重申下，webpack默认的源代码入口就是src/index.js，默认出口是/dist，默认配置文件是webpack.config.js，在实际开发中，存在生产环境和开发环境，而生产环境和开发环境对于配置的需求是不一样的，这时候我们一般就会建三个脚本，webpack.config.js用来放基本配置，webpack.prod.js用来放线上打包的配置，webpack.dev.js...
2020-03-13 10:24:42
3911
原创 VUE虚拟DOM-patch算法
简介虚拟DOM最核心的部分就是patch，它可以将vnode渲染成真实的DOM，而对比两个vnode之间的差异只是patch的一部分，patch的目的是修改DOM节点，也可以理解为渲染视图，并且patch不是暴力替换节点，而是在现有DOM上进行修改。对现有DOM进行修改需要做三件事：创建新增的DOM删除已经废弃的节点修改需要更新的节点为什么使用pacth算法来计算出真正需要更新的节点...
2020-02-12 23:40:37
631
原创 JS高级程序设计阅读笔记---代码优化（最佳实践）
简介本文主要针对之前我写的一篇前端优化大全做个扩展，主要记录的是代码上的优化。避免全局查找可能优化脚本性能最重要的就是注意全局查找。使用全局变量和函数肯定要比局部的开销更大，因为要涉及作用域链上的查找。请看以下函数：function updateUI(){ var imgs = document.getElementsByTagName("img"); for (var i=0,...
2019-12-08 22:48:10
171
原创 节流与防抖
简介浏览器中某些计算和处理要比其他的昂贵的很多，例如，DOM操作比起非DOM操作交互需要更多的内存和CPU时间，连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃，为了解决这个问题，我们一般都采用节流或者防抖来解决。节流(throttle)大于等于指定的时间才执行一次，不管你操作有多迅速，应用场景利用resize多次操作DOM，比如懒加载图片等。 /* ...
2019-12-08 17:37:30
141
原创 JS高级程序设计阅读笔记---函数柯里化
函数柯里化是什么？函数柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术 // 普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingAdd(x) { return fu...
2019-12-08 15:57:07
196
空空如也
大牛们，本人前端小白，第一次发帖，希望能得到解决，谢谢大家了
2017-08-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人