自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(37)
  • 问答 (5)
  • 收藏
  • 关注

原创 理解ES6中的Promise

所谓promise,简单说就是一个容器,里面保存着某个未来才会结束的事件的结果,从语法上说,promise是一个对象,从他 可以获取异步操作的消息,promise提供了统一的API,各种异步操作都可以用同样的方法进行处理,2、执行异步操作,如果成功了执行resolve(),promise对象的状态为resolved,如果失败了执行jeject(),promise对象的状态为rejected;3、then()方法被执行,第一个参数为成功的回调函数,第二个参数为失败的回调函数,并且返回一个新的promise。

2025-06-15 19:49:52 399

原创 web常见的攻击方式(下)

总结:CSRF可以通过get请求,即通过访问img的页面后,浏览器自动访问目标地址,发送请求,同样,也可以设置一个自动提交的表单发送post请求,访问页面后,表单自动提交,模拟用户完成了一次post操作。利用受害者在被攻击网站获得的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击网站执行某项操作的目的。4、my.com收到请求后,对请求进行验证,并确认是受害者的凭证,误以为是受害者自己发送的请求;6、攻击完成,攻击者在受害者不知情的情况下,冒充受害者,让my.com执行了自己定义的操作。

2025-05-27 22:58:31 311

原创 web常见的攻击方式(上)

web攻击(webAttack)是针对用户上网行为或网站服务器等设备进行攻击的行为,如植入恶意代码、修改网站权限、获取网站用户隐私等等,即使是代码在的很小的bug也有可能导致隐私信息被泄漏,站点安全就是保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践,我们常见的web攻击方式有:XSS(cross site scripting)跨站脚本攻击CSRF(cross-site request forgery)跨站请求伪造SQL注入攻击。

2025-05-19 22:40:58 937

原创 var、let、const的区别

const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动,对于简单类型的数据,值就保存在变量指向的那个内存地址,对于复杂类型的数据,变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的,并不能确保改变量的结构不变。let是ES6新增的命令用来声明变量,用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,不存在变量提升,只要块级作用域内存在let命令,这个区域就不再受外部影响,并且let不允许在相同的作用域中重复声明;

2025-05-07 23:37:17 424

原创 JS类的继承

super关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数;extends关键字表示实现子类继承父类的属性和方法;继承:子类可以继承父类的一些属性和方法。

2025-05-06 23:00:12 212

原创 JS类的定义

与函数相似,定义类也有两种主要方式:类声明和类表达式。这两种方式都使用class关键字加大括号class Person {} // 类声明const Animal = class {} // 类表达式注意:类表达式与函数表达式形似,在被求值前也不能引用;类声明式与函数声明式不同,函数表达式可以提升,但类不能;函数受函数作用域限制,而类受块作用域限制;

2025-04-27 22:33:00 384

原创 原型继承与原型链

如果按照上诉方法,当给Woman.prototype上加一个baby方法的时候,如果Man也继承Person ,那么Man也有baby方法,显然是不对的,因为他们同时使用了同一个对象,根据引用类型的特点,他们指向同一个对象,修改一个就会都影响,为了解决这个问题,可以使用。基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状结构,将原型对象的链状结构关系称为原型链。

2025-04-25 22:11:31 160

原创 JS构造函数

JS实现面向对象需要借助于构造函数来实现,构造函数存在浪费内存的问题。为了解决此问题,通常会利用原型对象方法实现共享。任何函数只要使用new操作符调用的就是构造函数,而不使用new操作符调用的函数就是普通函数。

2025-04-24 22:26:41 338

原创 深拷贝和浅拷贝

JS存在两大数据模型:基本类型与引用类型,基本类型数据保存再栈内存中,引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中。

2025-04-22 23:13:37 314

原创 JS执行机制与事件循环

3、一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。在做一件事情的时候,因为这件事情会浪费很长时间,在做这件事的同时,你还可以去处理其他事情。由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环。前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。立即执行的任务,同步任务都是再主线程上执行的,形成一个执行栈。1、先执行执行栈中的同步任务;

2025-04-21 21:24:00 332

原创 环境对象this的理解

函数内部特殊的变量this,代表着当前函数运行时所处的环境。this关键字是函数运行时自动生成的一个内部对象。只在函数内部使用,总指向调用它的对象。同时,在函数运行中,一旦确定了,就不可以再更改。1.1 绑定规则默认绑定调用函数的对象在浏览器的window,在非严格模式下,this指向window。严格模式下,不能将全局对象用于默认绑定,this会绑定到undefined。隐式绑定函数可以作为某个对象的的方法调用,此时this指向的是上级对象。显式绑定。

2025-04-18 23:24:29 195

原创 JS垃圾回收机制与内存泄漏

垃圾回收机制简称GC,JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收。1.1 JS垃圾回收器-算法说明堆栈空间分配:栈(操作系统):由操作系统自动分配释放函数的参数值、局部变量等,基本数据类型放到栈里面;堆(操作系统):一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收,复杂数据类型放到堆里。

2025-04-17 22:06:33 199

原创 JS作用域与作用域链

通常来讲,一段程序代码中所用到的名字并不总是有效的和可用的,而限定这个名字的的可用性的代码范围就是这个名字的作用域。

2025-04-16 23:07:07 233

原创 控制台图标报错问题

在用Chrome的开发者工具过程中发现该错误,Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico意思就是缺少favicon.ico文件,该文件就是收藏后显示的图标,浏览器一般自动在网站根目录寻找。方案1:做个favicon.ico文件放在根目录下(如上图,该文件的生成是有难度的),在head标签引入favicon.ico文件即可,<link href="favico

2022-04-10 17:10:19 574

原创 什么是浏览器的回流和重绘?

先上个流程图(网上找的)HTML——>HTML Parser ——>DOM Tree ——>Style Sheets——>CSS Parser——>Style Rules——>Attachment——>Render Tree——>painting——>display具体步骤:1.解析HTML,构建DOM数;2.解析CSS,生成样式规则;3.合并DOM数和样式规则,生成渲染树;4.布局render Tree(layout r

2022-03-10 21:28:14 452

原创 Promise异步编程

promise是ES6引入的异步编程的解决方案,是一个构造函数,用来封装异步操作并可以获取其成功和失败的结果。// promise异步编程 const p = new Promise(function(resolve, reject) { setTimeout(function() { let data = '成功的数据'; resolve(data); let err = '错误的数据'; reject(err);

2022-03-04 00:36:08 240

原创 ES6小节

1.let 和 const 声明变量及其新特性?答:1.let: (1)不可重复声明变量 (2)具有块级作用域 (3)没有变量提升 (4)2.const: (1)声明后必须赋值(2)具有块级作用域 (3)没有变量提升 (4)常量值不能修改2.变量的解构赋值答:数组的解构let [a, b] = [1, 2]对象的解构let {name} = {name: 'Jason'}set数据解构 const result = new Set([11, 22,11])Array.form([

2022-03-03 20:22:57 165

原创 初试vue3

1.在main.js 中// 引入的不再是Vue构造函数,而是一个工厂函数import { createApp } from 'vue'import App from './App.vue'// 创建应用实例对象,类似于vue2中的vm,但比它更轻,最后挂载到根元素createApp(App).mount('#app')// 可以打印createApp(App)2.在App.vue中<template> <!-- 根标签可以没有 --> <im

2022-03-02 20:04:56 700

原创 常用的array方法小结

/* 常规方法 array.push(item1); 尾部添加 array.pop(); 尾部删除 array.unshift(); 头部添加 array.shift(); 头部删除 array.splice(index, howmany, item1|item2); 添加或删除数组中的元素 array.sort(''|sortfunction); 对数组的元素进行排序 array.reverse(); 反转数组的元素顺序 */ /* 常用方.

2022-03-02 14:32:26 183

原创 处理树形数据

<script> function listToTree(list) { let info = list.reduce( (map, node)=> ((map[node._id] = node), (node.children = []), map) , {} ); return list.filter((node) => { info[node.pid.

2022-03-02 12:06:02 117

原创 vue代码书写格式

<template> <div class=""><div></template><script>export default { name:"MyComponentName", components:{}, directives:{}, filters:{}, mixins:[], model:{}, props:{}, data() { return .

2022-03-02 10:11:29 660

原创 Vue面试总结

1.如何理解MVVM原理?答:2.vue的生命周期是什么?答:3.vue的钩子函数?答:4.Ajax请求放在哪个钩子函数中?答:5.beforeDestroy如何使用?答:6.vue如何检测数组变化的?答:7.响应式数据原理?答:8.什么是异步渲染,vue为何要异步,如何实现?答:9.nextTick的实现原理?答;10.vue父子组件生命周期的调用顺序?答:11.比较vue中computed与watch的异同点?答:12.watch中的deep:true是如何实

2022-02-22 16:55:39 304

原创 使用vuex插件方法

1.组件访问state中数据的第一种方法:(1)从vuex中按需引入mapState函数Import {mapState} from ‘vuex’(2)将全局数据映射为当前组件computed计算属性computed:{ …mapState([‘count’])}组件访问state中数据的第二种方法:This.$store.state.count2.只能通过mutation变更store数据,不可直接操作store中的数据在store.js中定义mutation.

2021-03-01 21:33:36 221

原创 url解析过程

一.在用户点击URL链接后,浏览器和web服务器执行以下动作:浏览器分析超链接中的URL 浏览器向DNS域名解析器(浏览器内核里)请求解析URL的IP地址, DNS将解析出的IP地址返回给浏览器 浏览器与服务器建立TCP连接(默认80端口) 浏览器请求文档 服务器给出响应,将文档发送给浏览器 释放TCP连接 浏览器显示文档内容二.在建立TCP连接的时候,会有三次握手客户端----SYN(能否建立连接)--------------->服务端客户端ç-------SYN ack

2021-02-25 19:46:19 672

原创 数组常用方法总结

1. Array.from(array)将一个类数组对象(具有length属性)转化成一个真正的数组 let arrayLike = { 0: 'tom', 1: '18', 2: '男', 3: ['湖北', '武汉'], 'length': 4 } let arr = Array.from(arrayLike) console.log(arr)得到的结果是一个真正的数组["tom","...

2021-02-22 19:28:27 510

原创 解决跨域的几种方式

1.反向代理开发环境的跨域,也就是在vue-cli脚手架环境下开发启动服务时,我们访问接口所遇到的跨域问题,vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题在vue.config.js 这个配置文件中配置如下代码:(如果本地服务器:localhost:8888/api/abc)devServer:{proxy:{//代理配制 '/api':{//如果我们的请求地址有/api的时候,就出触发代理机制 target:'127.0.0....

2021-01-27 20:46:58 316 1

原创 大数字问题

javascript能够精确表示的数据整数范围在-2^53到2^53之间,(不含两个端点),超过这个范围,无法精确表示这个值,在控制台打印:Math.pow(2,53) //9007199254740992Math.pow(2,53)===Math.pow(2,53)+1 //true上面的代码中,超过2的53次方之后,数字就不精确了.ES6引入Number.Max_SAFE_INTEGER和Number.Min_SAFE_INTEGER 这两个常量.来表示这个范围的上下限,Number

2021-01-27 17:17:53 418

原创 Vue组件通信方式总结

1.父子通信:1)父向子传值:在父组件中,传递动态属性和静态属性,子组件通过props接收一个字符串数组或者对象( { }这种方式接受属性可以对接受的值进行数据校验 );2)子向父传值:在父组件中,给子组件传递一个函数,子组件中,通过this.$emit('函数名',实参) 方法 调用函数同时传递参数;<body> <div id='app'> <Father></Father> </div> .

2021-01-21 22:01:01 142

原创 Vue生命周期钩子函数的理解

Vue生命周期:从Vue实例创建到Vue实例销毁的过程,有11个钩子函数,其中三个是对于组件.1.beforeCreate(){}----数据注入vm实例之前,此时vm还没有数据 ,vm实例的挂载元素$el 和数据对象data 都为undefined,方法也是未定义<div id='app'>{{msg}}</div> <script type='text/javascript'> var vm = new Vue({

2021-01-14 17:19:33 275 4

原创 Vue中数据双向绑定的原理

<body> <input type="text" id="input"> <p id="p"></p></body><script> const data = { msg: 'hello vue!' }; //获取元素 const input = document.getElementById('input') const p = document.getE.

2021-01-11 16:44:00 229 2

原创 前端模块化

1.模块化:把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块2.模块化开发的好处:(1)方便代码的重用,从而提升开发效率,方便后期维护;(2)解决传统开发模式的命名冲突和文件依赖3.服务端node中的CommomJS规范:(1)成员导出module.exports={}和exports={} (2)模块化成员导入require('模块标识符')4.浏览器端的模块化规范:AMD和CMD5.ES6模块化规范:浏览器端和服务器端通用

2021-01-07 21:34:21 79

原创 js入口函数之小结

<script> //1.js原生的入口函数 方法一 等页面内容全部加在完毕,包含dom元素,图片,flash,css等才会执行函数 window.onload = function() { alert('hello world') }; //2.js原生的入口函数 方法二 等dom元素全部加在完毕,就会执行函数,如果要获取图片尺寸,一般用onload document.addEventListener('DOMContentLoaded.

2020-12-07 20:36:07 2427

原创 html/css总结一

1.px,em,rem 的区别?答:1) px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果 px 要换算成物理长度,需要指定精度 DPI。2) em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。3) rem 是 CSS3 新增的一个相对单位(root em,根 em),使用 rem 为元素设定

2020-12-06 11:49:43 86

原创 怎么让一个不定宽高的 DIV,垂直水平居中

举例: <div class="parent"> <p class="son"> 会议认为,党的十八大以来,我国经济发展取得历史性成就、 发生历史性变革,为其他领域改革发 展提供了重要物质条件。经济实力 再上新台阶,经济年均增长7.1%,成为世界经济增长的主要动力 源和稳定器。 </p> </div>方法一:给父元素di

2020-12-04 19:08:21 233

原创 2020-11-11

1、display:none与visibility:hidden的区别是什么?1)display:none,将元素显示为无,网页中不占任何的位置,建立布局时元素生成的显示框类型,使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”。网页中的dom元素依然存在.2)visibility:hidden,将元素可见性设置为不可见,指定一个元素是否是可见的,但是在网页中该占的位置还是占着。使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即

2020-11-11 19:30:54 83

原创 2020-11-02

拖动模态框部分js代码

2020-11-02 17:05:00 84

原创 2020-10-24

body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价(50000)</li&gt...

2020-10-24 22:07:41 192

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除