spirit_peri的博客

转载 是否所有函数都有prototype

转载自https://blog.csdn.net/jingshui1234/article/details/116647049使用Function.prototype.bind创建的函数对象function abc(){console.log('abc')}var binded = abc.bind(null)binded() //abcconsole.log(binded.prototype) //undefined箭头函数也没有var abc = ()=>{console.log(

原创 vue中的nextTick

nextTick 是 Vue 提供的一个全局的API ，由于Vue的异步更新策略导致我们对数据的修改不会立马体现到都没变化上，此时如果想要立即获取更新后的dom的状态，就需要使用这个方法。Vue在更新dom时是异步执行的。只要监听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓存时去重对于避免不必要的计算和dom操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后

转载 【RESTful】深入理解 RESTful Api 架构

非原创，搬运地址： http://mengkang.net/623.html一些常见的误解不要以为 RESTful Api 就是设计得像便于 SEO 的伪静态，例如一个 Api 的 URL 类似于 http://xxx.com/blog/1 ，我们可以通过浏览器访问该 URL 而读取文章，但是这并不代表着它就是 RESTful Api 。也不要认为URL 里有 queryString 就不是 RESTful Api ，例如 http://xxx.com/users/?page=10&page

转载 【vue3】快速上手

Vue3快速上手张天禹老师笔记1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级

原创 【分片上传】大文件上传优化：分片上传，断点续传，秒传

概述：上传控件模板：<input type="file" @change="getFileInfo($event)">input 组件选择文件后可以获取到文件信息，然后开始上传设定每次分片的大小 sizes ，总片数 = 文件大小 / 分片大小记录当前片数，开始循环总片数，给所有分片加密。加密的逻辑是：用 File 实例对象上的 slice 方法把拿到的文件进行分片，然后用 FileReader 对象读取分片后的每一片文件内容，监听 onload 事件，读取完成后将结果用 md5

原创 【VUE】响应式原理

VUE响应式原理：先准备一个用来发布订阅事件的类 Dep，该类中定义一个数组 subs 用来存放订阅信息，然后在 Dep 上添加一个全局标识 target 用来配置 Watcher。vue 在实例化对象的时候会先遍历递归 data 配置项中的属性，用 Object.defineProperty 给每一个属性加上 getter 和 setter 方法。在 getter 方法中，调用 Dep 的添加方法将 Dep.target push 到 subs 中（实现订阅），在 setter 方法中遍历 subs

原创 【css】行内级元素之间有空格解决方案

原创 【vue】组件间的传值

1、父子组件之间的传值：props2、父子组件直接的传值：自定义事件3、任意组件之间的传值：全局事件总线4、任意组件之间的传值：发布订阅模式（第三方库）

转载 Promise.all 的缺陷（Promise.allSettled）

来源：弹指一挥间_e5a3链接：https://www.jianshu.com/p/c5c3c2595c98前言Promise是 es6新出的语法，用来处理异步请求，解决之前没有 Promise时的回调地狱。Promise有几个api, Promise.resolve,Promise.reject,Promise.all,Promise.race。关于多个异步的处理我们可以用 Promise.all，但 Promise.all只在所有的 promise都 resolve时才会调用 .then中的成功回

转载 常见 Web 安全攻防

转自：https://github.com/gauseen/blog/issues/12一、XSS 攻击XSS (Cross Site Script)，跨站脚本攻击，因为缩写和 CSS (Cascading Style Sheets)重叠，所以叫 XSS。非持久型 XSS（反射型 XSS ）: 一般是 URL 参数上带有恶意脚本代码，当用户点击该 URL 时，恶意代码参数被脚本解析、执行。XSS 攻击代码演示：<script> const searchParams = new

原创 offsetTop

offsetTop, offsetLeft：只读属性。要确定的这两个属性的值，首先得确定元素的offsetParent。offsetParent指的是距该元素最近的position不为static的祖先元素，如果没有则指向body元素。确定了offsetParent，offsetLeft指的是元素左侧偏移offsetParent的距离，同理offsetTop指的是上侧偏移的距离。offsetHeight, offsetWidth：只读属性。这两个属性返回的是元素的高度或宽度，包括元素的边框、内..

原创 nuxt部署

原创 【bug】表单提交

问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。搜索了问题触发原因，是由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。在el-from 加上 @submit.native.prevent阻止默认提交...

原创 JS 详解 Cookie、 LocalStorage 与 SessionStorage

基本概念CookieCookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今

原创 【清单】正则校验

邮箱/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

原创 离线部署前端服务

环境搭建一、node 部署 node安装目录 /opt/node/1、在nodejs官网（https://nodejs.org/en/download/）下载对应的linux 版本（QJW服务器linux环境为华为centos7 arrch版系统 （64位），使用x64的node版本报找不到二进制，采用ARM版本的nodejs）2、进入服务器，node -v，npm -v查看系统是否安装过node服务及版本号是否试用本服务 （如果不符合需要拆卸原有的node）3、将下载好的nodejs上传到服务

原创 HTTP状态码

200, OK，访问正常301, Moved Permanently，永久移动302, Moved temporarily，暂时移动304, Not Modified，未修改307, Temporary Redirect，暂时重定向401, Unauthorized，未授权403, Forbidden，禁止访问404, Not Found，未发现指定网址500, Internal Server Error，服务器发生错误...

原创 控制对象状态

有时需要冻结对象的读写状态，防止对象被改变。JavaScript 提供了三种冻结方法，最弱的一种是Object.preventExtensions，其次是Object.seal，最强的是Object.freeze。1. Object.preventExtensions()Object.preventExtensions方法可以使得一个对象无法再添加新的属性。var obj = new Object();Object.preventExtensions(obj);Object.defineProp

原创 Ajax及Ajax跨域

Ajax介绍Ajax 全称为 Asynchronous JavaScript And XML，就是异步的JS 和 XML。通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。Ajax 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。Ajax 优点：1、可以无需刷新页面与服务器进行通信。2、允许根据用户事件来局部更新页面内容。Ajax缺点：1、没有浏览历史，不能回退。2、存在跨域问题。3、SEO不友好。基本操作//1、创建对象const xhr