自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(116)
  • 收藏
  • 关注

原创 实现了一下 Promise

我们使用类的方式来实现一个 Promise概念及作用在《JavaScript 高级程序设计第四版》中是这样描述 Promise的:期约(也就是 Promise)是对尚不存在结果的一个替身。在ES6 中增加引用数据类型 Promise,通过 new关键字来实例化。它需要传入一个执行器(executor)函数作为参数(必传,否则会出错)。所以这里我们先定义一个 Promise类:class Promise { constructor(executor) { if (isUndef(ex.

2022-05-15 00:14:32 257

原创 保姆级教程--如何使用github来搭建自己的博客

首先,咱们使用 Hexo 来搭建博客,这是一个快速生成博客的工具,使用 node 来进行安装下载。1.全局安装 hexo-clinpm install hexo-cli -g2.怎么证明你安装成功了?hexo -v3.安装完成之后,我们再新建一个文件目录(建哪儿,取名这种问题就不要问了,你开心就好)。4.之后在此目里内打开命令行来初始化博客hexo init5.初始化成功以后...

2020-03-14 10:07:54 396

原创 前端面试题(每日一更)

一,什么是MVVM?二、写React和vue项目时为什么要在列表组件中写key,其作用是什么?三,TCP三次握手和四次挥手四、ES5和ES6 的继承除了写法以外还有什么区别?五,Promise 构造函数是同步执行还是异步执行,那么 then 方法呢?六,call 和 apply 的区别是什么,哪个性能更好一些?**一、什么是MVVM?**MVVM是Model-View-ViewM...

2019-08-17 11:41:41 555

原创 vue.js下载及安装的三种方法

vue.js下载及安装的三种方法要下载安装vue首先得下载安装node.js和npm。下载安装好这两样以后就可以安装vue了,下面给大家介绍三种安装vue的方法。1.直接在官网上下载在官网上下载vue.js。并用<script>标签引入。注意:下载时网址是https://vuejs.org/v2/guide/installation.html。而不是https://cn.vuejs.o...

2018-07-02 19:09:01 141076 6

原创 Nginx 配置 SSL(HTTPS)

记录如何给网站配置 HTTPS。

2022-09-03 00:01:53 1251 1

原创 TS篇—type 和 interface 的区别

在 TS 中,type 和 interface相似,都可以给类型命名并通过该名字来引用表示的类型。不过它们之间是存在一些差别的,我们在使用时也需要注意一些特殊场景。概念typetype关键字是声明类型别名的关键字。它的语法如下:type AliasName = Type;type:声明类型别名的关键字AliasName:类型别名的名称Type:类型别名关联的具体类型interface通过关键字 interface可以定义一个接口类型。它能合并众多类型声明至一个类型声明。接口声明只存

2022-05-21 10:55:12 15731

原创 JS篇-call、apply 和 bind 的区别

前面面试八股文系列

2022-02-12 11:30:08 331

原创 博客篇-Github Actions 自动化部署

学习这个的主要原因还是想解放双手,实现代码提交至 Github 之后自动部署到服务器上的需求。我们来一起看下是如何进行操作的。那么 Github Actions 主要的工作就是什么呢?它的主要工作就是将我们上传到 github 的代码,下载安装依赖,并进行打包构建,最后将构建产物发布到我们的服务器上去,让代码在服务器上运行。那首先第一点,对于我们的主干分支 master,需要将其强行切换到 main 上,为啥呢?因为现在 main 才是 github 上正儿八经的主分支,如果不这样做,可能会在 git

2022-01-10 23:02:47 1251

原创 网络篇-网络分层的含义

OSI 七层模型这是一个理想化的模型,给我们的网络划分了层次。我们可以将复杂的内容简单化,每一层都专人做专事[最底层]物理层:只关心如何传输数据,传输的是比特流数据链路层:主要关心的是将两个设备连接起来,用来连接数据网络层:网络层是寻址传输层:把数据传递给对方(怎么传,以及丢失后的重新传递)会话层:建立会话和管理会话表示层:怎么把数据进行描述、压缩等应用层:用户最终使用的接口(微信、QQ、网页等)底层都是为上一层做服务的在实际应用中,我们会将 5、6、7 统称为应用层;而将

2022-01-09 17:03:29 2627

原创 博客篇-如何使用阿里云搭建网站

首先,我们使用的阿里云服务是 1核2G 的丐版配置(搞活动的时候买的,三年145,很划算了,反正是练手用的)。然后系统是 Linux 的系统,接下来我们会在上面搭建一个个人的静态博客上去。创建 ECS 实例首先登陆我们的阿里云控制台,进入到云服务 ECS 页面,点击「创建实例」来创建一个 ECS 实例。一步步往下走,最后付款即可。远程连接创建完实例之后,我们可以在左侧的菜单栏中选择「实例」,进入到实例列表页面,然后就可以看到我们刚刚创建的 ECS 实例了。我们点击列表操作栏的「远程连接」,登陆到

2022-01-03 17:31:20 1392

原创 Github: Support for password authentication was removed

今天在 github 上创建了一个新仓库以后,准备提交一下更改的内容,但是竟然提示提交失败:Support for password authentication was removed. Please use a personal accesstoken instead// 删除了对密码身份验证的支持。请改用个人访问令牌啥意思呢?意思就是现在 push 代码的时候,如果需要重新进行输入用户名和密码,那么用户名不用变,但是密码这块就不能再使用之前咱们的登陆密码了,github 官方认为那样做不安全

2021-11-28 22:50:02 4295 2

原创 JS篇-继承的方式

什么是继承对于继承这个概念来说大家都不陌生,在现实中有儿子继承父业,孙子继承了爷爷的财产等等。那么在编程中,我们熟知的继承其实主要来自于面向对象编程。而很多的面向对象语言都支持两种继承:接口继承和实现继承。前者是只继承方法签名,后者继承实际的方法。继承的主要作用是将一些抽象的模块抽离出来,作为一个父类使用,这样便于实际编程中代码的可复用性和可维护性,也从一定程度上减少代码冗余,使得代码更加的简洁整齐。在 JavaScript 中接口继承是不可能实现的,因为函数没有签名。所以实现继承成了 JavaScr

2021-10-17 18:29:02 363

原创 你真的了解var/let/const的区别吗?

首先我们知道 var\let\const 都是声明变量用的,但是它们三个除了这个共同点之外,其他部分都各不相同,下面我们来看下。varvar 关键词,是用来声明一个变量的,并可选地将其初始化为一个值。var num = 1;var str = 'hello world';var fn = () => {};// 也可以声明多个变量,中间用逗号隔开var a = 1, b = 2, c = 3;特点:它的作用域是它当前的执行上下文,本身是根据声明位置决定是全局变量还是局部变量。

2021-10-12 22:44:39 142

原创 数组去重的十种方法

数组的去重方法,其实无论实在实际项目还是在面试中都会有用到的,下面我们来列举一下常见的几个:使用 for 循环和 includes使用 Set 和 Array.from()使用 for 循环和 indexOffor 循环嵌套 for 循环,结合 splice使用 sort 和 reduce 方法使用 filter 和 indexOf使用 forEach 循环和 Map使用 reduce 和 includes使用扩展运算符和 set如果是数组对象的数据格式,可以使用 forEach 和

2021-10-05 19:28:35 2662

原创 词法环境是什么?

我们在看一些讲解 JavaScript 基础和进阶博客中,或者视频中,会经常听到一个名词——词法环境。那究竟什么是词法环境?它的作用是什么?今天我们就来唠叨唠叨。首先来看看词法环境的概念。A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting

2021-10-04 15:31:56 1097 4

原创 typeof 方法及如何实现

这也是一道很基础的题目,主要考察这个 API 的用法、缺陷及如何实现,下面我们就来一起看下。基本用法缺陷如何实现一个 typeof延伸:与 instanceof 做比较基本用法作用:获得操作值的数据类型,返回一个字符串。语法:在 typeof 后面跟一个需要计算的数据即可,typeof <operand> 或者 typeof(operand) 。typeof 1; // "number"typeof '1'; // "string"typeof t

2021-10-03 19:02:09 970 1

原创 来谈谈闭包

闭包的概念闭包解决了什么问题?闭包带来的副作用是什么?闭包的应用场景都有哪些?概念MDN 上给出的闭包的定义是:一个函数和其周围状态的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包。也就是说,闭包可以让你在一个内层函数中访问到外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。来看个例子:function parent() { var name = 'closure'; // name 是在 parent 函数.

2021-09-19 12:38:00 177

原创 如何实现深拷贝

我们在之前的一篇文章里讲述了浅拷贝的概念,今天咱们来说下深拷贝。概念首先我们要知道深拷贝不仅是将源对象的各个属性逐个复制过去,还深层递归各属性所包含的对象。深拷贝是开辟新的栈,目标对象和源对象的地址是不同的,两者互不影响。–和原数据是否指向同一对象第一层数据为基本数据类型原数据包含子对象赋值是改变会使原数据一同改变改变会使原数据一同改变浅拷贝否改变不会使原数据一同改变改变会使原数据一同改变深拷贝否改变不会使原数据一同改变改变不会使原数据一同改变

2021-09-16 00:13:08 1527 2

原创 原型和原型链

原型和原型链这在面试中都是老生常谈的话题了,那么今天我们再来唠叨唠叨。解决什么问题?在介绍它们之前,我们先要搞清楚,原型和原型链解决了什么问题?我们知道早期的 JavaScript 是没有类这个概念的,我们要生成一个对象,通常是定义一个构造函数,然后 new 这个构造函数去生成对象的。而这个构造函数就成为了一个实例对象的原型对象。function Cat(name, weight) { this.name = name; this.weight = weight}// new 一个新对象

2021-09-05 18:41:16 353

原创 手写数组的 push 方法

析题首先,手写数组的 push 方法,那我们第一步想到的应该是数组本身的 push 方法,有什么作用?push方法将一个或者多个元素添加到数组的末尾,并返回该数组的新长度。const animals = ['pigs', 'goats', 'sheep'];const count = animals.push('cows');console.log(count);// expected output: 4console.log(animals);// expected output: Ar

2021-06-20 00:12:46 1546

原创 Vuejs 中常用的工具函数

isUndef判断参数是否是 undefined 或者是 nullfunction isUndef (v) { return v === undefined || v === null}isDef判断参数已定义且不为空function isDef (v) { return v !== undefined && v !== null}isTrue判断参数是否为 truefunction isTrue(v) { return.

2021-05-07 23:09:36 528 2

原创 浅拷贝

图片转自js 深拷贝 vs 浅拷贝我们平常说的深拷贝和浅拷贝都是基于对诸如 Object 和 Array 等引用数据类型的拷贝。对于基本数据而言,拷贝为某个值的赋值。在说拷贝之前,我们先复习一下什么是基本数据类型和引用类型。基本数据类型JavaScript 中基本数据类型有五类——String、Number、Boolean、null、undefined,它们的值存放在了内存中的栈中,也就是我们说的栈内存。它们是存放在栈内存中的简单数据段,数据大小确定,内存空间大小可以分配,可以直接访问。基本数据

2021-04-25 14:02:29 1493

原创 【前端面试题】-indexOf 和 findIndex 的区别

链式问题indexOffindIndex相同点不同点为什么?手写 indexOf 和 findIndexindexOf首先 indexOf 方法在数组中可以找到一个给定元素的第一个索引,并返回。如果不存在,就返回 -1。而在String中则是返回调用其字符串对象中第一次出现的指定值的索引,从 fromIndex 处进行搜索。如果没有找到,则返回 -1。语法上不管是数组还是 String 都是:[arr[, string]].indexOf(searchElement[, fromI

2021-04-16 09:44:02 505

原创 再也不怕面试官问什么是 instanceof 了

来看看今天的链式问题:作用是啥?原理是啥?怎么实现?源码实现instanceof 解决什么问题我们在使用 instanceof 的时候,需要知道,它是用来判断某实例是否是特定的类型。什么意思呢?首先,我们在使用 typeof 的时候,只能判断基础数据类型,当判断引用数据类型的时候呢,无论什么类型的变量,都会返回 Object。所以这里引入了 instanceof 来判断引用数据类型。instanceof 运算符可以用于检测构造函数的 prototype 属性是否出现在某个实例对象的原

2021-04-15 09:47:26 108

原创 页面分析器——你打开的页面到底用的什么技术?

前些天我们公司一位小改改问我,要怎么看页面里用的是哪些技术?我第一个反应是 vuetools 满足不了你这个需求吗?满足不了的话还有 react 和 angular,进到应用商店将这些插件都安装一下不就行了吗?但是她一个反问就镇住我了:难道没有一个可以分析页面都用了哪些技术栈的插件吗?一个一个去下载,很麻烦,而且很不友好。一语惊醒梦中人,对呀!有没有一个插件去做将页面里用的技术栈都分析出来呢?带着这个疑问,引出来了今天要介绍的浏览器插件——Wappalyzer!WappalyzerWappalyzer

2021-03-08 10:16:28 848 1

原创 怎么在Github上单独下载一个文件或文件夹

我们经常会在开发过程中上全球最大的同性交友网站查(chao)找(xi)一些优秀的开源项目,来填充自己空虚的内心,经常会用到的命令就是 git clone,使用 clone 来下载整个项目到本地。但是平常还有一种需求就是——你可能只需要其中的一个文件夹或者文件,那么这个时候我们怎么去进行下载呢?github 可没有提供单个文件或文件夹下载的API。不要慌,不要急,下面给大家介绍两种方法来解决问题:一劳永逸——安装 GitZip for github 插件不得不安利一下这款插件的方便,在谷歌应用商城下载安

2021-03-04 17:30:52 19175 8

原创 Vue BUS总线

Vue Bus 总线作用:在vue中实现非父子组件之间通信。场景:bus适合小项目、数据被更少组件使用,或者数据量少的项目。本质:实际上是一个发布订阅者模式的使用,利用 vue 的自定义事件机制,在触发时通过 $emit 向外发布一个事件,而在需要使用的页面,通过 $on 监听事件或者说是注册事件。是一个不具备DOM的组件。它就像是所有组件共用相同的事件中心,用它来作为沟通桥梁,可以向该中心注册发送事件或接收事件。实现:使用一个空的 Vue 实例(bus.js)作为中央事件总线。// bus

2020-12-22 10:27:44 3337

原创 sass 配置全局变量

场景:在前端工程中,我们会经常用到css预编译,有sass,less,styuls等,拿sass来说,通常我们会在项目里建一个variables.scss文件,里面会定义一些公共的样式,可以是单纯的变量,也可以是mixin混入,类似于函数。$activeColor: #043156;$defaultColor: #3f3f3f;/* flex布局 */@mixin flex($justify:space-between, $align: center, $wrap: nowrap) { dis

2020-11-10 09:13:33 5526 1

原创 在vue中二级页面返回一级页面

场景:在vue后台管理端项目,需要实现从列表页面跳到详情页面,再从详情页面返回到列表时,列表页面保持跳转之前的状态。方案一:keep-alive实践证明,效果是实现了,但是带来了其他问题,会将其他页面的状态都缓存住,而我们只是想要缓存一级列表页面的。所以这方案 pass。方案二:mixins和vuex想法是写一个全局的方法,通过 mixins 混入,在需要的页面引进来,这样的话,就可以灵活实现该场景。当然,这里会把列表页面状态存到 vuex 里,在mixins中去调用缓存的状态。具体实现://

2020-11-09 09:00:53 1448

原创 this dependency was not found

在新版的vue-cli中已经帮我们把sass-loader配置好了,放在了util.js里面,之前我们还需要去在webpack.base.config.js中去配置相关的设置,现在只需要安装相应的loader即可。如果还在webpack.base.config.js中去配置,只会重复配置sass-loader,从而导致报错:this dependency was not found...

2020-07-03 09:26:53 517

原创 Module build failed: TypeError: this.getResolve is not a function

这是因为当前sass的版本太高,webpack编译时出现了错误,这个时候只需要换成低版本的就行.卸载当前版本,并安装低版本的 sass-loader 即可。

2020-07-02 09:20:31 193

原创 Taro-reLaunch,按下物理返回键退出小程序

不管在Taro还是小程序里使用 reLaunch API 都会关闭所有页面,打开到应用内的某个页面,这样的话,在安卓上按下物理返回键,就会有退出小程序的BUG出现。

2020-06-30 09:42:28 1299

原创 Vue-router 里 import 动态导入模块报错

router 里 import 报错import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'layout', component: () => import('@/layout/Index') } ]})如果没有安装babel-plu

2020-06-29 09:18:28 4200

原创 IOS 手机中 input 框中粘贴复制触发不了 Keyup 事件

在 IOS 手机中 input 框中粘贴复制触发不了 Keyup 事件:解决方法:1.改为 change 事件2. 改为 input 事件

2020-06-28 09:22:26 877

原创 Taro-样式加载问题

当一个文件目录里有多个文件,且这些文件都引用一个css时,打包小程序并发布以后,会有加载不上样式的问题,这个时候,我们需要把文件做模块化处理,每一个文件对应一个文件目录,并创建对应的css样式,不要几个文件都引用相同的css。一个功能模块对应一个文件夹,里面是对应的jsx文件和css文件。这样再次打包发布后,就好了。——如果都使用同一个文件,那么在打包以后,会在项目最外层生成一个common.wxss,这个时候那些文件都会引这个css文件,在开发环境下是OK的,但是发布到线上以后就有问题了。自定义组件的样

2020-06-24 09:23:24 1165

原创 Taro-跨端环境判断

跨端环境判断因为项目可能不止是小程序使用,也可能打包成 h5,所以这里我们还需要做环境判断,毕竟在 h5 环境下,有的东西是不兼容的,比如Taro.login和Taro.getSetting()都是调用不了的。所以这里就有:// 判断是否是小程序if (process.env.TARO_ENV === 'weapp') {}那么Taro在编译时提供了一些内置的环境变量来帮助用户做一些特殊处理。process.env.TATO_ENV用于判断当前编译类型,目前有weapp / swan / al

2020-06-23 19:03:42 1530

原创 Taro-授权登录

授权登录首先小程序在获取用户信息前应先检查微信是否授权登录,这里需要先获取用户的当前设置——Taro.getSetting// 使用方法一import Taro from '@tarojs/taro'Taro.getSetting({ success (res) {}})// 或者Taro.getSetting().then(res => {})// 使用方法二import Taro, { getSetting } from '@tarojs/taro'// 同上,去

2020-06-22 10:12:50 2446 1

原创 Taro-定位及向下滚动加载

定位使用 Taro 提供的API// 提前将微信小程序的JSSDK准备好放到项目中import AAMapWX from '../../../plugins/wxmap/qqmap-wx-jssdk'Taro.getLocation({ type: 'wgs84', success: function (res) { const latitude = res.latitude const longitude = res.longitude

2020-06-20 10:15:34 1594

原创 Taro-扫码

调用 Taro.scanCode在官网的API中我们可以看到扫码在设备分类里。用法和小程序里的是一样的。支持Promise。import Taro from '@tarojs/taro'Taro.scanCode(params).then(...)参数属性类型默认值必填说明最低版本onlyFromCamerabooleanfalse否是否只能从相机扫码,不允许从相册选择图片1.2.0scanTypeArray.[‘barCode’,‘qrCode

2020-06-19 09:26:14 2468

原创 Taro——分包

分包和微信小程序分包一样,需要在app.jsx中去配置subpackages选项subpackages: [ root: 'pages/distributionOrder/', name: 'distributionOrder', pages: [ 'index', 'add/addOrderInfo', ]]字段类型说明rootString分包根目录(src里的)nameString分包别名,分包预下载时可以

2020-06-18 09:17:39 4097

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除