- 博客(37)
- 问答 (5)
- 收藏
- 关注
RSS订阅原创 理解ES6中的Promise
所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果，从语法上说，promise是一个对象，从他 可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理，2、执行异步操作，如果成功了执行resolve（），promise对象的状态为resolved,如果失败了执行jeject()，promise对象的状态为rejected；3、then（）方法被执行，第一个参数为成功的回调函数，第二个参数为失败的回调函数，并且返回一个新的promise。
2025-06-15 19:49:52
403
原创 web常见的攻击方式（下）
总结：CSRF可以通过get请求，即通过访问img的页面后，浏览器自动访问目标地址，发送请求，同样，也可以设置一个自动提交的表单发送post请求，访问页面后，表单自动提交，模拟用户完成了一次post操作。利用受害者在被攻击网站获得的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击网站执行某项操作的目的。4、my.com收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求；6、攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让my.com执行了自己定义的操作。
2025-05-27 22:58:31
316
原创 web常见的攻击方式（上）
web攻击（webAttack）是针对用户上网行为或网站服务器等设备进行攻击的行为，如植入恶意代码、修改网站权限、获取网站用户隐私等等，即使是代码在的很小的bug也有可能导致隐私信息被泄漏，站点安全就是保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践，我们常见的web攻击方式有：XSS（cross site scripting）跨站脚本攻击CSRF（cross-site request forgery）跨站请求伪造SQL注入攻击。
2025-05-19 22:40:58
942
原创 var、let、const的区别
const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动，对于简单类型的数据，值就保存在变量指向的那个内存地址，对于复杂类型的数据，变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，并不能确保改变量的结构不变。let是ES6新增的命令用来声明变量，用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，不存在变量提升，只要块级作用域内存在let命令，这个区域就不再受外部影响，并且let不允许在相同的作用域中重复声明；
2025-05-07 23:37:17
429
原创 JS类的继承
super关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数；extends关键字表示实现子类继承父类的属性和方法；继承：子类可以继承父类的一些属性和方法。
2025-05-06 23:00:12
214
原创 JS类的定义
与函数相似，定义类也有两种主要方式：类声明和类表达式。这两种方式都使用class关键字加大括号class Person {} // 类声明const Animal = class {} // 类表达式注意：类表达式与函数表达式形似，在被求值前也不能引用；类声明式与函数声明式不同，函数表达式可以提升，但类不能；函数受函数作用域限制，而类受块作用域限制；
2025-04-27 22:33:00
387
原创 原型继承与原型链
如果按照上诉方法，当给Woman.prototype上加一个baby方法的时候，如果Man也继承Person ，那么Man也有baby方法，显然是不对的，因为他们同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响，为了解决这个问题，可以使用。基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状结构，将原型对象的链状结构关系称为原型链。
2025-04-25 22:11:31
162
原创 JS构造函数
JS实现面向对象需要借助于构造函数来实现，构造函数存在浪费内存的问题。为了解决此问题，通常会利用原型对象方法实现共享。任何函数只要使用new操作符调用的就是构造函数，而不使用new操作符调用的函数就是普通函数。
2025-04-24 22:26:41
343
原创 深拷贝和浅拷贝
JS存在两大数据模型：基本类型与引用类型，基本类型数据保存再栈内存中，引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中。
2025-04-22 23:13:37
315
原创 JS执行机制与事件循环
3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。在做一件事情的时候，因为这件事情会浪费很长时间，在做这件事的同时，你还可以去处理其他事情。由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环。前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。立即执行的任务，同步任务都是再主线程上执行的，形成一个执行栈。1、先执行执行栈中的同步任务；
2025-04-21 21:24:00
336
原创 环境对象this的理解
函数内部特殊的变量this，代表着当前函数运行时所处的环境。this关键字是函数运行时自动生成的一个内部对象。只在函数内部使用，总指向调用它的对象。同时，在函数运行中，一旦确定了，就不可以再更改。1.1 绑定规则默认绑定调用函数的对象在浏览器的window，在非严格模式下，this指向window。严格模式下，不能将全局对象用于默认绑定，this会绑定到undefined。隐式绑定函数可以作为某个对象的的方法调用，此时this指向的是上级对象。显式绑定。
2025-04-18 23:24:29
196
原创 JS垃圾回收机制与内存泄漏
垃圾回收机制简称GC，JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。1.1 JS垃圾回收器-算法说明堆栈空间分配：栈（操作系统）：由操作系统自动分配释放函数的参数值、局部变量等，基本数据类型放到栈里面；堆（操作系统）：一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，复杂数据类型放到堆里。
2025-04-17 22:06:33
201
原创 控制台图标报错问题
在用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
576
原创 什么是浏览器的回流和重绘？
先上个流程图（网上找的）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
702
原创 常用的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
662
原创 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
305
原创 使用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
673
原创 数组常用方法总结
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
513
原创 解决跨域的几种方式
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
317
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
276
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
230
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
2428
原创 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-10-24
body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li>...
2020-10-24 22:07:41
192
空空如也
关于闭包的问题，每次触发事件后的定时器没有被清空
2022-03-11
什么是Vue 实例的根数据对象？
2022-02-28
vue项目中的echarts表格不显示 可能几种原因？
2022-02-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人