- 博客(40)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue-命令
什么是指令？指令的本质就是自定义属性指令的格式：以v-开始(比如：v-cloak)v-cloak1.提供样式[v-cloak]{display:none};2. 在插值表达式所在的标签中添加v-cloak指令背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后，再显示最终的结果...
2021-06-19 17:54:24
171
1
原创 父子组件生命周期执行过程 vue 2.0
父-beforeCreate父-created父-beforeMount子-beforeCreate子-created子-beforeMount子-mounted父-mounted当父组件里销毁子组件时的执行过程父-beforeUpdate子-beforeDestroy子-destroyed父-updated
2021-06-18 12:49:40
174
原创 Vue的生命周期
生命周期函数想要执行什么，写在对应的声明周期的函数中即可，这个函数vue中自己执行，它会内部进行判断，每个阶段会给它默认的权限“生命过程”beforeCreate(){}组件创建出来就执行的函数，这里数据劫持和事件绑定等等都不会完成，在这里拿到data、methods里面的数据created(){}组件数据劫持和事件绑定等等完成，可以拿到data/method等里面数据，一般ajax请求的数据就会放在这这个函数中，在组件渲染元素之前执行，因此拿不到元素，会返回undefinedbeforeMo
2021-06-17 21:25:27
146
原创 前端性能优化汇总
性能优化大汇总/* * 1.利用缓存 * + 对于静态资源文件实现强缓存和协商缓存（扩展：文件有更新，如何保证及时刷新？） * + 对于不经常更新的接口数据采用本地存储做数据缓存（扩展：cookie / localStorage / vuex|redux 区别？） * 2.DNS优化 * + 分服务器部署，增加HTTP并发性（导致DNS解析变慢） * + DNS Prefetch * 3.TCP的三次握手和四次挥手
2021-06-04 20:06:19
112
原创 前端从URL地址看见页面经历了什么？
文章目录HTTP网络层优化从URL地址看见页面经历了什么？第一步 URL解析第二步：缓存检查第三步：DNS解析第四步：TCP三次握手第五步：数据传输第六步：TCP四次挥手为什么连接的时候是三次握手，关闭的时候却是四次挥手？第七步：页面渲染HTTP网络层优化代码编译层优化 webpack代码运行层优化 html/css + javascript + vue + react安全优化 xss + csrf数据埋点及性能监控……CRP（Critical [ˈkrɪtɪkl] Rende
2021-06-04 20:04:15
442
2
原创 基于http网络层的‘前端优化‘
文章目录扫盲知识URL/URL/URN传输协议域名端口号HASY 哈希值URL编码缓存检查HTTP报文扫盲知识URL/URL/URNURI=URL+URNURI:统一资源标识符URL：统一资源定位符URN：统一资源名称传输协议http/https/ftp…客服端和服务器端用来传输信息的方式’像快递小哥’http:超文本传输协议[除了文本还可以运输音乐/等等之类的]https: ssl 比http更安全，因为要经过sll加密[支付类网站都需要使用https]ftp:文件上传下载协
2021-06-01 20:42:18
340
5
原创 JS盒子模型--scroll概述
scroll系列属性scroll翻译过来就是滚动，我们使用scroll系列的相关属性可以动态的得到该元素的大小以及滚动的距离下表所有值均带padding不带borderscroll系列的作用作用element.scrollTop返回被卷去的上侧距离，返回值不带单位element.scrollLeft返回被卷去的左侧距离，返回值不带单位element.scrollWidth返回自身实际宽度，不含边框，返回数值不带单位element.scrollHeigth
2021-05-31 22:54:53
228
原创 JS盒子模型--client概述
client概述client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息通过client系列的相关属性可以动态的得到该元素边框的大小、元素大小等client系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回他不属于左边框的大小element.clientWidth返回自身包括padding 、内容区的宽度、不含边框、返回数值不带单位element.clientHei
2021-05-31 22:26:35
359
原创 前端JS基础面试题总结(6)
1、JS是单线程还是多线程的语言单线程2、渲染页面的过程是同步还是异步执行同步3、列举三个常见的异步执行。两个定时器，ajax，promise.then()4、怎么阻止默认事件执行• e.preventDefault();//阻止默认事件• return false• e.returnValue=false;//IE5、怎么阻止事件冒泡。e.stopPropagation();e.cancelBubble=true;//兼容IE6、简述事件传播机制。在点击事件
2021-05-31 20:37:06
263
原创 前端JS基础面试题总结(5)
1、在正则表达式中，[^&]匹配的是除了&开头的字符2、设置怪异盒模型的css样式是box-sizing:border-box;3、*号用于匹配前面的字符出现零到多次4、/^1[3578]\d{9}$/正则的匹配规则什么字符以1开头，3578中的一个，九个数字（手机号规则）5、验证只能输入5-20个以字母开头、可带数字、“_”、“.”的字串，正则应该怎么写/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/6、获取页面的可视区域
2021-05-31 20:33:17
178
原创 前端JS基础面试题总结(4)
1、call、bind、apply的区别call改变this并执行函数；bind改变this，但不会执行函数，会把改变this后的函数体返回；apply与call的传参方式不同，需要把传给F函数的参数放到一个数组（或者类数组）中传递进去2、构造函数与普通函数执行的区别构造函数执行之前，首先创建一个对象（创建一个堆内存，暂时不存储任何东西），并且让函数中的执行主体（this）指向这个新的堆内存（this===创建的对象）。执行完以后把this这个堆内存返回。3、构造函数执行，如果有retu
2021-05-31 20:27:12
119
原创 前端JS基础面试题总结(3)
1.值类型和对象类型的数据有什么不同？值类型：存在栈内存中，是按值操作对象类型：存在堆内存中，是按地址操作2.let与var有什么区别。let、const:• 不存在变量提升。• 只能声明一次，不能重复声明• 变量声明出来存在VO（变量对象）或AO（活动对象）中，不会给window增加属性var：• 有变量提升• 在全局中声明的变量，会给window增加一个属性。3.简要描述一下变量提升机制。）当栈内存（作用域）形成，js代码执行之前，浏览器会把所有带有var/functi
2021-05-31 20:21:25
154
原创 前端JS基础面试题总结(2)
1、JS中设置定时器的两种方法：setTimeout 、 setInterval2、函数中内置接收参数的集合是：arguments3、把函数体中的某个值返回到外面用：return4、数组的基础知识和应用在数组的后面追加一项(至少两种办法)： arr.push 、 arr[arr.length] =x删除数组的最后一项(至少两种办法)： pop 、 arr.length–克隆一份和原来一样的数组(至少两种)： arr.concat() 、
2021-05-31 20:17:51
126
原创 前端JS基础面试题总结(1)
01、JS的组成部分ES DOM BOM02、JS中的数据类型都有哪些？以及两大类之间的区别？03、检测数据类型的四种方式？（常见面试题）04、JS中创建变量的几种常用方式？05、常用浏览器的内核都有哪些？（常见面试题）...
2021-05-31 20:12:04
146
原创 发布订阅设计模式
设计模式一种编程思想，这类思想会解决一种问题例如：单例模式：简单来说是一个对象，平时使用时用闭包包起来工厂模式：在jQuery中使用$(’’)或者jQuery()包起来，当做普通函数执行，最后创造一个他的实例，使用init中转一下构造函数设计模式：new一个东西执行就是构造函数模式，解决了：可以创造一个类的多个实例，每一个实例之间既是独立的，每一个都有自己的单独属性，而且还能找到所属的公共属性。例如swiper插件，使用它就是要new，因为这个项目中可能有多个，每次使用swiper创造多个轮
2021-05-27 22:33:02
171
原创 form表单的基本使用
文章目录form的基本属性actiontargetmethodenctypeform的基本属性actionaction 规定发送表单时，向何处发送数据action属性值应该是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据当form表单在未指定action属性的情况西下，action的默认值未当前页面的URL地址注意：当提交表单后，页面则会立即跳转action属性指定的UTRL地址targettarget在何处打开页面它有五个值，默认情况下值未_self,表
2021-05-25 19:53:32
175
原创 前后端交互基础(1)---URL
URL地址概念：URL被称为统一资源定位符，用于标识互联网上存放资源的唯一地址，浏览器只有通过URL地址，才可以获得准确的存放资源的位置，从而找到其资源，简单的来说就像我们的身份证。URL的组成URL地址一般由三部分组成：1、客服端与服务器之间的通信协议2、存有资源的服务器名称3、资源在服务器上具体存放的位置客户端与服务器的通信过程客户端打开浏览器输入要访问的网站地址回车，像服务器发起资源请求web服务器服务器接收到客户端发起的资源请求服务器在内部处理这次请求，并且
2021-05-25 09:47:04
1799
原创 移动端开发基础必备知识
文章目录rem适配布局物理像素逻辑像素设备像素比rem适配布局1.首先知道em单位，em相对于父元素的字体大小而定义2.不同的是rem的基准是相对于html元素的字体大小比如，根元素()物理像素别名：设备像素，例如电脑设备显示分辨率 1920X1080，真实存在的像素逻辑像素设备像素比在pc端，设备像素比为1，也就是说设备像素(物理像素(CSS像素=>平时页面用的像素))===逻辑像素,在移动端，以上图iphone为例，DPR为2,物理像素宽2，高2，也就是说一个css
2021-05-24 16:19:13
175
原创 前后端交互基础(2)---接口
文章目录什么是接口？接口的概念？分析接口的请求过程接口测试工具什么是接口测试工具，它的好处是什么？接口文档什么是接口文档接口文档的组成部分什么是接口？接口的概念？使用AJAX请求数据的时候，被请求的URL地址，就叫做数据接口(简称：接口)。同时，每个接口必须有请求的方式;所谓请求方式就是GIT或者POST分析接口的请求过程1.通过GET方式请求接口的过程请求—处理—相应用户和数据载体进行交互，希望向服务器提交数据，数据载体拿到用户的数据通过AJAX发起POST请求向服务器发送，服务器拿到后
2021-05-22 09:25:56
1041
原创 高级JS--浏览器底层机制!什么是浏览器底层机制？你了解浏览器底层机制吗?
文章目录浏览器机制具体渲染过程浏览器机制浏览器拿到代码后，会渲染和解析代码，最后在页面中渲染除图形和效果渲染HRML/CSS代码：基于WC3规范规定，进行编写代码，浏览器按照WC3规范进行解析(通俗来说浏览器就相当于一个画家来按照你的需求来给你绘画),由GUI渲染线程来进行处理渲染JS代码：ECAMScript(ECMA-262[代表ECMAScript的版本号])规则，交给JS引擎线程去处理+如果在渲染代码中，遇到了link/img/script[src=‘XXX’]/audio/viode
2021-05-20 23:09:28
771
原创 JS--轮播图的实现 案例二
文章目录轮播图轮播图的结构分析功能一：当鼠标经过显示或者隐藏左右按钮功能二：动态生成小圆圈功能三：小圆圈的排他思想功能四：点击小圆圈滚动图片功能五：右侧按键无缝滚动功能六：克隆第一张图片功能七：小圆圈跟随右侧按钮一起变换功能八：左侧功能按钮实现轮播图轮播图的结构分析首先我们需要一个大盒子里面包含两个箭头以及四个小圆点，当我们点击左右两个箭头和四个小圆点的时候图片可以达到切换的目的，其中注意样式假如轮播图中的图片有四张，我们必须使用ul（li）来存储，并且使用float浮动让他们在一行，当我们给最大的
2021-05-16 22:25:54
404
2
原创 原生JS---实现可拖拽静态框=＞案例一：
功能分析拖动模态框需求分析：点击登录，会弹出一个页面，里面可以输入内容，并且出现背景颜色(遮挡层)，当点击关闭 登录框和遮挡层背景颜色全部消失，并且这个登录框可以实现拖拽效果案例分析1.点击弹出层，静态模块和遮挡层会显示出来display:none2.点击关闭，登录和遮挡层同时消失代码如下HTML代码<div class="inputeGitter"> <div class="login-header"> <a id="link"
2021-05-16 17:11:40
360
1
原创 JS盒子模型--offset概述
JS元素偏移量office概述office:翻译过来就是偏移量，我们使用offset系列相关属性可以动态得得到该元素得位置(偏移)、大小等。获得元素距离带有定位得父级元素位置，如果没有则是body获得元素自身大小(宽度和高度(width/top))注意：返回值不带单位offset系列常用属性offset系列常用属性作用element.offsetParent返回作为该元素带有定位的父级元素如果父级元素没有定位,则返回距离body的值element.offse
2021-05-14 00:21:51
1256
3
原创 jQuery
JQuery什么是jQuery？JQ(jQuery)：是一个类库(方法库)，里面提供大量操作DOM及一些常用的方法，依托于这些方法可以简化项目开发「前提：项目是基于操作DOM完成的，在Vue/React数据驱动项目中，已经不怎么使用JQ了(此篇文章介绍JQuery了解即可，后续详细解读各种方法API)」什么是类库？方法库不具备任何的思想和逻辑性，只是一个工具包 JQZeptounderscoreLodash…什么是插件？把业务中某个常用的功能进行封装（一般只是对JS的封装）
2021-05-11 20:08:58
82
1
原创 js综合测试
一、填空题1、在正则表达式中，[^&]匹配的是?以&开头的字符2、设置怪异盒模型的css样式是box-sizing:border-box;3、*号用于匹配前面的字符出现零到多次4、/^1[3578]\d{9}$/正则的匹配规则什么字符以1开头，3578中的一个，九个数字（手机号规则）5、验证只能输入5-20个以字母开头、可带数字、“_”、“.”的字串，正则应该怎么写 /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/6
2021-05-10 22:18:06
257
原创 JS的正则表达式
文章目录正则表达式什么是正则？正则有什么用？正则的基本概念正则表达式什么是正则？正则有什么用？正则的基本概念正则：简单点来说他就是用来处理"字符串"的规则
2021-05-08 23:56:51
134
原创 JS基础——面向对象[单例设计模式、工厂模式、oop、基于构造函数自定义类、构造函数运行机制]
文章目录面向对象、构造函数单例设计模式（singleton pattern）工厂模式（factoryPattern）oop基于构造函数创建自定义类（constructor）构造函数执行的机制关于构造函数中的细节问题面向对象、构造函数单例设计模式（singleton pattern）1、表现形式• 对象 var obj={xxx:xxx;……}• 早单例设计模型中，obj不仅仅是对象名，他被称为‘命名空间’，把描述事物的属性放到命名空间中，多个命名空间是独立分开的，互不冲突2、作用• 把描述同
2021-05-07 18:47:26
89
原创 JS基础——基于V8底层渲染机制变量提升机制、闭包、作用域、垃圾回收机制、函数执行过程、手撕call方法、bind预处理....
文章目录变量提升数据类型核心操作原理基本数据类型（值类型）可执行（调用）对象 funtion(){}非标准特殊对象《函数、作用域、上下文及浏览器中的垃圾回收机制》函数基本概念作用域闭包执行上下文普通函数执行的过程匿名函数具名化浏览器垃圾回收机制（内存管理机制）js运行环境this与call apply bindthis（函数执行的主体）callCALL中的细节阿里call面试题另一种思路手撕call方法bind预处理this，不执行函数变量提升数据类型核心操作原理基本数据类型（值类型）numb
2021-05-07 18:44:38
412
原创 JS基础——数组排序、[冒泡排序、快排、递归法快排、对象去重等等]以及效果案例解读
文章目录数组排序冒泡排序 双for O(n^2)快速排序 递归法 O(nlgn)数组去重双循环法indexOf处理法对象去重法利用Set或Map结构console.dir(Math)查看Math的所有操作方法abs取绝对值Math.round()max && min 取最大最小值PI 获取圆周率Date方法效果案例数组求和选项卡效果递归 累加求和字符串案例定时器案例数组排序冒泡排序 双for O(n^2)var ary=[10,2,1,3,4,2,1,2]for (var j=0;j
2021-05-07 18:41:31
420
原创 JS基础——字符串常用方法以及案例解读
文章目录字符串常用方法charAt & charcodeAtcharAt:substr && substring && slice 截取字符substr（n,m）substring（n，m）slice（n，m）indexOf && lastIndexOf && includes查询字符串indexOf(x,y)：lastIndexOf(x)：includes('')：split字符串常用方法1、字符串有索引用索引查找字符2、有
2021-05-07 18:38:50
249
原创 JS基础——数组常用方法
文章目录数组方法基本结构类数组改变原来数组的常用方法增加1、push : 向末尾追加2、unshift ：向开头追加删除1、pop:删除数组最后一项2、shift：删除数组第一项3、把数组当做一个普通对象，使用键值对的操作删除splice1、删除2、修改3、增加不改变原有数组的方法数组克隆：slice将两个数组进行拼接：concat验证数组中是否包含某一项：indexOf/lastIndexOf验证数组中是否包含某一项：includes数组中的排序和排列1、reverse：把数组中的每一项倒过来排列2、so
2021-05-07 18:36:10
537
原创 JS基础——函数
文章目录函数函数创建的具体过程匿名函数匿名函数的第一种情形匿名函数的第二种情形定时器匿名函数的第三种情形匿名函数的第四种情形箭头函数与普通函数的区别：自执行（匿名）函数回调函数callback递归函数函数的意义在于封装：把实现某一个功能的代码封装在一起，后期在想实现这个功能，只需要执行函数即可，不需要重新编写这些代码了。“低耦合、高内聚”：减少代码的冗余，提高代码使用率。1.创建函数function 函数名(形参1,…){//=>函数体：实现具体功能的代码}*2.执行函数：让
2021-05-07 18:33:48
64
原创 JS基础——栈堆问题、各种数据类型转换、JS常用语句、DOM获取元素方法
文章目录堆栈内存阿里面试题(关于栈堆内存问题)各数据类型转换（汇总）对象转化为数字或字符串各类型转换为数字运算toString转换为字符串把其他数据类型转换为布尔类型其余情况大部分是转换为数字比较特殊情况JS中的常用语句if判断三元运算符switch相对等于与绝对等于==相对等于===绝对等于for循环循环中的关键字breakcontinueFOR IN循环DOM获取元素的方法js操作DOM获取元素节点行内属性操作样式操作堆栈内存所谓堆栈内存，其实就是在计算机内存中分配出来一块空间，用于执行和存储代码
2021-05-07 18:29:50
143
原创 JS基础——数学运算
文章目录JS中的数学运算模板字符串布尔类型！的用法!=:不等于！取反：把！后的字符转化为布尔类型，然后再取反。！！在一个布尔类型的基础上取反再取反，相当于转化为布尔类型。null和undefined的区别对象数据类型object数据类型的检测及堆栈内存的区别数据类型的检测数据类型typeoftypeof 局限性基本数据类型与引用数据类型的区别(划重点)JS中的数学运算• 加减乘除±*/• 取余%1、加号，在JS中既有数学运算，也有字符串拼接的意思（只要加号两边的任意一边出现字符串，则变为字符串拼接
2021-05-07 18:26:25
1480
原创 JS基础——基本数据类型/数据类型之间的转换
文章目录JS中的数据类型及详解js数据类型分类`基本数据类型``number数字类型`` string字符串类型``boolean布尔类型`` 空 null`类型`Sumbol`唯一值类型` object普通对象：`` Array数组对象：``RegExp正则对象：``function函数:`` 箭头函数``number类型 数字``NaN``Numder`PL:数字例子parseInt([val], [radix])处理机制**parseFloat()****num.toFixed(n)保留两（n）位
2021-05-07 15:57:10
533
原创 JS基础知识——简介/语法/应掌握基础框架
JS发展及基础前端应该掌握的技术：语言基础：HTML(5)、css(3)、js框架基础：vue、react、node.js、TS、小程序等等语言类型：HTML 标记语言css （层叠样式表）标记语言JS 弱类型的脚本语言 负责用户交互（点击 拖拽）浏览器内核：我们把浏览器中识别代码绘制页面的东西称为浏览器的内核或者渲染引擎。webkit（V8引擎）谷歌 chrome苹果 Safari国内大部分浏览器IE新版本 EDGEGecke火狐浏览器 FireFoxPrest
2021-05-07 15:52:51
261
原创 javascript面向对象以及原型链
面向对象单例设计模式把描述同一事物的属性和方法放在一起，实现了分组的效果，避免了全局变量的污染;每一个对象都是一个单独的实例(个体/堆内存空间)，所以我们把这种方案称之为"单例设计模式"对象 命名空间 namespace.hasOwnProperty(属性)：检测当前属性是否是对象的"私有"属性instanceof: 检测某一个实例是否属于这个类实例是什么类型的？对象类型?这样说不严谨，虽然大部分实例都是对象类型的值，但是原始值类型的值，从本
2021-04-27 23:46:20
111
原创 JS整理
js基础笔记以及一些数组基本API变量提升机制1. 什么是变量提升？在“当前上下文”中，代码执行之前，浏览器首先会把所有带var/function关键字的进行提前声明或者定义@1 带var的只是提前声明@2 带function的，此阶段声明+定义{赋值}都完成了2. let/const/import/class声明的变量不存在变量提升3. 重复声明的问题4. 推荐使用函数表达式，确保函数执行只能放在“创建函数代码”的下面，保证逻辑的严谨性5. 条件判断中的变量提升「先聊var」在当前上下
2021-04-26 22:41:28
94
原创 JS中的THIS问题
THIS问题THIS总结规律1、给当前元素的某一个事件进行行为绑定方法，当事件行为触发，浏览器会帮我们把绑定的方法执行，此时方法中的this是当前操作元素的本身。pl:"use strict"------->开启严格模式<style> //.............</style>const fn=function fn(){ console.log(this); //----->此时中的this是字符串};let obj={
2021-04-25 21:25:28
138
您好，我想知道代码中this的指向为什么是box?
2021-05-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人