月刊少女野崎君のBlog

如何理解webpack 是一个打包器,作用是把前端模块编译成浏览器能够识别的HTML+CSS+JS 在webpack眼中,一起皆模块 四个入门级的核心概念:入口entry / 出口output / loader / plugin webpack可以做哪些事? 一是构建开发环境,一个上线打包 使用webpack npm install webpack -g 核心api包 npm install webpack -D npm install webpack-cli -g 命令行包 npm install webpack-cli -D 执行命令 webpack 会自动读取webpack.config.js文件 默认情况,webpack会自动读取src目录下的index文件为入口文件,将dist作为出口文件 webpack –config xxx.js 手动指定配置文件 配置package.json “build”: “webpack –config webpack.config.js” mode 配置当前环境是生产环境还是开发环境 production devlop ...

什么是CSRF攻击🍢 CSRF攻击指的是跨站请求伪造攻击,攻击者诱导用户进入一个第三方网站,然后网站向被攻击网站发送跨站请求,如果用户在被攻击网站中保存了登录状态,那么攻击者就可以利用这个登录状态,绕过后台的用户验证,冒充用户向服务器执行一些操作 🍢 CSRF攻击的本质是利用了cookie会在同源请求中携带发送给服务器的特点,以此来实现用户的冒充 CSRF攻击的分类 一般的CSRF攻击类型有三种: 🍭 第一种是GET类型的CSRF攻击,比如在网站中的一个 img 标签里构建一个请求,当用户打开这个网站的时候就会自动发起提交 🍭 第二种是POST类型的CSRF攻击,比如说构建一个报单,然后隐藏它,当用户进入页面时,自动提交这个表单 🍭 第三种是链接类型的CSRF 攻击,比如说在a标签的href属性里构建一个请求,然后诱导用的去点击 如何防护CSRF 攻击 CSRF攻击中,重要的一环就是cookie,这一份cookie模拟了用户的身份,所以防范CSRF攻击cookie是一个入手点,恰巧,cookie中有个字段,可以对请求中cookie的携带做一些限制 第一种方法从 samS ...

浏览器的缓存机制 首先通过 cache-control验证强缓存是否可用,如果可用直接只用 否则,进入协商缓存,即发送HTTP请求,服务器通过浏览器请求头中的相应字段来验证协商缓存是否可用,如果可用直接使用,否则,返回新的资源和200状态码 浏览器的缓存分为两种,一种是发送HTTP请求,一种是不发送请求 强缓存 强缓存(本地缓存),它不需要发送HTTP请求 ,如果命中缓存,浏览器直接从缓存中读取资源 在HTTP/1.0 中检查强缓存的字段是expires, 在HTTP/1.1 中检查强缓存的字段是cache-control EXpiresexpires 即过期时间 存在服务端返回的响应头中,告诉浏览器在这个过期时间之前可以直接读取缓存,不需要再次请求1Expires: Wed, 22 Nov 2020 10:41:00 GMT 表示资源在2020年11月22号10点41分过期,过期了就必须重新发送请求但~,这个方法有个小bug,那就是服务端的时间和浏览器的时间也许并不是一致所以服务器返回的过期时间可能就是不准确的,所以这种方式在HTTP1.1版本中就被抛弃了 ...

indexOf()方法 作用:查找数组或者有没有某一个数据(从左往右查找) 语法: 数组.indexOf(要查找的数据) 数组.indexOf(要查找的数据,从哪个索引开始) 第二个参数不写默认从0开始 返回值: 一个数字 如果查找了数据,那么返回的是第一个找到数据的索引 如果没有,返回-1 1234567let arr=['hello','world','你好']let res = arr.indexOf('world')console.log(res) //返回索引 1let arr=['hello','world','你好']let res = arr.indexOf('111')console.log(res) //返回 -1 lastIndexOf() 作用:查找数组或者有没有某一个数据(从右往左查找),返回正常的索引值 语法: 数组.lastIndexOf(要查找的数据) 返回值: 一个数字 ...

Object.keys()方法 作用: 参数对象自身所有可遍历(可枚举)属性的键名 返回值:字符串数组,数组中包含着对象的键名 12345678910111213141516171819202122232425262728293031 let str='1234' onsole.log(Object.keys(str)); //返回 ["0", "1", "2", "3"] 索引 let obj={ name:'xiaoming', age:18 } console.log(Object.keys(obj)); // 返回 ["name", "age"] 键名 let arr=[1,2,3,4,5] console.log(Object.keys(arr)); //返回["0", "1", "2", "3&q ...

什么是XSS攻击 XSS(Cross Site Scripting)攻击是指浏览器中执行恶意脚本(无论是跨域还是同域),从而拿到用户的信息并操作 这些操作一般可以完成下面这些事情: 窃取cookie 监听用户的行为,比如输入账号密码等 修改DOM伪造登录表单 在页面中生成浮窗广告 xss攻击指的是跨站脚本攻击,是一种代码注入攻击,攻击者通过在网站注入恶意脚本,使之在用户的浏览器上运行,从而盗取用户的信息,如cookie等, xss的本质是因为网站没有对恶意脚本进行过滤,与正常代码混合在一起,浏览器没有办法辨别出哪些脚本是可信的,从而导致了恶意脚本的执行 xss攻击的类型 xss一般分为 存储型:指的是恶意代码提交到了网站的数据库中,当用户请求数据的时候,服务器将其拼接为HTML后返回给了用户,从而导致了恶意代码的执行 反射型:指的是攻击者构建了特殊了URL,当服务器接收到请求后,从URL中获取数据,拼接到HTML后返回,从而导致了恶意代码的执行 DOM型:指的是攻击者构建了特殊的URL,用户打开网站后,js脚本从URL中获取数据,从而导致了恶意代码的执行 反射型X ...

为什么会有Event LoopJavaScript 中的任务分为同步任务和异步任务JavaScript 是一门单线程非阻塞语言,单线程代表它在执行任务时都只有一个主线程去执行任务,主线程中的任务称为同步任务而非阻塞是当代码需要进行一项异步任务,无法立刻返回结果,需要花一定时间才能返回任务的时候,主线程会挂起这个任务,然后在异步任务返回结果的时候再往下执行相应的回调 什么是同步? 同步任务是直接放在主线程上排队依次执行 什么是异步 异步任务不进入主线程、而,进入”任务队列”（task queue）的任务，只有等主线程任务>执行完毕，”任务队列”开始通知主线程，请求执行任务，该任务才会进入主线程执行。 那JavaScript又是如何实现”非阻塞”呢?—->答案:event loop 什么是执行栈 当代码执行时,js会生成一个相应的执行环境(context)又叫执行上下文 执行环境(即执行上下文中)存在着执行代码的的私有作用域,上层作用域的指向,方法的参数,这个作用域中定义的变量以及这个作用域的this对象等等 而当这一系列了方法被依次调用的是,因为js是单线程的 ...

从浏览器地址栏输入URL到页面显示 总体可以分为以下几个步骤: 构建请求,查找强缓存,命中强缓存则直接使用 未找到强缓存,进入DNS 解析 建立TCP 连接 发送HTTP请求 响应请求 浏览器解析渲染页面 正题开始... 现在你在地址栏中输入:http://www.baidu.com 网络请求1/构建请求 浏览器会构建请求行: 12//get请求 路径是根路径 HTTP协议版本是1.0GET / HTTP/ 1.0 2/查看强缓存 如果命中强缓存,则直接使用,否则进入DNS解析 关于浏览器缓存相关 参考 《强缓存和协商缓存》 3/DNS解析 DNS解析的过程就是在寻找哪台机器上有你需要的资源的全过程 当你在浏览器中输入一个网址时,将网址转换为IP地址的过程就叫DNS 解析 因为我们在浏览上输入的是一个域名,而数据包是要通过IP地址传送的给对方的,因此我们需要得到域名相应的IP地址,这个过程需要依赖于一个服务系统,这个系统将域名和IP一一映射,我们将这个系统叫 DNS(域名解析系统) 另外,浏览器提供了DNS数据缓存功能,即如果一个域名解析过了, ...

01/什么是闭包? 理解闭包需要先了解 作用域 作用域链 垃圾回收机制 作用域:作用域是指当前执行代码对变量的访问权限 分为静态作用域和动态作用域,js采用静态作用域 其区别是:静态作用域:函数作用域是在函数定义时决定,动态作用域:函数作用域是在函数调用时定义 es6的块级作用域:通过let 和 const 声明,只能在声明变量所在的作用域里使用,外部无法使用 作用域链:内层作用域访问一个变量,会先在当前作用域的父级找,如果没找到,在往上一层找,直到找到全局,如果还没有就宣布放弃,这种一层一层向上的关系,就是作用域链,即以链式的方式访问变量 由此得到一个问题,如何让全局作用域访问局部作用域中的变量 —>闭包 02/闭包 闭包的作用: 读取函数内部的变量,让全局访问局部变量的函数 让这些变量始终保存在内存里 如何让这些变量始终保存内存里–>采用闭包函数,函数中嵌套着另一个函数 闭包函数:会破坏正常的垃圾回收机制,从而改变变量访问的正常机制,延长变量的生命周期 闭包延长变量的生命周期 闭包函数是在函数中嵌套着另外一个函数,这个函数在外部被调 ...

1- 什么是ajax ajax,异步的JavaScript和XML;是一种实现 无页面刷新 获取数据的 混合技术;简单来说就是JavaScript执行异步请求 2- ajax的原理 引例:如,领导想要找小刘汇报工作,于是领导就委托秘书帮忙去叫小刘;然后领导就继续忙自己的工作,直到秘书告诉领导小刘到了,接着 小刘就开始汇报工作了ajax请求数据的流程与”领导找小刘汇报工作”相似;其中的核心–>秘书,秘书相当于 浏览器的XMLHttpRequest对象,当浏览器发出HTTP请求与接收HTTP响应时,浏览器可以接着做其他事情,直到收到xhr返回的数据渲染页面 3-ajax的执行流程如:你想点外卖,首先: 下载软件 var xhr = new XHLHttpRequest() 选择商家 xhr.open(“get/post”,”url”,true)请求方式:get/post/其他,请求地址,同步或异步(默认异步) 下单 xhr.send(); 发送 监测外卖小哥的状态(小哥到哪了) 即监测ajax的状态和服务端的状态通过xhr.oneadyStateChange事 ...