- 博客(69)
- 收藏
- 关注
RSS订阅原创 分分钟教你搭建Vuepress漂亮主题博客
前言想要分分钟搭建自己博客，可以直接跳到最后，教你如何分分钟搭建博客。速览 这是一款 Vuepress 主题，集成了博客所需的分类、TAG墙、分页、评论等功能。 主题追求极简，配置上手简单，适配移动端。 预览地址 主题插件GitHub地址 个人博客部署GitHub地址 博客效果展示：主题使用安装主题创建一个新的项目 my-blog：mkdir my-blogcd my-blog初始化 yarn 或 npm ：yarn init 或 npm init -y安装
2021-12-09 13:51:55
1648
原创 我如何搞懂Javascript系列之原型和原型链
理解原型JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链。构造函数创建对象JavaScript 中使用 new 操作符，通过构造函数初始化新对象。我们先使用构造函数创建一个对象。function Ninja() { this.swung = true;}const ninja = new Ninja()console.lo
2020-05-13 23:28:18
532
原创 Vuepress 快速搭建博客--一款你值得拥有的博客主题
速览 这是一款 Vuepress 主题，集成了博客所需的分类、TAG墙、分页、评论等功能。 主题追求极简，配置上手简单，适配移动端。 预览地址 GitHub地址 博客效果展示：主题使用安装主题创建一个新的项目 my-blog：mkdir my-blogcd my-blog初始化 yarn 或 npm ：yarn init 或 npm init -y安装 v...
2020-05-02 23:18:33
1148
5
原创 深入Js之我是如何搞懂作用域和闭包的
写在前面本文将深入剖析 JavaScript 里面的作用域和闭包概念，阅读完本文，你不仅能学好作用域和闭包，同时也能自如地应对面试官有关的相关问题。作用域编译原理对作用域的定义：作用域是指声明的变量在程序中的一个区域，在其中对变量的使用都指向这个声明。如果仅通过阅读程序就可以确定一个变量的作用域，那么语言使用的是词法作用域，否则，这个语言使用的是动态作用域。作用域用一句话概括就是规定...
2020-04-16 15:43:23
220
原创 前端面试必备宝典--知识点深入整合篇
前言前端跳槽面试必备宝典，宝典在手，offer我有。想要跳槽找工作的时候，大家都会或多或少准备啃啃面经。由于之前刚开始找工作自己整理的面试题都是浅尝辄止，所以找到工作还是有点难度的。因此，在这里整理了我读过的精华干货。深入浅出的学习知识点的同时，也为下一次跳槽积蓄能量。希望对自己将来的跳槽有所帮助的同时，也对你有益，共勉之。面试秘籍 面试官到底想看什么样的简历？ 看完跳槽少说涨 5 K，...
2020-04-02 16:51:59
406
原创 vue -- watermark水印添加方法
前言项目生成公司水印是很普遍的需求，下面是vue项目生产水印的方法。话不多说，复制粘贴就可以马上解决你的需求。步骤1创建watermark.js文件。目录结构/** 水印添加方法 */let setWatermark = (str1, str2) => { let id = '1.23452384164.123412415' if (document.getEle...
2020-03-18 23:23:17
4019
2
原创 深入理解浏览器存储
前言随着Web应用程序出现以来，人们对与能够直接在客户端上存储信息能力的要求始终没有停止过。应用开发人员在找各种方式将数据存储在客户端上。从刚开始的Cookie存储方案，到现在的Web Storage和indexedDB，本文将主要介绍这三种浏览器存储方式优缺点。Cookie1、Cookie是什么？HTTP Cookie，通常直接叫做cookie，起初是在客户端用于存储会话信息的。该标准要...
2019-12-28 18:56:03
225
原创 JS异步编程方案总结
前言Javcscript是单线程机制，单线程模型指的是，JavaScript只在一个线程上运行。也就是说，JavaScript 同时只能执行一个任务，其他任务都必须在后面排队等待。JavaScript 之所以采用单线程，而不是多线程，原因是不想让浏览器变得太复杂，因为多线程需要共享资源、且有可能修改彼此的运行结果，对于一种网页脚本语言来说，这就太复杂了。异步编程解决了什么问题？单线程的好处是...
2019-12-19 22:43:14
124
原创 CSS水平居中的7种实现方式
前言前端开发中元素居中是最常见和最经常使用到的css技巧，不仅开发中经常会用到，面试官出题考核基础时有时候也会问道这类问题。本文主要介绍水平居中的方法。希望对你我都有帮组。1、text-align: center实现如果父元素是块级元素且里面包含行内元素，则直接给父元素设置 text-align: center, 如果父元素是行内元素的话父元素无法设置宽高，则需要将其设为块级元素displa...
2019-12-11 22:39:51
1050
原创 CSS垂直居中的10种实现姿势
前言前端开发中元素居中是最常见和最经常使用到的css技巧，不仅开发中经常会用到，面试官出题考核基础时有时候也会问道这类问题。本文主要介绍10种垂直居中的方法。希望对你我都有帮组。1、line-height+height实现如果子元素是行内文本元素的话，只要设置父元素的height和line-height高度一样就可以垂直居中。HTML<div class="parent">...
2019-12-11 22:39:11
334
原创 实现三栏布局5种方式
前言前端开发中，布局是前端基础的内容，而其中三栏布局在实际开发和面试中最常见，三栏布局是指中间自适应两边固定宽，而我们经常使用的淘宝首页（pc端）就是典型的三栏布局实现的。下面总结了五种三栏布局方式，希望自己学习总结的同时对大家有所帮组。1、左右浮动布局<!DOCTYPE html><html lang="en"><head> <meta c...
2019-12-10 00:06:13
273
原创 Javascript浅拷贝和深拷贝
前言浅拷贝和深拷贝在前端开发中是非常重要的知识点，有时候面试官也非常喜欢问到这点，相信很多人只是听过这两个词，不明白他们的意思和涵义，这里将会浅显的讲解浅拷贝和深拷贝。总结学习的同时，希望大家也会有点收获。Javascript的两种变量类型1、JavaScript变量的类型分为两种： 基本类型和引用类型。基本类型是指简单的数据段，有5种类型： Undefined、Null、Boolean...
2019-12-10 00:04:27
132
原创 深入理解this绑定原理
前言前段时间，看了《你不知道的JavaScript》中this的全面解析，讲的特别好，还没看过的小伙伴抓紧去学习，在这边特意整理总结了一波，一起分享学习。在这之前可以先理解一下关于this、call、applay和bind这篇文章。调用栈在了解this绑定原理之前，首页要先了解JavaScript的执行栈。（执行栈也叫做调用栈）如果对调用栈还不了解，可以先详细了解深入浅出JavaScript...
2019-12-08 14:55:14
192
原创 函数节流和防抖
前言浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比DOM交互需要更多的时间和cpu时间，为了提升性能，减少DOM操作，于是，函数节流防抖和应运而生，其函数节流的基本思想是指，某些代码不可以在没有间断的情况下连续重复执行。函数防抖的基本思想是指，一个频繁触发的事情只让最后一次执行。下面就让我们来认真了解下这经常使用的函数节流和防抖。函数节流函数节流：一个函数执行一次后，只有大于设定...
2019-12-08 13:11:52
127
原创 深入学习BFC
前言关于BFC，很多人可能很熟悉，但有些人可能第一次听说。对于熟悉的人无妨也可以温习一下查缺补漏。对于还不是很了解的人认真阅读完后，应该都能够比较深入的理解BFC这个概念、作用以及用法。希望对大家有所收获。BFC是什么？BFC全称为 block formatting context，中文为“块级格式化上下文”。它是一个独立的渲染区域,规定了内部如何进行布局，并且内外部的元素之间互不影响。相对...
2019-12-01 11:36:09
143
原创 一文搞懂浮动原理和浮动清除
前言CSS中正常的流内容或者流布局虽然也足够强大，但是有时候我们希望有一些特殊的布局表现，例如，文字环绕效果，或者元素固定在某个位置，要实现这样的效果，正常的流就有些捉襟见肘。因此，CSS中有float属性，专门通过破坏正常的“流”来实现一些特殊的样式表现。当然，既然有破坏，就有保护其他元素不被破坏的clear属性，本章就来介绍 CSS的float和clear属性。浮动是什么？W3schoo...
2019-11-28 22:12:24
443
原创 Js数组遍历方法总结
前言ES5和ES6都新增了很多对数组遍历的方法，本文主要介绍forEach、map、filter、some、every、reduce / reduceRight、find/findIndex方法，它们可以让我们更方便的编写代码，抛弃for循环。而这些方法有个共同的特点都是不改变原有的数组。forEachforEach是最基本的方法，它的作用是对数组的每个元素执行一次提供的函数。functi...
2019-11-22 22:15:54
571
原创 深入浅出JavaScript执行上下文和执行栈
前言深入了解事物的背后原理，是进阶过程中必须要做和非常重要且值得花时间的事情。作为前端开发来说，JavaScript不言而喻是必备技能了，我想作为一个合格前端来说知道JavaScript程序的内部执行机制也是必须的，而执行上下文和执行栈是其中的关键概念之一，也是难点之一。理解它们同样有助于我们对事件循环机制、闭包、作用域等概念的理解。执行栈（Execution Stack）JavaScrip...
2019-11-22 20:58:58
197
原创 JS定时器机制详解
前言JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。在了解定时器前，你首页也要对事件循环机制有一定的了解。可以先阅读这篇文章Js事件循环（Event Loop）机制。基本概念什么是定时器？定时器是一种异步任务，通常浏览器都有一个独立的定时器模块，定时器的延迟时间就...
2019-11-19 00:58:25
1341
原创 一文搞定闭包原理
前言闭包是JS中重要的内容，对大多数人来说都会觉的闭包本身很好理解，不就是一个函数嵌套一个函数吗？但是再深入解释时，好像不知道要说些啥。不用担心，相信看完这篇你对闭包的理解就不仅仅只停留在概念层面上了。基本概念1、闭包是什么？官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。通俗的解释是：闭包就是能够读取其他函数内部变...
2019-11-16 08:14:04
267
原创 Js事件循环（Event Loop）机制
前言Event Loop是计算机系统的一种运行机制，是个很重要的概念。而Javascript用这种机制来解决单线程运行带来的问题。理解很熟悉将会有利于我们更容易理解Vue的异步事件。JavaScript是单线程的1、什么是单线程？单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。简单来说，即同一时间只能做一件事件。2、Js为什么是单线程？Js是一种...
2019-11-12 23:15:24
173
原创 vue 中几种传值方法
前言vue项目中，组件跟组件之间数据的传递是很普遍的行为，在这里总结几种常见的vue组件跟组件之间传值方式，其中，主要有父子组件，非父子组件传值。父组件向子组件传值方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可。具体可参考官方文档。父组件传递参数代码如下：<template><...
2019-11-11 22:54:06
1774
原创 5种常见函数的写法和调用方式
前言函数在开发中随处可见，经常在开发中我们声明函数就使用了一两种就已经足够了，但是，对我这有梦想的码农来说，这显然是不够的，因此，总结整理了5中常见的声明方式和调用方式。1、函数声明（最常规写法）// 常规函数写法function bar() { console.log('我调用了函数');}// 调用函数bar();2、函数表达式（匿名函数写法）// 匿名函数写法...
2019-11-08 19:40:52
8044
原创 vue 中使用微信分享接口（简单实用）
前言开发微信小程序时，基本上都要接入微信的SDK，而微信也提供了非常多的接口供我们去完成我们想要的功能。微信分享功能常常是我们在开发中常见的需求之一，本文将围绕微信分享接口使用展开，给自己以后碰到需求是查阅的同时，也希望对需要的朋友提供帮组。封装微信分享接口开始之前大家可以先读一读官方微信公众号的接入文档，毕竟官方的才是最权威的。安装 npm install weixin-js-sd...
2019-11-07 19:42:08
1065
原创 vue项目中定义全局变量、函数的几种方法
前言在项目中，经常会复用一些变量和函数，比如用户的登录token，用户信息等。这时将它们设为全局的就显得很重要了，全局变量和全局函数之间有一些相通之处，它们其实很简单，但是有些人可能还不太了解。简单总结分享一波，希望对你有所帮助。定义全局变量原理：使用模块（.js或.vue文件）来管理全局变量，最后使用export暴露出去 （最好导出的格式为对象，方便在其他地方调用），当其它地方需要使用时...
2019-11-07 19:41:20
4826
2
原创 关于let、var和const
前言let和const命令是ES6新增的命令，用来声明变量，这两个变量跟ES5中的var有许多不同，同时let和const也有不一样的地方。并且在ES6中也添加了块级作用域来解决ES5中作用域存在的问题。作用域官方解释是：“一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。”举个例子来形象的解析下上面的定义：function fn ()...
2019-11-07 19:40:30
147
原创 关于箭头函数和普通函数
前言箭头函数是ES6中新增的特性，因其在语言上的简洁性，相信很多人都非常喜欢使用它。对于初学者来说，对于箭头函数的熟练使用与深刻理解需要一个过程。本文总结一下普通函数与箭头函数的区别，希望能够使这一过程加速。基本语法ES6允许使用“箭头”（=>）定义函数。具体的定义，可以看下面的例子。var f = v => v// 等同于var f = function (v) { ...
2019-11-07 19:39:50
416
原创 一文搞懂原型和原型链
前瞻JavaScript是面对对象编程，但是它又跟其他编程语言不一样，不同之处是JavaScript面对对象并不是依赖于抽象类，而是通过原型链。在C++和Java使用new命令时，都会调用"类"的构造函数。而在Javascript语言中，new命令后面跟的不是类，而是构造函数。但是，用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。为了解决这个问题，于是在构造函数设置了prototy...
2019-11-04 23:21:56
314
原创 JS中继承关系的应用
前言面向对象编程很重要的一个方面，就是对象的继承。A对象通过继承B对象，就能直接拥有B对象的所有属性和方法。这对于代码的复用是非常有用的。传统上，JavaScript语言的继承不通过class，需要使用原型机制或者用applay和call方法实现。ES6引入了class语法，则出现了基于class的继承。继承解决了什么？为什么要使用继承？继承解决了什么问题？这里就不卖关子了，直接给出答案。继...
2019-11-02 00:49:44
496
原创 关于JS中正则表达式
前言对于前端开发来说，正则表达式是我们避不开的且需要重点掌握的技能，作为一门用途很广，但是又常常让人望而生畏的技术。花时间去深入理解并且融合贯通是值得。基本概念什么是正则表达式？正则表达式是一种表达文本模式（即字符串结构）的方法，有点像字符串的模板，常常用来匹配文本。通过特殊字符+普通字符来进行模式描述，从而达到文本匹配目的工具。声明方式新建正则表达式有两种方法并且以斜杠表示开始和结束。...
2019-11-02 00:49:12
177
原创 vue中使用vee-validator表单校验
前言由于大部分移动端的组件库都不提供表单校验，因此需要自己封装。目前，使用较多的是async-validator和vee-validator。其中，elementUI组件库提供的表单验证也是基于async-validator，vee-validator是一种基于vue模板的轻量级校验框架。可以根据项目的需求，自行选择合适的方案。本文主要讨论的是vee-validator校验方案。表单校验的封装...
2019-10-31 21:53:54
1598
1
原创 关于new命令
前言JS中有一种说法，叫做一切皆为对象。对象是什么呢？大话来讲，对象是一种容器，里面封装了属性和方法。在每天编程中，最基本的事情也是频繁的干的事情就是创建一个对象，然后使用它干各种各样的事情。创建对象的方法有构造函数创建、语法糖创建、还有new命令创建。当然，本文的标题已经表明这次的主角是new关键字了。new的基本用法new命令的作用，就是执行构造函数，返回一个实例对象。ps:如果忘了使...
2019-10-30 23:29:18
447
原创 关于this、call、applay和bind
前言this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。而this可以动态切换，为JavaScript创造了巨大的灵活性的同时，也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。基本概念this可以用在构造函数之中，表示实例...
2019-10-29 21:21:17
244
原创 关于Sass用法
前言Sass是CSS预处理器，Sass是一种易于使用的样式语言，可帮助减少传统CSS的许多重复性和可维护性挑战。学习Sass可以编写出可重复使用的样式效，也是在工作和面试要求中不可或缺的一项技能了。基本概念什么是Sass？Sass与所有版本的CSS完全兼容。文件后缀名是.scss，意思为Sassy CSS。Sass是CSS的扩展，Sass是CSS预处理器。Sass减少了CSS的重复...
2019-10-27 16:27:50
124
原创 关于Flex布局
前言Flex 是 Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。Flex布局是如今布局的首选方案，本文将介绍flexbox 的基本属性，感受一下Flex的便捷之处。概念属性采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成...
2019-10-27 03:39:17
168
原创 浅谈HTTP缓存机制
前言HTTP缓存不管是在面试中，还是实际开发中都是重中之重。了解HTTP缓存不仅可以轻松自如应对面试，而且也是在实际开发中对性能优化不可或缺的手段。缓存分类浏览器第一次请求资源时，必须请求所有的资源，然后根据响应的header内容来决定，如何缓存资源。一般而言缓存可以分为强缓存和协商缓存两种。强缓存当客户端缓存所要请求的数据时。客户端直接从缓存数据获取数据。当客户端没有缓存所请求的数据时...
2019-10-24 20:11:11
106
原创 前端小程序笔试面试题
前言随便打开一个招聘网站， 你会发现市场上对小程序的需求还挺高的，虽然小程序一部分开发起来还是挺简单ok的，但一些常用的东西还是需要了解一下，因此总结了一篇有关小程序的面试题,希望对你我都帮组。1、微信小程序有几个文件WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件WXSS (...
2019-10-14 23:11:48
1948
原创 前端HTML+CSS笔试题面试题
前言前端的面试和学习都是不可或缺的事情，在这里收集一些高频面试题，供自己现在和以后查阅和查缺补漏的同时，也希望对小伙伴有所帮助。HTML1、HTML语义化的理解1、用正确的标签做正确的事情！2、HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；3、在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。4、搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，...
2019-10-10 15:42:48
2126
原创 前端Vue面试题笔试题
前言收集整理Vue相关的面试题，供自己现在和以后学习和面试，也希望能对点进来的小伙伴有所帮助。Vue基础必备1、v-show 与 v-if 区别1、v-show是css切换，v-if是完整的销毁和重新创建。2、使用 频繁切换时用v-show，运行时较少改变时用v-if3、v-if=‘false’ v-if是条件渲染，当false的时候不会渲染2、Class 与 Style 如何动态绑...
2019-10-10 15:42:12
1091
1
原创 前端Js笔试题面试题
前言为了方便现在和以后前端学习和面试，在此收集和整理了Js相关的笔试面试题，供自己查阅的同时，希望也会对大家有所帮助。数据类型JS的基本数据类型Undefined、Null、Boolean、Number、String、新增:SymbolJS有哪些内置对象？Object 是 JavaScript 中所有对象的父对象数据封装类对象：Object、Array、Boolean、Number ...
2019-10-10 15:41:16
1586
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人