- 博客(60)
- 收藏
- 关注
RSS订阅
原创 js防抖和节流的区别及实现方式
概念函数防抖(debounce)： 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。比如如下的情况：window对象的resize、scroll事件拖拽时的mousemove事件文字输入、自动
2020-09-27 19:24:48
3197
1
原创 Vue中的修饰符是什么，怎样使用
修饰符 (Modifiers)： 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。一、事件处理修饰符1. 事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. 尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。.st
2021-01-12 19:46:02
2568
原创 关于vue中的vue-router（路由）详细教程（仅供参考）
**前言：**由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。 有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？因为我们一般用Vue
2021-01-12 19:20:26
1791
原创 ue单页面应用刷新网页后vuex的state数据丢失的解决方案
最近在用vue项目，用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。1. 产生原因其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。2. 解决思路一种是state里的数据全部是通过请求来触发action或mutation来改变一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中很显然，第一种方案基本不
2021-01-05 20:56:05
238
原创 axios 默认配置和实例配置的相关配置
axios配置参数有哪些baseURL：请求的域名，基本地址timeout：请求超时时长（ms）url：请求路径methode：请求方法:get,post,put,patch,deleteheaders：请求头params：请求参数拼接在url上data：请求参数放在请求体优先级：axios请求配置 > axios实例配置 > axios全局配置实际开发中axios全局配置一般比较少用到，因为它的局限性比较大，一般只能设置baseURL，timeout，url，其他的metho
2021-01-05 19:14:14
1141
原创 vue-router（路由）基本使用的详细教程
一、安装如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router。这里还是说一下安装：npm install vue-router二、创建组件如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：import Vue from
2020-12-29 20:42:54
1338
原创 【MongoDB】索引属性之唯一索引的创建和行为
唯一索引可确保索引字段不存储重复值,即强制索引字段的唯一性。默认情况下，MongoDB在创建集合期间会在_id字段上创建唯一索引。新的内部格式 从MongoDB4.2开始，对于4.2（或更高版本）的featureCompatibilityVersion（fCV），MongoDB使用一种新的内部格式来存储与早期MongoDB版本不兼容的唯一索引。新格式适用于现有的唯一索引以及新创建/重建的唯一索引。一、创建唯一索引创建唯一索引，要使用db.collection.createIndex()方法，并且
2020-12-29 18:49:25
2760
1
原创 面试中，如何手写promise才能让面试官满意
导语：你肯定使用过promise，但是你知道它是怎么实现的吗？它的原理是怎么样的？你能手写一个简单的promise吗？在面试中你也可能会被问到手写一个promise，现在来直接手撕原理和代码吧！！一，promise的状态promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一开始的时候就是pending，随后经过操作就会产生出另外两种状态fulfilled和rejected，并且可以通过这两个状态去调用不同的处理函数。二，仅仅考虑resol
2020-12-22 18:37:42
1174
1
原创 html页面中顶部的DOCTYPE的作用
我们来看这个！DOCTYPE html1，DOCTYPE是啥？有什么作用？DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。它的作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。要建立符合标准的网页，DOCTYPE的声明是必不可少的，因为他要告诉浏览器怎么解析这个网页文件。2，如果我删除了这个Doctype首先我们得明白Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HT
2020-12-21 18:43:26
432
原创 利用mock.js模拟前端开发调用后台数据
导语：相信大家都遇到过一个问题，前端开发要用到api，但是后端的人员还没开发好，那可怎么办啊，前端没办法调试，莫着急，用mock解决这个问题。一，mock的作用当后端api接口还没开发好，前端又想马上调试，就可以使用 mock，你可以在开发环境代码内置 Mock，拦截请求，模拟真实 API 返回。二，如何使用mock？先安装一下npm install mockjs1，哪里需要写哪里法var data = Mock.mock({ "string|1-10": "#", "object":
2020-12-15 18:54:52
333
原创 前端算法之数组扁平滑处理
一、什么是数组扁平化扁平化，顾名思义就是减少复杂性装饰，使其事物本身更简洁、简单，突出主题。数组扁平化，对着上面意思套也知道了，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层的数组。flatten 可以使数组扁平化，效果就会如下let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];arr = arr.flat(Infinity);从
2020-12-11 15:30:33
238
原创 Web离线存储
Web存储机制Web Stroage的两个主要目标：提供一种在cookies之外存储会话数据的途径提供一种存储大量可以跨会话存在的数据的机制—— storage类型：提供最大的存储空间来存储名值对儿。有如下方法：clear()： 删除所有值。firefox中没有实现。getItem(name)： 根据指定的属性名字获取对应的值。key(index)： 获得index处的值的名字（index处的属性名）。removeItem(name)： 删除由name指定的名值对儿。
2020-12-07 19:51:30
232
原创 ES6中变量的解构与赋值
1.数组的解构赋值1.1基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。的确高大上了许多有木有。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
2020-12-07 19:03:08
107
原创 如何解决前端的跨域
1、首先一个域名的组成：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域JavaScript出于安全方面的考虑，不允许跨域调用其它页面的对象。跨域就可以理解为因为JavaScript同源策略的限制，a.com下的js无法操作b.com或者c.a.com域名下的对象。2、处理跨域的方法：处理方法一——在后台进行处理：通过在同域名下web服务器创建一个代理例如某个前端页面想要调用上海的服务器，但它们不是同源的，但是它和北京的服务器是同源的，那就可以通过让北京服务器作为一个代理，先让北
2020-11-30 00:00:28
747
原创 前端路由hash、history、location的简介
理解前端路由，前端路由都有哪些？1、理解路由2、前端路由方法（1）history对象（window.history）（2）location对象（主要是Hash）3、hash (locstion对象属性) 和 pushState (history对象属性)对比1、理解路由直接可理解为根据不同的url地址来显示不同的页面或内容的功能，最开始的后端路由有一个很大的缺点就是每次路由切换的时候都需要去刷新页面，然后发出ajax请求，然后将请求数据返回回来，那么这样每次路由切换都要刷新页面对于用户体验来说
2020-11-29 23:48:05
446
原创 如何管理时间，moment.js插件来教你
moment.js官网一.使用相对时间 console.log(moment("20101124", "YYYYMMDD").fromNow()); // 10年前 console.log(moment("20151124", "YYYYMMDD").fromNow()); // 5年前 console.log(moment().startOf('day').fromNow()); // 20小时前 console.log(moment().endOf('day').fromNow(
2020-11-24 20:09:23
248
原创 个人对cookie和session的理解
在web开发中，总是有看到cookie还有session这两个东西，那么它们到底有什么用？本人将在这篇文章为你们介绍一下个人对cookie和session的理解。因为http协议是无状态的，每次的请求访问都是独立的，没办法追踪到上一次访问的状态，后端就无法知道这次的访问是哪位，所以就要一些技术来帮助后台辨别这次的请求是谁。而这两者Cookie与Session都是Web程序中常用的技术，用来跟踪用户的整个会话。Cookie通过在客户端记录信息确定用户身份，（相当于你有一张身份证，跟后端交流前要拿出身份证
2020-11-24 18:50:39
164
1
原创 简单的理解js单线程和异步
js为什么是单线程的呢？为什么不把它变成多线程的语言，现在的多线程语言不是很流行吗？根据这几个问题，我们来一起了解一下js单线程和异步一、为什么JavaScript是单线程？JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。同时DOM渲染和js代码的执行共用一个线程，这决定了它只能
2020-11-15 22:46:50
251
原创 浏览器输入url之后，发生的事儿
浏览器输入url之后发生了什么一，DNS解析二，建立TCP连接（三次握手）三，发送http请求四，服务器处理请求五，返回响应结果六，关闭TCP连接（四次挥手）七，浏览器渲染页面一，DNS解析例如我们输入了www.baidu.com，一共有六个过程。但是说白了就是把它变成类似于172.12.342.222这样的IP地址，浏览器就能去找他了。不过我们还是讲一讲这六个过程是什么吧！二，建立TCP连接（三次握手）简单的讲就是，一个人（用户浏览器）走到银行柜台，说你叫个人来给我办理业务，一个
2020-11-15 22:38:51
100
1
原创 js栈内存和堆内存以及用JavaScript实现静态私有变量，静态私有方法，私有变量，私有方法，公有属性，公有办法
js栈内存和堆内存内存分配与垃圾回收：在编译阶段，除了声明变量和函数，查找环境中的标识符这两项工作之外，还会进行内存分配。不同类型的数据会分配到不同的内存空间一般来说栈内存线性有序存储，容量小，系统分配效率高。而堆内存首先要在堆内存新分配存储区域，之后又要把指针存储到栈内存中，效率相对就要低一些了。垃圾回收方面，栈内存变量基本上用完就回收了，而堆内存中的变量因为存在很多不确定的引用，只有当所有调用的变量全部销毁之后才能回收。栈内存：引擎执行代码时工作的内存空间，除了引擎，也用来保存基本值和引用类
2020-11-09 20:25:55
242
原创 一道经典JS面试题——附多种解法，以及全部代码
<h2>点击以下三个li，输出分别是什么？</h2> <ul> <li>Item 0</li> <li>Item 1</li> <li>Item 2</li> </ul> <script> var lis = document.getElementsByTagName('li'); for (var i = 0; i < ..
2020-11-09 19:36:23
169
原创 jQuery—绑定事件的四种方式
jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。一：bind(type,[data],function(eventObject))bind是使用频率较高的一种，作用就是在选择到的元素上
2020-11-01 20:23:58
9032
原创 如何解决js中下拉框blur事件与click事件冲突
一、blur事件和click事件简述blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。示例1：blur事件为表单事件<input type="text" id="tel"><script> document.addEventListener("blur", function(){ console.log("my doc
2020-11-01 20:11:41
985
2
原创 惊讶！！js原生的拖拽居然有两种方法
一.mousedown、mousemove和mouseup 拖着目标元素在页面任意位置如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。1.onmousedown：鼠标按下事件2.onmousemove：鼠标移动事件3.onmouseup：鼠标抬起事件重点：1、一定要绝对定位，脱离文档流才可以移动。2、绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。3、点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内
2020-10-24 12:07:06
451
原创 震惊！！这居然是——JQuery的简介
1.JQuery概念JQuery的概念：一个JavaScript函数库(框架)。简化JS开发jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互JavaScr
2020-10-24 11:28:30
83
原创 惊讶！！！CSS3 关键帧动画——animation与@keyframes竟然是这样使用
在设计动画效果时，关键帧动画是一个很重要的功能，它设置了一段连续的动画。1.关键帧动画（@keyframes）@keyframes语法：@keyframes <animation-name>: {<keyframes-selector>{<CSS-styles>}}其取值说明如下：<animation-name>:动画的名称。必须定义一个动画的名称，方便与动画属性animation绑定。<keyframes-selector>:动画持续时
2020-10-18 22:37:14
777
原创 震惊——JS中对象被保护！！！居然无法增删改查！！
JS中的保护对象保护数据属性:ES5将每个数据属性，都变成一个缩微的小对象： { //四大特性: value: //实际存储属性值 writable: true/false, //控制是否可修改 enumerable: true/false, //控制是否可被for in遍历 //但是，用.依然可强行访问该属性 configurable: true/false, //控制是否可删除该属性 //控制是否可修改另外两个特性
2020-10-18 22:13:47
214
原创 震惊——JS中百度地图开放平台API尽然是这样使用
百度地图js——API使用基本使用引用百度API资源<!--引用资源--><!--百度地图基础API--><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hHK8kZt3v2umxvzLtST4rCMyiZRFnfbc"></script>百度地图容器<div id="container"></div>实例化百
2020-10-11 23:23:47
1057
原创 javascript——对事件绑定和普通事件的理解
什么是事件绑定,什么是普通事件？事件绑定：事件是用户或者浏览器自身进行的特定的行为，这些事件都有自己特定的名字，如：点击，加载，鼠标经过等。用于响应事件并进行特定的处理的函数就是事件处理程序。而事件绑定就是为指定的某个事件绑定指定的事件处理程序。普通事件:给html元素添加一个特定的属性(如：onclick)；为什么要使用事件绑定?普通事件有一个缺点,如果在普通事件里对某个节点进行两次委托事件（onclick）操作时会出现覆盖的问题,因此需要使用到事件绑定.//普通事件html:
2020-10-08 19:42:13
285
原创 JS——面向对象编程简述
JavaScript 面向对象编程面向对象介绍什么是对象？Everything is object （万物皆对象）对象到底是什么，我们可以从两次层次来理解。(1) 对象是单个事物的抽象。一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。(2) 对象是一个容器，封装了属性（property）和方法（method）。属性是对象的状态，方法是对象的行为（
2020-10-07 18:01:18
254
原创 js——个人对对象深度克隆的理解，以及ES6中的深度克隆的实现
克隆的概念克隆分为两种：深克隆和浅克隆深克隆所有元素或属性完全复制，与原对象完全脱离，也就是说所有对新对象的修改都不会映射到原对象中浅克隆原始类型为值传递，对象类型仍为引用传递，所以改变新对象中的引用值会改变原对象中简要介绍：js中的对象的赋值，其实是实现了对象的引用，在赋值对象上修改属性会影响到原来的对象。–ES5中我们可以通过递归函数来实现深层次的克隆。–ES6中我们可以通过Object.assign的方式来实现深度克隆。1.javascript(ES5)中对象的克隆function
2020-10-04 23:50:45
295
2
原创 html5中的svg
一、什么是svg？SVG 全称是 Scalable Vector Graphics，即，矢量图。SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先，不要
2020-10-02 14:17:01
545
原创 前端HTML5中Canvas标签的介绍及基本使用（二）
六、绘制文本绘制文本的两个方法canvas 提供了两种方法来渲染文本:fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的. var canvas = document.getElementById('tutorial'); var ctx = canvas.getContex
2020-09-27 22:35:29
304
原创 前端HTML5中Canvas标签的介绍及基本使用（一）
一、canvas简介 <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一
2020-09-27 21:05:07
1569
原创 JS--利用setTimeout模拟setInterval
setTimeout(fn, time)，超时调用，在时间大于等于 time 时调用；setInterval(fn, time)，是间歇调用，每隔 time 调用一次。从载入后,每隔指定的时间就执行一次表达式，只要窗口不关闭或 clearInterval() 调用就会无限循环下去虽然两者不一样，但是却可以相互模拟。具体使用那个，以具体的需求和场景具体分析，就像for循环可以模拟所有的循环一样(包括分支，以及do while一样)。一般情况下 setTimeout() 用于延迟执行某方法或功能；setI
2020-09-20 23:24:03
727
原创 JS-原型和原型链面试题解析
题目1.如何准确判断一个变量是数组类型 var arr = []; typeof arr; // obj typeof无法判断是不是数组 使用 instanceof 方法 arr instanceof Array // true 如何检测数据类型 1、验证原型对象 Object.getPrototypeof(obj) 要检测的类型的构造函数.prototype 2、验证构造函
2020-09-20 23:10:04
2077
3
原创 js中的定时器的简介
项目中，经常会用到定时器来实现数据实时更新、时间等等。简单的介绍一下：Javascript中的定时器有两种，setInterval和setTimeout，而定时器的作用就是延迟执行。一、定时器的写法setInterval(expression,milliseconds)；setTimeout(expression,milliseconds)；上式中，expression既可以是字符串，也可以是匿名函数，或者也可以是一个函数名。但是，函数名中不能传参。第二个参数为延迟要执行的时间。具体写法如下：
2020-09-13 20:22:40
231
原创 通过JS如何获取DOM节点元素
JS中获取DOM元素的方法总共有5种：1.通过id值。2.通过name属性值。3.通过指定的标签名。4.通过class类名。5.通过css选择器（css选择器如何选择，就可以如何选择）1、通过id选取元素（getElementById）1）使用方法：document.getElementById(“domId”)其中，domId为要选取元素的id属性值2）兼容性：低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的，并且会返回匹配name属性的元素
2020-09-13 16:47:51
3451
原创 利用JS实现三门问题
三门问题（Monty Hall problem），是一个源自博弈论的数学游戏问题，大致出自美国的电视游戏节目Let’s Make a Deal。问题的名字来自该节目的主持人蒙提·霍尔（Monty Hall）。这个游戏的玩法是：参赛者会看见三扇关闭了的门，其中一扇的后面有一辆汽车，选中后面有车的那扇门就可以赢得该汽车，而另外两扇门后面则各藏有一只山羊。当参赛者选定了一扇门，但未去开启它的时候，节目主持人会开启剩下两扇门的其中一扇，露出其中一只山羊。主持人其后会问参赛者要不要换另一扇仍然关上的门。问题是：换另
2020-09-06 20:27:11
293
原创 JS——利用面向对象的思想实现2048
html部分代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2048</title> <link rel="stylesheet" href="cs
2020-09-06 20:18:59
211
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人