- 博客(114)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 JavaScript词法作用域
JavaScript词法作用域文章目录JavaScript词法作用域词法作用域是什么？示例（难度加深）词法作用域是什么？js词法作用域是什么？ 个人理解：它是一种规则，规定了我们的js程序按照特定方式去查找变量。词法作用域又叫静态作用域，函数的作用域在函数定义的时候就规定了。这个规则其实粗俗的理解就是就近原则，通过下方试验可得出。// 示例一var value = 1;function foo() { console.log(value);}function bar() { var
2021-01-14 21:53:17
2434
7
原创 Serverless初体验--跟我们前端有什么关系？
前言相信关注前端的程序员们应该听过Serverless这个东西，那么这个东西究竟是什么呢？最开始我听到这个名称的时候，我并没有联想到他与前端的联系，这个名称给我最直观的感受就是，它是做后端的一门技术。Serverless直接翻译过来叫无服务器，我们部署一个项目不需要关心服务器的状态，资源等（而不是真的不需要服务器了），或许我们可以不需要运维人员了????。Serverless是一种后端的架构，CNFC对Serverless的定义是：Serverless架构应该是采用Faas和Baas服务来解决
2021-06-21 15:34:29
559
1
原创 近期面试心得
近期参加了几次面试总结一下有大厂的，有小厂的但是都不怎么理想，总结一下；首先总结一下大厂面试的几道题：基础类的 http协议，浏览器渲染的原理，从输入一个url到页面渲染出来中间经历了那些历程html css 基本功 （问的比较少）动画方面的问的可能比较多算法类 – 比较基础但是考研临场发挥能力，把比如数组找重。数据结构–排序问的比较多，树的一些遍历方法。计算机网络–三次握手，4次挥手原理。js 问的基本都是一些有深度的问题，比如为什么会存在变量提升，手写promise，bind，call，
2021-05-14 22:04:29
378
4
原创 js实现call，apply，bind
文章目录callapplybind如果了解他们的作用请参考我的上一篇博客 js中Function对象–call、apply和bindcallFunction.prototype.myCall = function (obj) { const args = [...arguments].splice(1) // 拿到除了第一个参数外的所有参数，并使其变成数组。 obj.temp = this // 这里的this就是调用这个myCall的函数,下面的test函数，我们把这个函数赋给了ob
2021-04-18 11:34:54
324
2
原创 js深浅拷贝
文章目录浅拷贝深拷贝扩充 hasOwnProperty和instanceof这个名词听起来可能比较高级，但是还是比较容易理解的。市面上有些博客写的不完成，只是实现了半层次的深拷贝，只能对第一层次实现深拷贝，再多的层次就不行了，类似数组的slice，concat深浅拷贝，在表象上表现为，如果我们把A复制给B，这个时候我们修改A如果B也跟着变化了，这个就是浅拷贝，但是如果B没有变就是深拷贝。深浅拷贝发生在js的引用类型中，而且我们一般是用在数组和对象中。浅拷贝const obj = { id:
2021-04-18 09:21:24
202
4
原创 简单分析react中的虚拟dom和diff算法
虚拟DOM的作用首先我们要知道虚拟dom的出现是为了解决什么问题的，他解决我们平时频繁的直接操作DOM效率低下的问题。那么为什么我们直接操作DOM效率会低下呢？比如我们创建一个div，我们可以在控制台查看一下这个div上自带或者继承了很多属性，尤其是我们使用js操作DOM的时候，我们的DOM本身就很复杂，js的操作也会占用很多时间，但是我们控制不了DOM元素本身，因此虚拟DOM解决的是js操作DOM这一层面，其实解决的是减少了操作dom的次数简单实现虚拟DOM虚拟DOM，见名知意，就是假的DOM
2021-04-16 21:23:04
510
3
原创 vue3.0中使用swiper
由于普通的ui组件库中的轮播图无法满足需求，因此使用了这个库。效果图如下：安装swiper npm i swiper现在下载默认6x版本的，6x版中封装了组件，可以在vue中直接使用。用法跟以前不一样！！ ，部分api也不对。<template> <div> <a-row type="flex" justify="center"> <a-col :xs="0" :sm="0" :md="0" :lg="20" :xl="20".
2021-04-15 17:51:37
11512
10
原创 vue3.0中使用echarts
npm install echarts --save 默认就是5版本的。在我们需要使用echarts的页面引入import * as echarts from 'echarts' //这个跟以前是不一样的。我们需要在模板中定义一个容器来存放图表 <div ref="indexChart" :style="{ width: '100%', height: '300px' }"></div>这里的宽高必须指定setup中设置图表配置项 外部引入配置项import b.
2021-04-15 11:33:38
5116
原创 Egg.js的基本使用
Egg.js的基本使用文章目录Egg.js的基本使用Egg是什么？快速安装配置插件MVCEgg是什么？Egg是基于Koa进一步封装的一个企业级框架。快速安装 mkdir egg-example && cd egg-example npm init egg --type=simple npm i配置插件egg-mysql，jwt， egg-cors// /config/plugin.jsexports.mysql = { enable: true, pack
2021-04-15 10:35:56
346
原创 如何在vue3.0中友好的使用antdv
如何在vue3.0中友好的使用antdv随着我们vue3.0的出现，我们的ui组件库也有了一些变化，像我们的旧版的element-ui已经不能在vue3.0中使用了，如果要使用element的话需要使用最新版的element-plus，由于发现它并不太好用，因此我选择了Ant Design Vue。如果我们以前经常使用antd的话，我们使用起来这个上手会非常方便。在vue3.0中引入我们的antdv1.首先使用我们的vue/cli创建vue3.0项目并使用less2. 在vue3.0中使用的话
2021-01-04 20:17:44
11204
12
原创 微信小程序中生成二维码跳转到指定页面
微信小程序中生成二维码跳转到指定页面文章目录微信小程序中生成二维码跳转到指定页面找小程序中的现成的api解决二进制返回的问题预想（并没有实现）在微信小程序使用中，我们会遇到这样的场景，我们使用微信扫描一个二维码，然后会跳转到这个小程序中的一个页面，然后具体我们应该怎么实现呢？下面就是围绕这个功能展开的。由于我也是第一次做，在网上查阅了一些资料后，发现小程序的文档中有下图几个api：找小程序中的现成的api这里有三个api前两个是数量有限，后一个数量没有限制，根据自己项目的具体情况可自己选择。三
2021-01-02 23:53:34
6050
5
原创 Taro中使用getUserInfo获取信息及授权遇坑
Taro中获取微信用户的信息及授权遇坑文章目录Taro中获取微信用户的信息及授权遇坑Taro文档及小程序文档的翻找以下为尝试内容（并没有成功）总结首先声明这个并不是Taro的坑，而是微信小程序的坑，写篇文章记录一下。背景：由于对taro用的并不是很熟练，导致上手还是对它很不满意的。但是随着深入发现写起来还是很舒服。Taro文档及小程序文档的翻找在Taro的文档中我们可以看到在如图位置找到这个对应接口但是我们想使用这个接口的话，我们必须要在用户授权过的情况下，因此我们需要先去授权。如下如位
2020-12-27 22:15:54
4971
8
原创 WebSocket原理及应用
WebSocketWebSocket是什么？websocket 是 html5 中出的一个协议 ，它跟我们的http协议是一种交集的关系，可以理解成它在http协议上又补充了很多东西（http是无状态协议，连接一次断开后并不会记录）, 它可以帮我们实现及时的通讯。 – 应用 聊天app 等WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进
2020-12-10 09:58:39
599
原创 react hooks + TS + antd项目总结
react hooks + TS + antd项目总结文章目录react hooks + TS + antd项目总结useEffect中发请求注意事项useContext组件间传参路由组件传参、取值Axios 拦截器加token，统一处理错误项目中遇到的问题useEffect中发请求注意事项useEffect 的第二个参数，或根据传入的值有多种变化。什么都不传 useEffect(() => {})，组件每次 render 之后 useEffect 都会调用，相当于 component
2020-10-24 16:21:23
2817
1
原创 vue3 效率的提升、composition-api 和 ref 详解
vue3中效率为什么会提升很多，composition-api 和ref reactive、setup 等详解，带你更快的学习，使用vue3.0。
2020-09-28 14:07:07
4905
3
原创 简单对比vue3x和vue2x的区别
简要对比vue 3.0和2.0简单总结了一下 3.0的新特性新的生命周期 ref key 等 移除了某些特性
2020-09-21 21:12:07
1175
原创 HTML中最重要的SEO优化，你都知道多少？
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。搜索引擎大致的工作原理就是利用网络爬虫将各种网站发送请求，然后将得到的HTML页面存储起来，返回给我们搜索的用户，这样我们就能利用搜索引擎看到我们需要的东西了。因此我们SEO的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。
2020-05-27 22:20:49
716
原创 关于 HTML5 和 CSS3 这些知识点你都知道多少--静态篇
关于 HTML5 和 CSS3 这些知识点你都知道多少–静态篇文章目录关于 HTML5 和 CSS3 这些知识点你都知道多少--静态篇1. HTML5 新增标签2. css3 选择器2.1 css3 属性选择器2.2 结构伪类选择器2.3 css3 伪元素选择器3. css3的盒模型4. css3 的其他新特性4.1 css3 图片的模糊处理4.2 css3的calc 函数前言： 当我学过了前端的很多框架之后，发现自己的基础的css3有点弱，这些H5和C3的新特性用特不是很熟练，因此现在回过头来再学习一
2020-05-24 21:10:01
1695
18
原创 使用webpack 4打包项目 --- 进阶篇之vue
使用webpack 4打包项目 — 进阶篇之vue文章目录使用webpack 4打包项目 --- 进阶篇之vuewebpack 结合 vuevue-loadervue-router在进行这一步之前我已经配置好了一些基础的配置如：自动编译打包，loader，出入口文件等，想看这个部分的可以参考这两篇文章使用webpack 4打包项目—基础篇使用webpack 4打包项目—进阶篇之loader这篇文章主要讲解webpack配合vue项目的使用。webpack 结合 vue首先我们需要先下载vue
2020-05-14 21:52:59
2345
3
原创 使用webpack 4打包项目---进阶篇之loader
使用webpack 4打包项目—进阶篇之loader文章目录使用webpack 4打包项目---进阶篇之loader1. html-webpack-plugin2. 处理样式的loader包2.1 css-loader2.2 less-loader2.3 sass-loader3. 处理url的loader3.1 url-loader4. 转义ES6+的loader上一篇webpack基础篇这篇文章主要讲一下webpack中一些包的用法。1. html-webpack-plugin这个包可以使
2020-05-11 21:51:53
1709
2
原创 使用webpack 4打包项目---基础篇
webpack 4打包使用—基础篇文章目录webpack 4打包使用---基础篇全局安装webpack4打包项目webpack-dev-serverwebpack-dev-server 的命令参数全局安装webpack4npm i webpack -gnpm i webpack-cli -gwebpack4在安装时跟3不一样 ，还需要安装一个webpack-cli打包项目例如：打包一个文件，这个文件依赖了jQuerynpm inti -y //初始化一个项目npm i jquery
2020-05-09 15:59:00
1373
2
原创 身为前端的你，到现在还不了解Cypress吗？
身为前端的你，到现在还不了解Cypress吗？文章目录身为前端的你，到现在还不了解Cypress吗？什么是CypressCypress优点安装Cypress运行Cypress简单写一个自己的测试什么是Cypress现在你写项目还在手动测试有没有bug，还在操作键盘和鼠标在客户端 点点点么？还在为界面上的某个功能测试而发愁？ Cypress E2E测试框架 （功能测试框架），E2E的意思就是我们不管你写的代码，我们只想知道我要的这个交互的效果对不对，这个功能能不能使用，不能使用就代表代码有bug，这
2020-05-09 10:45:24
2416
2
原创 vue和react两家对比之--组件之间的通信
vue和react两家对比之–组件之间的通信文章目录vue和react两家对比之--组件之间的通信Vue 组件通信vue 中子组件获取父组件的属性vue中父组件获取子组件的属性React 组件通信react 中子组件获取父组件的属性react中父组件调用子组件的属性Vue 组件通信vue 中子组件获取父组件的属性需要在组件标签中 加入自定义属性，然后再子组件中使用props接收这个传过来的...
2020-05-04 17:35:29
1422
原创 vue和react两家的对比之--表格-（增删查小demo）
vue和react两家的对比之–表格（小demo）文章目录vue和react两家的对比之--表格（小demo）vuereact这篇博客主要就是对比一下使用分别react和vue实现下面这个小demo ，这个案例实现起来可以清除的看到vue模板的优势，但是这个案例并不能说明vue就比react要好，vue很多东西都给你封装好了，你只需要去调用，这就可能写出来的东西比较死，但是react就不一样了...
2020-04-19 18:36:33
581
3
原创 对比vue、react、小程序三家中循环的差异
对比vue、react、小程序三家中循环的差异文章目录对比vue、react、小程序三家中循环的差异vue小程序react为什么要对比这三家，因为比较像，而且现在这三家都很火。vuevue里面提供的循环种类还是挺多的，不仅可以遍历数组，还能循环对象里面的每个属性以键值对的形式展现，v-for迭代数字。 用法就是在标签中使用 v-for = " (item, index) in xxxx "...
2020-04-17 22:05:28
634
原创 一篇文章带你深度解析 axios 源码
axios深度解析（源码）文章目录axios深度解析（源码）axios的作用axios基本使用axios入口文件核心代码axios入口文件Axios核心模块defaults模块：request和 interceptors （拦截器）Axios核心模块dispatchRequest模块和adaptersaxios取消请求cancelCancel模块isCancel模块CancelToken模块整...
2020-04-14 20:54:53
746
1
原创 关于一般http请求和ajax请求，你应该了解这些
一般http请求和ajax请求的区别现在我们编码几乎都是使用的ajax请求，很少使用一般的http请求，这就会导致一些问题（博主就要到了），发现自己对于这个一般的http请求并不是太了解，导致后期学习的一些困惑，刚开始只明白一般的http请求请求完成之后会刷新页面，而ajax会动态刷新，这个其实说的并不完全对。如何区别ajax请求和一般的HTTP请求发ajax请求只能使用两个东西 XHR对...
2020-04-10 13:49:18
1297
2
原创 REST API 和 json-server的简单使用
API分类REST API : restful1.1发送的请求进行CRUD是由请求方式决定的 例如你发一个删除的请求就是对应的DELETE，POST对应的是添加，PUT对应的是更新，GET对应的是获取1.2 特点 ：同一个请求路径会对用多个操作1.3 请求的方式有 GET/POST/PUT/DELETE非REST API ：请求方式并不决定请求所作的操作一个请...
2020-04-09 19:33:36
368
原创 一招了解js函数节流和防抖
js函数节流和防抖作用：解决事件频繁出发的问题比如js中有一些事件触发的非常频繁，例如mousemove等，导致浏览器性能问题。还能防止频繁向的后端发送请求1.节流 throttle1.节流的实现原理 这里的fn就是需要做节流限制的函数，delay是延迟的时间这个就是每个多少时间才触发一次，例如如果这是一个onClick事件的回调 则当你频繁点击这个按钮的时候它并不会一直触发这个事...
2020-04-02 19:01:31
196
原创 微信小程序踩坑”日记“--Failed to load image xxx (404)
微信小程序–Failed to load image xxx (404)Failed to load image http://xxx xxxxx: the server responded with a status of 404 (HTTP/1.1 404 Not Found) From serverhttp: //xxx xxxxx:我们送从后台拿数据使用wx.request 方法...
2020-03-14 09:55:23
8417
3
原创 flex居中（justify-content: center和 align-items:center ）遇坑。
justify-content: center和 align-items:center当你使用flex布局时 会经常用到这两个属性但是有时会发现为什么失灵了，为什么怎么样都居中不了，明明刚才还管用 ，（前几天博主就遇到了这种情况）…这个连个属性在网上查到的都是说前者是水平居中后者是垂直居中 但是其实这种是不完全正确的只是其中一种情况，如果是另一种情况的话就会失效。步入正题那么是为什么会...
2020-03-10 10:52:43
21760
2
原创 回调地狱和Promise使用（详解）
回调地狱和Promise1.回调函数的作用及回调地狱先说一下什么是回调函数的作用1.1在js中我们会使用很多的异步方法，例如定时器，ajax还有node中的fs1.2 很多时候我们需要拿到这个异步函数里面的一些数据，但是通过一般的手段我们并不能拿到（js单线程）这个跟他的执行机制有关，我们可以通过回调函数的方式拿到这个数据例如：add = (x,y,callback) =>...
2020-03-04 21:03:14
2167
3
原创 MongoDB中的常用的操作指令
MongoDB中的常用的操作指令1.mongod启动服务 mongo进入指令模式2.show dbs显示说有的数据库3.db查看当前操作的数据库4.use切换当前操作的数据库如果没有这个数据库 则会创建一个5.db.集合（类似于关系数据库中的表）.insertOne()插入一条数据db.集合.find()查找到这个集合中的所有数据...
2020-02-29 18:12:52
243
原创 node暴露（exports）规则和加载（require）规则
node笔记1.fs核心模块中的readFile，readDir2.http核心模块createServer，listen，on3.url核心模块url.parse 从路径中取出4.服务端重定向//301是永久重定向 单向性res.statusCode = 302 //临时重定向res.setHeader('Location',path) //设置重定向的路径...
2020-02-21 21:31:10
877
原创 使用node实现简单的apache功能
使用node实现简单的apache功能1.实现根据文件名（路径）访问到指定文件1.思路的话：在指定的文件里面创建 例如：我在c:/inetpub/www/ 里面创建了如下三个文件需要在客户端访问时输入对应的文件名例如：http://127.0.0.1:3000/index.html就会定位到对应的文件，如果没有对应的文件，则返回404const http = require('h...
2020-02-15 21:40:34
445
原创 node优劣(未完)
node并不是一门编程语言node只是基于chrome v8引擎的js 运行环境node 异步非阻塞I/O（I/O线程池）异步非阻塞就是 你在干这件事的同时，还可以干另一件事然后并且不会拥堵阻塞式调用 线程被挂起的 然后会一直等待这个请求的结果，不能干其他的事情，如果非阻塞式的则相反服务器与数据库打交道，当服务器发出一个请求获取到数据库的某一条信息，这个时候就会产生一个线程，正常的服务器...
2020-02-07 14:17:14
249
原创 antd+react项目总结（二 未完待续）
1.包装成路由组件withRouter2. this.props.location.pathname获取路由链接3. 这种模式只是模糊匹配 如果要精准匹配需要 exact = true，如下面写法<Route path = '/user' exact = {true} component = {Admin}/> 4.this.porps.history.replace(...
2020-01-18 19:43:06
428
原创 初识Nginx（基本配置及其作用）
Nginx1、 nginx 简介 （1） 什么是 nginx 和可以做什么事情 （2） 正向代理 （3） 反向代理 （4） 动静分离 2、 Nginx 的安装 （1） 在 linux 系统中安装 nginx 3、 Nginx 的常用命令和配置文件4、 Nginx 配置实例 1 反向代理5、 Nginx 配置实例 2 负载均衡6、 Nginx 配置实例 3 动...
2020-01-16 20:35:02
724
原创 async/await详解（未完）
async/await1). async和awaita. 作用?简化promise对象的使用: 不用再使用then()来指定成功/失败的回调函数以同步编码(没有回调函数了)方式实现异步流程b. 哪里写await?在返回promise的表达式左侧写await: 不想要promise, 想要promise异步执行的成功的value数据c. 哪里写async?await所在函数(最近的)...
2020-01-16 18:05:50
241
原创 axios拦截器（interceptors）和取消请求（cancelToken）
web向后端传输数据的两种格式json和urlencodedimport qs from ‘qs’data: qs.stringify(data)因此需要判断到底传入的是什么类型的数据因此就需要用到axios阻截器可以修改一下类型// Add a request interceptoraxios.interceptors.request.use(function (config) {...
2020-01-15 13:21:53
7027
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人