- 博客(62)
- 收藏
- 关注
RSS订阅原创 ES6要点梳理
ES6在之前用于定义变量关键字var的基础上新增了let和const关键字。其比较如下：var：定义变量，可多次赋值，有变量提升功能，可重复定义，无块级作用域let：定义变量，可多次赋值，无变量提升，有暂时性死区，不可重复定义，块级作用域const：定义常量，定义的时候就需要赋值，赋值之后不可修改，，无变量提升，有暂时性死区，不可重复定义，块级作用域二、函数1、箭头函数如果有且仅有一个参数，可以省略（）如果函数体仅有一条语句，而且该语句是return，可以省略{}和return2、默认
2024-04-26 09:54:36
849
2
原创 v-model的实现原理
在vue.js中，通过Object.defineProperty()方法把data的属性转换为getter和setter函数，当属性被读取时，会触发getter函数；当依赖的属性发生变化时，vue.js会通过setter函数通知依赖进行更新，从而实现模板的响应式更新。综上：v-model的底层原理是利用vue.js的响应式系统，在模板编译阶段通过getter函数进行依赖收集，并在数据更新时通过setter函数通知依赖进行更新，从而实现了表单元素和data中属性的双向绑定。
2023-11-08 11:34:59
465
原创 详解import导入和export和export default导出的区别
在项目中，我们经常会看到使用 import xx from 'xxx';或者 import {xx} from 'xxx';进行模块的导入，那对于在导入模块的时候什么情况下添加花括号 {} 什么情况下直接导入，这两种写法的区别又是什么呢？今天这篇文章主要解决关于模块导入导出的各种疑惑和疑难杂症。
2023-09-04 15:40:06
890
原创 详解xuex、localStorage、sessionStorage、cookie以及session的区别
一、背景1、vuex2、localStorage和sessionStorage3、cookie和session二、异同点三、总结保存的位置&生命周期vuex保存在内存中，关闭浏览器或者刷新页面保存的值会丢失永久保存在本地文件中，不手动清除永久存在临时保存在会话窗口中，关闭浏览器或者关闭标签页保存的数据会丢失，刷新页面数据不会消失cookie保存在客户端浏览器中，可设置失效日期，失效日期前均有效session保存在服务器端，默认储存时间约30分钟容量限制&域名限制&其他vuex。
2023-08-18 16:17:55
242
原创 swiper避坑指南（一）：切换大小屏之后，activeIndex自动加1问题
最近刚开始用swiper的swiper-slide做滑动的功能，就掉进一个大坑，久久无法脱身……终于在多番与大神交流之后，有了较大的进展，解决了这个问题，记录一下以示庆祝。一、还原问题场景：1、需求：（1）做一个左右手动滑动图片的显示卡片（左右各有一个按钮）；（2）分大屏显示和小屏显示：大屏显示3张图片，小屏显示2张图片；（3）若从小屏的b、c图片切换到大屏，不手动进行滑动按钮进行切换的情况下，再次回到小屏还是显示b、c图片。2、问题：对于今天讨论的问题，为了方便清洗的描述，
2021-07-27 10:19:31
2392
原创 手把手教你什么是vue的内联处理器
最近再次看vue官方文档的时候，发现在事件处理的部分提到了一个词：内联处理器。一脸懵之后，遂查看资料，决定记录下来，所以这篇文章就自此而来。
2021-04-30 09:49:53
435
原创 设置div中文字自适应显示一行，超出则用...代替
因为工作原因，需要设置文字自适应显示一行，超出用...代替，因此整理出来巩固记忆。主要依赖的属性如下所示：/* 强制文字一行内显示 */white-space: nowrap;/* 超出部分隐藏 */overflow: hidden;/* 用省略号替代超出部分 */text-overflow: ellipsis;完整代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta char
2020-10-07 10:21:55
2112
原创 用css将DIV等分布局
在工作中经常会出现需要讲一个div等分为几部分的需求，现整理方法如下：1、借助设置百分比实现均分div，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>将页面平均分成四部分</title> <style type="text/css"> *{ ma
2020-10-07 09:57:16
9080
原创 纯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
1093
原创 webSocket 和 webWorker
HTML5：web socket 和 web worker做练习遇到了一个选择题，是关于web worker的，问web worker会不会影响页面性能？补习功课之后，答案是不会影响。查阅了相关资料学习web worker，又遇到了web socket，整理如下：web socket 和 worker 的作用：为构建高效能的web应用提供了新的参考方案。web socket提供更高效的传输协议，web worker提供多线程提高web应用计算效率。一.web socket1.web
2020-09-02 14:05:20
1986
2
原创 详解CSS3的弹性盒模型
一、CSS3弹性盒子弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。属性 ...
2020-09-01 11:14:51
187
原创 看了不会你打我的CSS盒模型
目录1、标准盒模型2、IE盒子模型3、总结：1、标准盒模型w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分2、IE盒子模型IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border3、总结：IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W.
2020-09-01 10:55:25
170
原创 详解CSS选择器的类型以及优先级
目录一、CSS选择器的分类1、标签名选择器 2、类选择器 3、ID选择器4、后代选择器（类选择器的后代选择器）5、群组选择器二、选择器的优先级 三、总结一、CSS选择器的分类1、标签名选择器 div{ color：red;} 即页面中的各个标签名的css样式2、类选择器 .divClass{ color:red;}即定义的每个标签的class 中的css样式 3、ID选择器...
2020-09-01 10:12:47
3504
原创 传输层协议TCP和UDP的区别详解
一、TCP协议1、TCP的优点： 可靠，稳定TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有确认、窗口、重传、拥塞控制机制，在数据传完后，还会断开连接用来节约系统资源。2、TCP的缺点： 慢，效率低，占用系统资源高，易被攻击TCP在传递数据之前，要先建连接，这会消耗时间，而且在数据传递时，确认机制、重传机制、拥塞控制机制等都会消耗大量的时间，而且要在每台设备上维护所有的传输连接，事实上，每个连接都会占用系统的CPU、内存等硬件资源。 而且，因为TCP有确认
2020-08-19 15:25:30
3757
原创 手把手教你什么是事件冒泡
什么是JS事件冒泡？在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。如何来阻止Jquery事件冒泡？通过一个小例子来解释<%@ Page Language="C#" AutoEventW
2020-08-18 17:39:22
159
原创 非对称加密算法Rsa原理解析
目录一、RSA加密算法概述二、RSA加密算法的数学原理三、 RSA的破解原理一、RSA加密算法概述RSA加密算法是非对称加密算法中的一种，在1977年由罗纳德·李维斯特（Ron Rivest）、阿迪·萨莫尔（Adi Shamir）和伦纳德·阿德曼（Leonard Adleman）一起提出的，并取三人名字的首字母命名该算法。RSA加密算法因其可靠的安全性（目前看来是十分安全的），得到了广泛的认可和使用，ISO（国际标准化组织）、ITU（国际电信联盟）及SWIFT（环球同业银行金融.
2020-08-18 15:37:51
1288
1
原创 对称加密和非对称加密详解
目录一、对称加密（Symmetric Cryptography）二、非对称加密（Asymmetric Cryptography）三、总结一、对称加密（Symmetric Cryptography）对称加密是最快速、最简单的一种加密方式，加密（encryption）与解密（decryption）用的是同样的密钥（secret key）。对称加密有很多种算法，由于它效率很高，所以被广泛使用在很多加密协议的核心当中。对称加密通常使用的是相对较小的密钥，一般小于256 bit。因为密钥越大，
2020-08-18 15:25:10
12794
原创 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
1038
原创 从输入URL到前端页面加载中间发生的事件
目录一、从输入 url 到得到 html 的过程二、浏览器渲染页面的过程三、浏览器渲染页面的详细过程分解1、解析与构建DOM树2、构建呈现树3、布局4、绘制一、从输入 url 到得到 html 的过程输入资源地址（地址栏输入、页面跳转、页面加载）发起请求 浏览器缓存机制，优先查找本地有无缓存可用 搜索自身的 DNS 缓存 搜索操作系统自身的DNS 缓存 读取本地的 HOST 文件 发起一个 DNS 的系统调用 浏览器向 DNS 服务器发起域...
2020-06-02 21:49:27
184
原创 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
590
原创 Ajax请求的五个步骤
Ajax请求的五个步骤一、定义1、什么是AjaxAjax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。2、同步与异步的区别同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。异步提交：当用户发送请
2020-06-02 14:01:22
173280
52
原创 看了包会的vue实例的各个生命周期详解
目录vue实例的生命周期一、定义1、什么是生命周期2、生命周期钩子3、生命周期和生命周期钩子的关系二、主要的生命周期函数 1、创建期间的生命周期函数2、运行期间的生命周期函数3、销毁期间的生命周期函数vue实例的生命周期一、定义1、什么是生命周期从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！2、生命周期钩子就是生命周期事件的别名而已；3、生命周期和生命周期钩子的关系生命周期钩...
2020-06-01 20:53:08
285
原创 计算机网络机构
计算机网络体系结构在计算机网络的基本概念中，分层次的体系结构是最基本的。分层的主要好处有：1、各层之间是独立的，每一层向上和向下通过层间接口提供服务，无需暴露内部实现2、灵活性好3、结构上可分割4、易于实现和维护5、能促进标准化工作主要分层模型不同的分层模型，将不同的协议归类到不同的层级，定义每一层完成不同的功能，以及对外提供的接口服务。OSI7层模型是一个大而全的理论模型、TCP/IP(参考)模型侧重一些核心的协议的分层。OSI七层模型为了使全世界不同体系结构的计算
2020-05-29 09:09:36
1115
原创 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
772
原创 2019前端面试宝典
JavaScript部分1、闭包（传音控股-滴滴优点-华为-招商银行）看了阮一峰老师关于闭包的讲解，感觉很好理解，此处结合自己的一些思考，以加深理解。（原文链接：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html）闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用...
2020-05-20 16:41:14
377
1
原创 js中的深拷贝和浅拷贝总结
一、概念JavaScript中的数据分为基本类型和引用类型，一般基本类型的数据占用内存大小确定，保存于栈中；引用类型的数据由于在创建之初数据占用内存的大小不确定，但是保存数据的地址占用内存大小确定，因此引用类型的数据实体保存于堆中，按需分配，引用类型在堆中保存数据实体的起始地址保存于栈中。当解释器寻找引用类型的值时，会首先检索其在栈中的地址，取得地址后再从堆中获得数据实体。一般来说，浅拷贝...
2020-04-11 18:03:01
644
原创 几种遍历一个对象包含的可枚举属性的方法详解【下】（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
748
原创 几种遍历一个对象包含的所有属性的方法详解【上】（Object.getOwnPropertyNames(obj)、Reflect.ownKeys(obj)）
前言对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）通过字面量方式创建一个对象obj，并获取其自有属性foo的属性描述符。代码如下所示：let obj = { foo: 123...
2020-04-09 19:26:45
1233
原创 JavaScript中__proto__、prototype以及constructor的详细讲解【2】
初学JavaScript的时候也一样搞不清楚__proto__、prototype以及constructor三者之间的关系，于是经过多方查阅资料和请教前辈，今天写出来算是自己好好总结了一下。一、知识储备首先，要明确以下几点：1、在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。即：对象具有属性_...
2020-04-08 17:39:52
131
原创 JavaScript中__proto__、prototype和constructor的详细讲解【1】
作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。可通过以下方式检测引擎是否支持__proto__属性：Object.getPrototypeOf({__proto__: null}) === null;//返回true表示支持，否则表...
2020-04-08 17:30:36
393
1
原创 ES6变量的解构赋值详解（数组、对象、字符串、数值和布尔值以及函数参数）
一、数组的解构赋值1、基本用法（1）ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。...
2020-04-06 19:43:38
712
原创 ES6中变量声明的6种方式详解（var、function、let、const、import、class）
在ES5中变量声明的方式只有var和function两种方法，ES6中增加了四种不同的变量声明方式，分别为let、const、import以及class。一、用关键字var声明变量1、var声明的全局对象是顶级对象（window）的属性；2、用var在函数外声明的对象为全局变量，在函数内声明的对象为局部变量；3、用var可以对同一对象重复声明和赋值；4、用var声明的对象具有变量提升的作...
2020-03-31 15:18:23
1439
1
原创 ES6中箭头函数详解（箭头函数和普通函数的区别）
箭头函数是ES6提出来的一种标准，其表达式的语法比函数表达式（普通函数）更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。一、语法1、基础语法箭头函数有两种格式，一种只包含一个表达式（如x => x * x），连{ … }和return都省略掉了。还有一种可以包含多条语句，这时...
2020-03-31 10:12:33
907
原创 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
922
原创 js中的深拷贝和浅拷贝详解
一、浅拷贝与深拷贝应用的数据类型简介js数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类型的特点： 直接存储在栈(stack)中的数据，分配的内存大小确定。引用数据类型的特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里，动态分配内存，内存大小不定，即引用数据类型在栈中存储了指针，该指针指...
2020-03-29 21:09:49
828
原创 时间转换：将秒转换为年月日时分秒以及获取当前时间的方法
// 将秒转化为年月日时分秒 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
4660
原创 js中堆和栈的详解
首先JavaScript中的变量分为基本类型和引用类型。基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。1、基本类型 基本类型有Undefined、Null、Boolean、Number 和String。这些类型在内存中分别占有固定大小的空间，他们的值保存在栈空间，我们通过按值来访问的。 2、引用类型 引用类型，值大小不固定，栈内存中存放...
2020-03-22 09:42:47
4425
原创 用css实现Div的垂直居中
最近面试的时候，经常被问到css中div垂直居中的问题，趁现在整理的方法比较全面，记录下来！外层div大小不定，内层div宽高确定代码如下：<html> <head> <style> #content { width: 600px; height: 400px; ...
2020-03-21 15:51:59
609
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人