![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 89
谁是听故事的人
白日不到处,青春恰自来。苔花如米小,也学牡丹开。
展开
-
详解xuex、localStorage、sessionStorage、cookie以及session的区别
一、背景1、vuex2、localStorage和sessionStorage3、cookie和session二、异同点三、总结保存的位置&生命周期vuex保存在内存中,关闭浏览器或者刷新页面保存的值会丢失永久保存在本地文件中,不手动清除永久存在临时保存在会话窗口中,关闭浏览器或者关闭标签页保存的数据会丢失,刷新页面数据不会消失cookie保存在客户端浏览器中,可设置失效日期,失效日期前均有效session保存在服务器端,默认储存时间约30分钟容量限制&域名限制&其他vuex。原创 2023-08-18 16:17:55 · 181 阅读 · 0 评论 -
swiper避坑指南(一):切换大小屏之后,activeIndex自动加1问题
最近刚开始用swiper的swiper-slide做滑动的功能,就掉进一个大坑,久久无法脱身……终于在多番与大神交流之后,有了较大的进展,解决了这个问题,记录一下以示庆祝。一、还原问题场景:1、需求:(1)做一个左右手动滑动图片的显示卡片(左右各有一个按钮);(2)分大屏显示和小屏显示:大屏显示3张图片,小屏显示2张图片;(3)若从小屏的b、c图片切换到大屏,不手动进行滑动按钮进行切换的情况下,再次回到小屏还是显示b、c图片。2、问题:对于今天讨论的问题,为了方便清洗的描述,原创 2021-07-27 10:19:31 · 2147 阅读 · 0 评论 -
纯js计算字符串中的字符的个数(汉字算两个字符计算)
function getByteLen(val) { var len = 0; for (var i = 0; i < val.length; i++) { var a = val.charAt(i); if (a.match(/[^\x00-\xff]/ig) != null) { len += 2; }else { len += 1; } } r.原创 2020-09-26 17:06:18 · 1059 阅读 · 0 评论 -
JavaScript按照一定格式输出时间(年-月-日 时:分:秒.毫秒)
在前端开发中,经常会遇到需要实时显示时间的情况。于是封装了常用的用于刷新时间的方法,便于以后开发。var myVar = setInterval(function(){ myTimer() }, 1);//每毫秒刷新一次时间// currTime 为显示时间的元素的id//当前输出方式为:xxxx-xx-xx hh:mm:ss.ms(年-月-日 时:分:秒.毫秒)function myTimer() { var d = new Date(); var ms = d.getMill...原创 2020-06-03 11:29:00 · 983 阅读 · 0 评论 -
从输入URL到前端页面加载中间发生的事件
目录一、从输入 url 到得到 html 的过程二、浏览器渲染页面的过程三、浏览器渲染页面的详细过程分解1、解析与构建DOM树2、构建呈现树3、布局4、绘制一、从输入 url 到得到 html 的过程输入资源地址(地址栏输入、页面跳转、页面加载)发起请求 浏览器缓存机制,优先查找本地有无缓存可用 搜索自身的 DNS 缓存 搜索操作系统自身的DNS 缓存 读取本地的 HOST 文件 发起一个 DNS 的系统调用 浏览器向 DNS 服务器发起域...原创 2020-06-02 21:49:27 · 160 阅读 · 0 评论 -
Ajax的状态值readyState和状态码status的研究
Ajax的状态值readyState和状态码status的研究一、状态值readyState和状态码status的区别readyState:是指运行Ajax所经历的状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤,通常使用ajax.readyState获得;status:是指无论AJAX访问是否成功,由HTTP协议根据所提交的信息,服务器所返回的HTTP头信息代码,使用“ajax.status”获得。总结:可以简单的理解为state代表一个整体的状态。而status是...原创 2020-06-02 15:32:17 · 504 阅读 · 0 评论 -
Ajax请求的五个步骤
Ajax请求的五个步骤一、定义1、什么是AjaxAjax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。2、同步与异步的区别同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。异步提交:当用户发送请原创 2020-06-02 14:01:22 · 170838 阅读 · 52 评论 -
JavaScript常见的垃圾回收机制
目录一、JavaScript常见的垃圾回收机制1、标记清除1.1、工作原理1.2、工作流程2、引用计数2.1、工作原理2.2、工作流程二、什么情况下会引起内存泄漏?1、意外的全局变量引起的内存泄漏2、闭包引起的内存泄漏3、没有清理的DOM元素引用4、被遗忘的定时器或者回调5、子元素存在引用引起的内存泄漏三、什么放在内存中?什么不放在内存中?1、基本类型2、引用类型四、栈和堆的区别1、堆栈空间分配区别2、堆栈缓存方式区别3..原创 2020-05-21 09:32:24 · 736 阅读 · 0 评论 -
js中的深拷贝和浅拷贝总结
一、概念JavaScript中的数据分为基本类型和引用类型,一般基本类型的数据占用内存大小确定,保存于栈中;引用类型的数据由于在创建之初数据占用内存的大小不确定,但是保存数据的地址占用内存大小确定,因此引用类型的数据实体保存于堆中,按需分配,引用类型在堆中保存数据实体的起始地址保存于栈中。当解释器寻找引用类型的值时,会首先检索其在栈中的地址,取得地址后再从堆中获得数据实体。一般来说,浅拷贝...原创 2020-04-11 18:03:01 · 623 阅读 · 0 评论 -
几种遍历一个对象包含的可枚举属性的方法详解【下】(for...in、Object.keys()、JSON.stringify()、Object.assign()等)
前言对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)let obj = { foo: 123 };Object.getOwnPropertyDescriptor(obj, 'fo...原创 2020-04-10 12:08:08 · 714 阅读 · 0 评论 -
几种遍历一个对象包含的所有属性的方法详解【上】(Object.getOwnPropertyNames(obj)、Reflect.ownKeys(obj))
前言对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)通过字面量方式创建一个对象obj,并获取其自有属性foo的属性描述符。代码如下所示:let obj = { foo: 123...原创 2020-04-09 19:26:45 · 1177 阅读 · 0 评论 -
JavaScript中__proto__、prototype以及constructor的详细讲解【2】
初学JavaScript的时候也一样搞不清楚__proto__、prototype以及constructor三者之间的关系,于是经过多方查阅资料和请教前辈,今天写出来算是自己好好总结了一下。一、知识储备首先,要明确以下几点:1、在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。即:对象具有属性_...原创 2020-04-08 17:39:52 · 117 阅读 · 0 评论 -
JavaScript中__proto__、prototype和constructor的详细讲解【1】
作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。可通过以下方式检测引擎是否支持__proto__属性:Object.getPrototypeOf({__proto__: null}) === null;//返回true表示支持,否则表...原创 2020-04-08 17:30:36 · 371 阅读 · 1 评论 -
javaScript动态加载js文件
1、利用原生js代码加载js文件function loadJS( url, callback ){ var script = document.createElement('script'),fn = callback || function(){}; script.type = 'text/javascript'; if(script.readyState){//IE...原创 2020-03-30 15:39:05 · 873 阅读 · 0 评论 -
js中的深拷贝和浅拷贝详解
一、浅拷贝与深拷贝应用的数据类型简介js数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型。基本数据类型的特点: 直接存储在栈(stack)中的数据,分配的内存大小确定。引用数据类型的特点: 存储的是该对象在栈中引用,真实的数据存放在堆内存里,动态分配内存,内存大小不定,即引用数据类型在栈中存储了指针,该指针指...原创 2020-03-29 21:09:49 · 800 阅读 · 0 评论 -
常见的JavaScript内存泄露原因及解决方案
前言内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。即指由于疏忽或错误造成程序未能释放已经不再使用的内存。 内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费。这里就讲一些常见会带来内存泄露的原因。1. 全局变量JavaScript可以处理没有声明的变量:一个未声明的变量的引...原创 2020-03-11 17:29:15 · 2776 阅读 · 0 评论 -
判断接口返回数据中图片是否加载完成
有时候对请求到的数据进行加载的过程中,当包含大量图片且图片比较大(多)导致加载比较慢的时候,直接获取容纳接口内容元素的clientHeight 属性会印图片未加载的部分出现偏差,因此这种情况下可以对接口中返回的图片数据进行是否加载完成的判断,当所有图片都加在完成之后才能得到正确的clientHeight 属性值。方法如下://假设contentData为接口返回的json数据,需要把其中cont...原创 2020-03-10 14:43:06 · 516 阅读 · 0 评论 -
javaScript的原型机制
之前对于原型、原型链这部分比较模糊,最近刚好有时间,整理一下以加深理解记忆一、相关知识介绍1、属性_proto_属性:对象特有的,由于js中一切皆对象,故函数中也包含_proto_属性。2、对象对象是由构造函数创建。js中一切皆对象。因此构造函数也是对象。3、结论(1)所有对象原型链的顶端是Object.prototype;(2)所有对象的_proto_属性均指向Functi...原创 2020-03-03 16:05:42 · 418 阅读 · 0 评论 -
史上最全js判断数据类型方法总结(typeof、instanceof、constructor、Object.prototype.toString.call()的应用场景)
判断数据类型是我们工作和面试中经常会遇到的问题,因此本文对该问题进行了些许的整理,供大家参考。一、数据类型概述二、数据类型的判断方法目前常用的判断数据类型的方法有四种,分别为:typeof、instanceof、constructor以及Object.prototype.toString.call(),其中判断最为准确的方法是最后一种Object.prototype.toStrin...原创 2020-03-03 10:04:45 · 417 阅读 · 0 评论 -
js作用域以及变量提升
作用域定义作用域,即产生作用的特定区域。javaScript的作用域,即js的变量或者函数产生作用的对应区域。也就是说区域内的可以访问区域外的变量和函数,但是区域外的则不能访问区域内的变量和函数。分类在ES5中,作用域分为两种:全局变量和局部变量。(1)全局变量:所有地方均可访问(在函数外部声明的变量);(2)局部变量:只能在函数内部访问(在函数内部用var关键字声明的...原创 2020-02-26 14:34:18 · 342 阅读 · 0 评论 -
浏览器加载、渲染以及优化页面的顺序和方法
1.浏览器加载和渲染html的顺序(1)IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。(2)在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)(3)如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。(4)并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载...原创 2019-12-31 13:37:26 · 1732 阅读 · 1 评论 -
JavaScript 原型与继承机制详解
引言虽然JavaScript是一门面向对象的语言(面向对象的四个特性为:继承、多态、抽象、封装),但是面向对象的一些特性在JavaScript中并不存在(比如多态,不过严格来说也没有继承)。通过阅读大量博文,本篇文章详细讲解了 JavaScript new 操作符与对象的关系、原型和对象关联(也就是俗称的继承)的原理,适合有一定基础的同学阅读。一、JavaScript 中的类与对象通常所说的...原创 2019-12-24 16:02:23 · 381 阅读 · 0 评论 -
js中的this详解
在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值,而不用考虑函数如何被调用的,ES2015 引入了支持this词法解析的箭头函数(它在闭合的执行环境内设置this的值)。与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格...原创 2019-12-06 17:57:22 · 203 阅读 · 0 评论 -
js中的call()与apply()的应用
最近对常见的一些知识点开始进行总结,因为仅仅只是看过后过段时间会出现遗忘的现象,故决定写出来加深记忆。此处先对一些模糊的知识进行明确声明:在javaScript中,所有函数都是对象的方法。如果一个函数不是javaScript对象的方法,则其为全局对象的函数。call()方法的功能与应用功能call()方法是预定义的javaScript方法,可以用来调用所有者对象作为参数的方法。通...原创 2019-12-05 17:43:48 · 153 阅读 · 0 评论 -
运算符的优先级顺序 js
运算表达式概述JavaScript中的运算符用于算术表达式、比较表达式、逻辑表达式、赋值表达式等。(大多数运算符都是由标点符号表示的,比如“+”、“-”。而另一些运算符则是由关键字表示的,比如delete和instanceof。关键字运算符和标点符号所表示的运算符一样,都是正规的运算符。)下表按照运算符的优先级顺序,前面的运算符的优先级要高于后面的运算符的优先级。被水平线分隔开来的运算符具有...原创 2019-07-15 16:58:06 · 680 阅读 · 0 评论 -
时间转换:将秒转换为年月日时分秒以及获取当前时间的方法
// 将秒转化为年月日时分秒 function secToTime(seconds){ var date = new Date(seconds*1000) var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); // var hour = d...原创 2020-03-25 17:39:04 · 4441 阅读 · 0 评论