自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 使用路由导航守卫解决路由变化,页面不刷新的问题

路由导航守卫所谓的导航指的就是我们的路由变化,在许多时候经常遇到在请求接口,频繁切换路由地址的时候,路由地址变化了,但是页面并没有刷新,所有这个时候就可使用路由导航守卫解决页面刷新问题。//在我们页面路由地址发生变化的时候,我们就在重新执行一次发送请求,来渲染页面传入想对应的动态参数。beforeRouteUpdate(to,from,next){ //这里的this.getShop是将请求的接口封装成了一个函数,在解决问题的时候,可以直接写你发送请求的方法,但是为了代码的优化,所以可以直接封装

2020-08-26 22:17:08 1300 1

原创 路由导航守卫的使用

理解导航守卫导航就是我们所说的路由在发生变化,当路由发生变化的时候,我们想要做的事情,这就是导航守卫。关于导航守卫 我们一一介绍一下,在实际开发中用的也是比较多的。全局前置守卫全局守卫顾名思义,就是用来检测全局所有的路由变化,代码写在路由页面。var loadingInstance = null;var hasToken = store.state.tokenrouter.beforeEach((to,from,next)=>{ /** * 这里函数执行时候 *

2020-08-26 20:44:14 1592 1

原创 javascript正则表达式入门基础总结

前言在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个浏览器可以识别的规则,有了这个规则,浏览器就可以帮我们判断某些字符是否符合我们的要求。但是,我们为什么要使用正则表达式呢?下面我们就看一下下面这个业务场景。验证QQ号的合法性/***合法qq号规则:1、5-15位;2、全是数字;3、不以0开头*///1.在不使用正则表达式的时候,我们可能会这样判断QQ号的合法性var qq="6666666a6666"; if(qq.length&

2020-07-17 22:35:45 211

原创 详细列举JavaScript八张思维导图

前言:无论是从最初的jQuery还是现在火热的Angular,Vue,React等前端框架,甚至是nodejs等服务端的兴起,归根到底核心还是JavaScript。于是梳理一下这些年学习以及使用JS的心得。本系列文章主要是针对JS的相关知识点做一个类似提纲似的提炼,一来可以作为今后温故知新的参照;二来也是希望能够帮助大家更加系统清晰的理解JS这门语言。js基本概念js操作符js基本语句js数组用法Date用法JS字符串用法JS编程风格JS编程实践...

2020-07-16 22:21:18 208

原创 js怎么实现无缝轮播(附代码)

1、首先,说一下思路,如下图所示:```javascript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 500px; height: 300px; positi

2020-07-16 22:05:06 181

原创 JavaScript原型详解(通俗易懂)

JavaScript原型详解1,前言下面是2008年Github创建以来,各种编程语言的排名情况其中JavaScript自2013年之后就盘踞第一名,成为github上被使用最多的语言,早期,JS的使用还主要集中于浏览器中,但是随着node.js进军服务器开发和React Native逐渐向移动端渗透,一个属于JS的全栈时代就要来临了。而且JS界还流传一句名言:“所有能用JS开发的应用程序,最终都会用JS来开发”。我就问你怕不怕?好了,说了这么多,我并不是想说JS为世界上最好的语言(显然PHP才是

2020-07-10 00:05:42 241

原创 擒贼先擒王,详细谈一下JavaScript作用域链(Scope Chain)

擒贼先擒王,详细谈一下JavaScript作用域链(Scope Chain)前言我们都知道一个执行上下文的数据(变量、函数声明和函数的形参)作为属性存储在变量对象中,同时我们也应该知道变量对象在每次进入上下文时创建并填入初始值,值的更新出现在代码执行阶段。那么咱们专门讨论与执行上下文直接相关的更多细节,这次我们将提及一个议题——作用域链。定义如果要简要的描述并展示其重点,那么作用域链大多处与内部函数相关。我们知道,ECMAScript允许创建内部函数,我们甚至能从父函数中返回这些函数。var x

2020-07-09 23:38:08 118

原创 DOM的事件机制以及事件委托的学习

前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用,希望对你们有些帮助和启发!一、DOM事件级别DOM级别一共可以分为四个级别:DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别:DOM 0级事件处理,DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容,所以没有DOM 1级事件。1.DOM 0级事件el.οnclick=function(){}// 例1var btn = document.getEle

2020-07-08 23:01:25 181

原创 学习 BFC (Block Formatting Context)

学习 BFC (Block Formatting Context)什么是BFCBFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。要明白BFC到底是什么,首先来看看什么是视觉格式化模型。视觉格式化模型视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制,它也是CSS中的一个概念。视觉格式化模型定义了盒(Box)的生成,盒主要包括了块盒、行内盒、匿名盒(没有名字

2020-07-08 22:18:59 166

原创 什么是Dom,以及Dom的常见的基础的增删改查

什么是 DOM ?DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准。W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。DOM 常用方法获取节点// 通过id号来获取元素,返回一个元素对象document.getElementById(idName) // 通过name属性获取id号,返回元素对象数组

2020-07-06 23:44:12 182

原创 通过运行机制看this绑定 、作用域、作用域链和闭包

通过运行机制看this绑定 、作用域、作用域链和闭包一、引言了解js的运行机制有助于我们在日常的工作中,写成高质量的代码,减少bug的产生,节约维护成本。也有助于我们通过造火箭的面试。了解JavaScript引擎。通过运行机制看作用域和作用域链。通过运行机制理解this的绑定和优先级。通过运行机制理解闭包。二、渲染引擎 | JavaScript引擎(JavaScript Engine)了解运行机制之前,我们先来搞清楚几个基本概念。2.1 渲染引擎渲染是根据描述或者定义构建一个数据模型

2020-07-03 22:44:53 180 1

原创 「前端进阶」JS中的栈内存堆内存

「前端进阶」JS中的栈内存堆内存引言JS的内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。其中栈存放变量,堆存放复杂对象,池存放常量,所以也叫常量池。栈数据结构栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,这一端称为栈顶。栈被称为是一种后入先出(LIFO,last-in-first-out)的数据结构。由于栈具有后入先出的特点,所以任何不在栈顶的元素都无法访问。为了得到栈底的元素,必须先拿掉上面的元素。在这里,为方便理解,通过类比乒乓球盒子来分析栈的存取方式。这

2020-07-03 22:09:07 363

原创 详解闭包与垃圾回收机制的关系

简介像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()。相反,JavaScript是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“自动”是混乱的根源,并让JavaScript(和其他高级语言)开发者错误的感觉他们可以不关心内存管理。内存生命周期不管什么程序语言,内存生命周期基本是一致的:分配你所需要的内存使用分配到的内存(读、写)不需要时将其释放\归还所有语言第二部分都是明确的。第一和第

2020-07-03 21:50:07 244

原创 闭包面试题详解

闭包详解前言现在去面试前端开发的岗位,如果你对面试官也是个前端,并且不是太水的话,你有很大的概率会被问到JavaScript中的闭包。因为这个闭包这个知识点真的很重要,还非常难掌握。什么是闭包什么是闭包,你可能会搜出很多答案…《JavaScript高级程序设计》这样描述:闭包是指有权访问另一个函数作用域中的变量的函数;《JavaScript权威指南》这样描述:从技术的角度讲,所有的JavaScript函数都是闭包:它们都是对象,它们都关联到作用域链。《你不知道的JavaScript》这

2020-07-02 23:59:29 1033

原创 JavaScript全局作用域,函数作用域的详细解读

JavaScript全局作用域,函数作用域的详细解读全局作用域:作用域,是指变量的生命周期(一个变量在哪些范围内保持一定值)。全局变量:生命周期将存在于整个程序之内。能被程序中任何函数或者方法访问。在 JavaScript 内默认是可以被修改的。全局变量,虽然好用,但是是非常可怕的,这是所有程序员公认的事实。显式声明:带有关键字 var 的声明;<script type="text/javascript"> var testValue = 123; va

2020-07-01 23:24:50 271

原创 JS中的数据类型的判断(typeof,instanceof,constructor)

JS中数据类型的判断( typeof,instanceof,constructor,Object.prototype.toString.call() )我们在写封装的插件或者函数时,常常用到JS的数据类型判断,典型的案例就是深度拷贝函数用到数据类型判断,这个知识点在面试的时候也是经常考到的一个问题。今天在这里总结一下我个人遇到的可以判断数据类型的几种方式。如果有哪里写的不对还请指点一下小弟,以免文章误导他人。1. typeof关键字console.log(typeof 2);

2020-06-19 20:28:44 1110 1

原创 JS数据类型与隐式类型转换(超详细介绍)

JS数据类型与隐式类型转换执行环境执行环境是js中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象(variable object),环境中定义的所有变量和函数都保存在这个对象中。虽然我们写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它。全局执行环境全局执行环境是最外围的一个执行环境。根据ECMAScript实现所在的宿主环境不同,表示执行环境的对象也不一样。在Web浏览器中,全局执行环境被认为是window对象

2020-06-17 20:39:33 244 2

原创 带你如何玩转github

如何玩转github很多的小伙伴,经常会有这样的困惑,我看了很多技术的学习文档、书籍、甚至视频,我想动手实践,于是我打开了GitHub,想找个开源项目,进行学习,获取项目实战经验。这个时候很多小伙伴就会面临这样的问题:“我不会搜啊,我该怎么找呀?”,最终只能放弃。相信看完这篇文章,你就可以学会如何精准地在GitHub搜索项目。开源项目的组成部分在讲清楚之前呢,我们先来了解一下一个开源项目有哪些组成部分:name: 项目名description: 项目的简要描述项目的源码README.md:

2020-06-16 21:16:22 180

原创 如何导入bootstrap以及使用栅格系统的注意点

如何导入bootstrap以及使用栅格系统的注意点前言:bootstarp目前可能因为版本的原因,可能实用度并不是太高,但是现在作为一个前端开发人员,还是需要了解bootstrap的导入使用方式。第一种、线上导入首先进入bootstrap的官网 然后点击中文文档,会有简单的介绍 然后下面我直接贴出线上导入的代码<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.ne

2020-06-10 19:56:32 460

原创 关于node.js环境配置 以及如何配置一个小的http:服务器

标题Nodejs下载到其他盘后的环境配置+第一个http服务器的构建简单来说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。npm是它的包管理器。一、官网下载nodejs,路径假设放在D盘里了。二、先打开cmd 直接输入node -v和npm -v验证一下版本号,确认安装成功三、npm config ls查看当前目录设置

2020-06-09 21:10:29 203

原创 网页适配 iPhoneX,就是这么简单

标题网页适配 iPhoneX,就是这么简单前言iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,以下是处理前后效果图:适配之前需要了解的几个新知识安全区域安全区域

2020-06-08 19:32:49 371 2

空空如也

空空如也

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

TA关注的人

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