- 博客(54)
- 收藏
- 关注
原创 虚拟DOM
1、虚拟 DOM 是什么?一个能代表DOM树的对象,通常含有标签、标签上的属性、事件监听和子元素们,以及其他的属性,用普通js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM。2、虚拟 DOM 的优点?减少 DOM 操作虚拟 DOM 可以将多次操作合并为一次操作,比如你添加 1000 个节点,却是一个接一个操作的(减少频率) 虚拟 DOM 借助 DOM diff 可以把多余的操作省掉,比如你添加 1000 个节点,其实只有 10 个是新增的(减少范围)跨平台虚拟
2022-05-29 16:25:45
250
1
原创 vue2到vue3生命周期的演变
将 Vue2 的生命周期钩子代码更新到 Vue3这个从Vue2 到Vue3的生命周期映射是直接从Vue 3 Composition API文档中获得的:beforeCreate -> 使用 setup()created -> 使用 setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdated
2022-05-24 21:03:25
296
原创 Vue3通过Proxy实现双向数据绑定
1.什么是Proxy?它的作用是?Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该对象。2.Proxy基本语法const obj = new Proxy(target, handler)被代理之后返回的对象 = new Proxy(被代理对象,要代理对象的操作)handler中常用的对象方法如下:get(target, propKey, re
2022-05-24 20:22:47
760
原创 HTTP状态码及其含义
HTTP状态码及其含义1XX:信息状态码 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 2XX:成功状态码 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求,但尚未处理 3XX:重定向 301 Moved Permanently 请求的网页已永久移动到新位置。 302 Found 临时性重定向。
2021-12-04 15:03:58
148
原创 VueX(Vue状态管理模式)
vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。应用vuex的好处能够集中管理共享的数据,易于开发和后期的维护 高效的实现组件之间的数据共享,提高开发效率 存在vuex的数据也是响应式的,能够实时保持数据与页面的同步应用场景多个组件共享数据或者是跨组件传递数据时vuex基本使用安装npm i vuex -s导入vuex
2021-10-23 16:09:41
387
原创 web前端性能优化方案
回流、重绘会影响网络性能优化回流: 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流 ( 几何大小和位置发生改变 )重绘: 当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘 ( 文字、边框、背景颜色、外观风格 )注意:回流必定触发重绘,而重绘不一定触发回流性能优化方案一、客户端1、压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为..
2021-10-22 17:23:46
561
原创 vue路由router的基本使用及路由跳转的方式
路由的基本使用1. 安装vue-router,npm install vue-router 2. 应⽤插件:Vue.use(VueRouter)// 下载路由之后,在main.js引入路由器import VueRouter from 'vue-router'// 注册全局使用Vue.use(VueRouter)3. 编写router配置项编写router文件夹里的index.js文件:// 引入路由import VueRouter from 'vue-router'// ..
2021-10-15 16:39:12
5453
原创 vue中组件注册及使用
全局注册1、Vue.prototype在多个地方都需要使用但不想污染全局作用域的情况下,这样定义,在每个 Vue 实例中都可用。$ 表示这是一个在 Vue 所有实例中都可用的属性常用于方法、变量等vue.prototype:实例上挂载属性/方法每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。//mian.jsimport Video from 'video.js'Vue.prototype.$video= video//..
2021-10-12 16:43:30
893
原创 引用Vue.js组件的使用
组件的使用传统开发存在的问题: 依赖关系混乱 代码复⽤率不⾼在html中引用Vue.js来使⽤组件的三⼤步骤1. 定义组件(创建组件) 使⽤Vue.extend(options)创建,其中options和new Vue(options)时传⼊的那个optins⼏乎⼀ 样,但也有区别 。区别如下: 1)Vue.extend({})中,el不要写,为什么?-----最终所有的组件都要经过⼀个vm的管理,由vm中的el去决定服务于那 个容器2)Vue.extend({})中,da
2021-10-12 16:34:45
414
原创 计算属性computed、监听器watch、区别
计算属性computed定义:可以理解为能够在里面写一些计算逻辑的属性。原理:底层借助了Object.defineProperty⽅法提供的getter和setterget函数什么时候执⾏?1)初次读取时会执⾏⼀次2)当依赖的数据发⽣改变的时候会被再次调⽤set函数什么时候执行?1)当修改时调用,之后再执行get函数作用:1)减少模板中的计算逻辑2)数据缓存。当我们的数据没有变化时,不在执行计算的过程3)依赖固定的数据类型(响应式数据),不能是普通的传...
2021-10-12 15:33:00
186
原创 vue的特点及核心思想
一、声明式渲染命令式渲染:需要具体代码表达在哪里,做什么,关心如何实践。 声明式渲染:只需要声明在哪里,做什么(what),而无需关心如何实现(how)。例子:声明式编码:无需直接操作DOM原生js或jquery(命令式编码): 1.获取元素 2.给元素添加文字 (按步骤)命令式渲染:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2021-10-11 18:35:46
578
原创 vue2的生命周期
生命周期什么叫做vue的生命周期一个vue的实例在它创建到销毁的一系列过程,就叫做生命周期什么是生命周期钩子函数在vue实例的生命周期中,某个特定时刻会自动触发的函数,就叫做生命周期的钩子函数vue⽣命周期主要分为四个阶段,⼋个过程四个阶段Create 创建 Mount 挂载 Update 更新 Destory 销毁⼋个过程Create之前和Create之后 Mount之前和Mount之后 Update之前和Update之后 Destory之前和Dest
2021-10-11 16:25:02
160
原创 浅拷贝、深拷贝、赋值
一、数据类型存储前面文章我们讲到,JavaScript中存在两大数据类型: 基本类型 字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。 (注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。 ) 引用类型 对象(Object)、数组(Array)、函数(Function)。基本类型数据保存在在栈内存中引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆..
2021-10-09 18:12:04
220
原创 ajax跨域
什么是跨域简单的理解就是因为javascript同源策略的限制同源:协议相同 域名相同 端口相同举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)不同域条件先看看域名的组成:同源政策的目的同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如..
2021-10-09 16:03:16
127
原创 JS异步编程的解决方案
js中解决异步编程有6种方案:1.1 回调函数异步编程的最基本方法,把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。优点:简单、容易理解和实现。 缺点:多次调用会使代码结构混乱,形成回调地狱。function sleep(time, callback) { setTimeout(() => { // 一些逻辑代码 callback(); }, time);}1.2 事件监听...
2021-09-29 20:10:44
375
原创 理解Promise
一、Promise是什么?理解1. 抽象表达 Promise是一门新的技术(ES6规范) Promise是JS中进行异步编程的新解决方案 Promise就是为解决“回调地狱”而生的 备注:旧的方案是单纯使用回调函数2. 具体表达从语法上来说:Promise是一个构造函数 从功能上来说:Promise对象用来封装一个异步操作并可以获取其成功或失败的结果值。二、Promise对象的状态改变Promise的状态指的是实例对象中的一个属性Prom...
2021-09-29 19:23:49
120
原创 JS 数组转对象
方法1使用forin遍历vararr=[1,2,3,4];varobj={};//定义空对象varobj2={};//定义空对象for(varkeyinarr){//key为键名(属性)obj[key]=arr[key]}console.log(obj)//{'0':1,'1':2,'2':3,'3':4}方法2for循环vararr=[1,2,3,4];varobj2={};//定义空对象for(var...
2021-09-27 19:01:11
445
原创 JS 对象转数组
方法一letobj={name:'xilin',age:23}letarr=[]for(variinobj){//console.log(i,obj[i])//namexilin,age23console.log(arr.push(obj[i]))//入栈12}console.log(arr)//['xilin',23]方法二es6方法Object.values返回一个对象的值的一个数组,Object.keys()返回对...
2021-09-27 18:50:37
424
原创 可枚举属性、可迭代对象、迭代器(iterator)、for-in、for-of
可枚举属性可枚举对象的一个定义特征是,当我们通过赋值运算符将属性赋值给对象时,我们将内部可枚举标志(enumerable)设置为 true。这是默认值。但是,我们可以通过将其设置为 false 来更改此行为。经验法则是,可枚举属性总是出现在 for...in 循环中。可枚举属性和不可枚举属性是什么所谓的可枚举就是可遍历的意思,也就是说对象的属性是否能够通过遍历得到。即通过for...in循环遍历到。怎么判断属性是否可枚举对象的属性是否具有可枚举属性是由enumerabl
2021-09-26 19:28:53
1925
1
原创 变量的解构赋值(ES6)
ES6介绍ES6, 全称 ECMAScript 6.0 ,是 JavaScript 语⾔的下⼀代标准,在 2015 年 6 ⽉正式发布。它的⽬标,是使得 JavaScript 语⾔可以⽤来编写复杂的⼤型应⽤程序,成为企业级开发语⾔。 ES6 的出现主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念 目前存在少数低版本浏览器的 JavaScript 是 ES5 版本,大多数的浏览器已经支持 ES6 ES6提供了大量的语法糖。 ...
2021-09-26 15:46:55
157
原创 前端开发的3大软件架构设计模式
MVCMVC是软件架构中最常见的一种框架,它的意思是,软件可以分成三个部分:视图(View),用户界面;控制器(Controller),即业务逻辑;模型(Model),数据保存。各部分之间的通信方式如下:View传送指令到Controller;Controller完成业务逻辑后,要求Model改变状态;Model将新的数据发送到View,用户得到反馈。所有通信都是单向的。MVC还有一个重要的缺陷,view层和model层是相互可知的,这意味着两层之间存在耦合。耦合对于一个
2021-09-16 20:54:15
794
原创 gitee基本命令及使用
基本命令:git init -初始化 git status -查看状态 git add '文件名’ -提交到缓存区 git add * -提交全部文件,git add .* -提交包含隐藏文件的全部文件 git status -查看状态是否提交成功 git commit -m "first commit" -提交到本地源码库,并附加提交注释 git remote add origin https://github.com/chape/test.git ...
2021-09-14 18:56:32
6021
1
原创 cookie、localStorage、sessionStorage三种客户端存储方式
cookiecookie是http协议下,服务端或者脚本可以维护客户端信息的一种方式。 域、路径、失效时间和安全性都是服务器给浏览器的指示,它们不会随着请求发送给服务器,发送给服务器的只有名称与值对。sessionStorage(会话存储)同源策略: 不同于 Cookie, sessionStorage 访问限制更高,只有当前设定了 sessionStorage 的域下才能访问。单标签页: 两个相同域下的标签页不能互通。即:在关闭标签页或者新开的标签页下都不能访问之前写下的 sessionS
2021-09-14 15:03:01
2266
原创 JQuery中的ajax和axios的使用及区别
1、jQuery介绍jQuery是一个Javascript工具库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。jQuery功能:* 使用CSS选择器进行元素查询* 事件机制* Dom操作* 属性操作* 工具方法* Ajax2、jQuery中ajax的使用ajax定义简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示jQuery为我们将原生ajax进行了封装,现在我们只需要一行简单的代码,就可以实现 A
2021-09-11 20:03:29
2397
原创 了解及使用AJAX(JS原生ajax)
1.什么是AJAX?AJAX即“Asynchronous Javascript And XML”(异步的JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构,AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换,不会导致页面重载。对AJAX的印象:
2021-09-10 14:32:21
319
原创 JS(十四)BOM
一、什么是BOM?BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。BOM 的核心是 window 对象,表示浏览器的实例。 二、BOM对象window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性; document 对象,文档对象; location 对象
2021-09-09 18:35:55
276
原创 JS(十三)DOM事件机制
JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件是由三部分组成事件源事件类型事件处理程序我们也称为事件三要素 1.事件源:事件被触发的对象 -->按钮对象2.事件类型:如何触发?触发什么事件?例如鼠标点击,键盘按下等…3.事件处理程序:通过一个函数赋值的方式执行事件的步骤1.获取事件源2.注册事件(绑定事件)3.采用函数赋值形式添加事件处理程序常用事件: 当用户点.
2021-09-08 19:41:07
334
原创 JS(十二)DOM基础
1.定义DOM是JS操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JS对象,从而可以用脚本进行各种操作(比如增删内容)。DOM是针对HTML和XML文档的一个API(Application programming interfaces--应用程序编程接口),DOM描绘了一个层次化的节点树,允许开发人员添加,移除,修改页面的某一部分。• 文档– 文档表示的就是整个的HTML网页文档• 对象– 对象表示将网页中的每一个部分
2021-09-08 14:38:11
81
原创 visibility、display、opacity的区别
visibility、display、opacity理解:opacity 用来设置透明度display 定义建立布局时元素生成的显示框类型visibility 用来设置元素是否可见。相同点: 设置visibility:hidden,display:none,opacity:0 ,都能隐藏dom元素,使元素在页面上看不见不同点:display: none; 1.display: none;不占据空间,把元素隐藏起来,所以动态改变此属性时会引起重排...
2021-09-07 20:22:57
396
原创 JS(十一)原型链继承、经典继承、组合继承
1.原型链继承构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。原型链继承(将父类的实例作为子类的原型)://父类function Animal(){ this.name ='animal';}Animal.prototype.getAnimalName=function(){ console.log(this.name)}//子类function Dog(){ this.name='dog';}//
2021-09-06 21:56:59
255
原创 JS(十)JavaScript创建对象模式汇总
1.用字面量的方式创建对象字面量就是用来描述变量的;一般来说,给变量赋值的时候,等号右边的都可以看作是字面量(因为等号右边的都是用来描述这个变量的,比如描述一个变量为字符串(字符串字面量)、一个数组(数组字面量)、一个对象(对象字面量),等等)。var person = { name: "zhangsan", age: 18, gender: 'male', sayName: function(){ console.log(this.name); }}缺点:用
2021-09-05 21:20:53
193
原创 JS(九)基本包装类型
基本包装类型在 ES 中,数据的分类分为基本数据类型和引用类型。而基本包装类型,严格来说不属于上面两个中的任意一个,但是又和这两种类型息息相关。基本数据类型和引用类型这两个类型其中一个很明显的区别是,引用类型有自己内置的方法,也可以自定义其他方法用来操作数据,而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。为了便于操作基本类型值,ECMAScript还提供了3个特殊的引用类型:Boolean,Number,String。这些类型与其它引用类型相似,但同时也具有与各自的基
2021-09-05 15:27:21
80
原创 JS(八)数组API--迭代方法重构(every、some、map、filter、forEach)
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。// every重构 Array.prototype.myEvery=function(fun,obj){ for(i=0;i<this.length;i++){ // .call(执行环境对象,实参列表)。.bind(执行环境对象)(实参列表),改变this的指向 if(!(obj?fun.bind(obj)(this[i].
2021-09-05 14:37:46
285
原创 JS(七)数组API---数组方法重构(push、pop、shift、unshift)
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。//push 最后添加一个或多个 返回新数组长度Array.prototype.myPush=function(){ for(var i=0;i<arguments.length;i++){ // 最后的后一个位置添加 this[this.length]=arguments[i] } return this.length}var arr=[1,2,3,4,5];var result=arr
2021-09-05 14:31:31
176
原创 JS(六)理解闭包
1.什么是闭包?简单讲,闭包就是指有权访问另一个函数作用域中的变量的函数。MDN 上面这么说:闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。闭包的作用域链包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。如果函数A内部有函数B,函数B可以访问函数A的变量,那么函数B就是闭包。在本质上,闭
2021-09-05 14:16:17
333
原创 JS(五)JavaScript对象Object原型属性及方法(原型方法,实例可以调用的方法)
Object原型属性及方法(原型方法,实例可以调用的方法)在Object的构造函数的原型对象中的属性和方法都可以被Object构造函数的实例所继承。Object原型中的所具有的任何属性和方法也同样存在于其他对象中,任何对象继承自Object。 prototype:构造函数中的属性,指向该构造函数的原型对象。 constructor:原型对象中的属性,指向该原型对象的构造函数 proto:实例中的属性,指向new这个实例的构造函数的原型对象 总结:每个构.
2021-09-04 15:38:30
809
原创 JS(四)JavaScript对象Object显示类型转换(强制类型转换)
Object显示类型转换(强制类型转换)ECMAScript中可用的3种强制类型转换如下:Boolean(value)把给定的值转换成Boolean型;String(value)把给定的值转换成字符串。Number(value)把给定的值转换成数字(可以是整数或浮点数); Object类型到Boolean类型 // 除了空引用(null)会转换为false,其他都被转换为truevar obj = { name:"briup", age:12};// 使
2021-09-04 15:29:04
3185
原创 JS(三)let var const的区别 (ES6)
一.let var const的区别 1.var声明全局变量,作用域为全局。 let只在其所在的代码块内有效,存在暂时性死区,即变量会绑定某个区域,不受外部影响。 const同样存在暂时性死区。 2.var存在变量声明提升,var声明的变量可在声明前使用,只是这种情况下值为undefined。let没有,const没有,只能在声明后使用,否则报错。 var a;//提升到作用域的最前面 console,log(a);//unde...
2021-09-04 15:04:42
103
原创 JS(二)操作符与隐式转换
1.操作符+ (正号)'+'的第一种用法:进行数据相加 '+'放在数据的前面,就是取正数 '+'与字符串运算时,就是字符串连接符 '+'可以将数字字符串或布尔类型等隐式转换成number类型 -(负号) 正、负号可以对数字进行取正或取负,其他运算符不能转换 正、负号可以将字符串数字隐式转换成数字 var num1 = '20';var num2 = '-20';console.log(-num1); //-20console.lo..
2021-09-04 14:53:27
235
原创 JS(一)初识JavaScript
1.初识JavaScript1.1.什么是JavaScriptJavaScript ( JS ) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。1.2.JavaScript的组成部分(面试题)
2021-09-04 14:13:04
133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人