zayyo的博客

在开发各种项目时，我们会发现经常需要一些辅助函数来帮助我们实现一些需求，并且这些函数是在很多项目里都可以进行复用的。下面我就列出我们一些常用的辅助函数，来帮助大家在开发项目时，进行复用。

我们都知道计算机的核心是CPU，它承担了所有的计算任务；而操作系统是计算机的管理者，它负责任务的调度、资源的分配和管理，统领整个计算机硬件；应用程序则是具有某种功能的程序，程序是运行于操作系统之上的。在早期的操作系统中并没有线程的概念，进程是能拥有资源和独立运行的最小单位，也是程序执行的最小单位。任务调度采用的是时间片轮转的抢占式调度方式，而进程是任务调度的最小单位，每个进程有各自独立的一块内存，使得各个进程之间内存地址相互隔离。

数据传输完毕后，就释放了连接，客户端共发出了两个连接请求报文段，其中第一个丢失，第二个到达了服务端，但是第一个丢失的报文段只是在某些网络结点长时间滞留了，延误到连接释放以后的某个时间才到达服务端，此时服务端误认为客户端又发出一次新的连接请求，于是就向客户端发出确认报文段，同意建立连接，不采用三次握手，只要服务端发出确认，就建立新的连接了，此时客户端忽略服务端发来的确认，也不发送数据，则服务端一致等待客户端发送数据，浪费资源。如果 ISN 是固定的，攻击者很容易猜出后续的确认号，因此 ISN 是动态生成的。

当JavaScript在内部判断一个值的类型时，会使用一个表示类型的标记位。在表示对象的标记位中，null的值为全零，而表示对象的标记位必须至少有一个位为1。typeof 在对值类型 number、string、boolean 、null 、 undefined、 以及引用类型的 function 的反应是精准的；是为了改变toString函数内部的this指向并,将要检测的值作为方法的上下文（即this），我们可以确保返回的字符串是准确的对象类型，同时也防止。方法会返回一个表示该对象的字符串。

浏览器的缓存是指浏览器在处理网络资源时，将这些资源存储在本地磁盘或内存中，并在后续的请求中重复使用这些缓存的资源。它旨在提高网页加载速度、减少网络流量和服务器负载。强缓存是指浏览器在请求资源时，直接从本地缓存中获取资源，并且不会发送请求到服务器。协商缓存是指浏览器在请求资源时,浏览器和服务器之间协商确定是否使用缓存副本的形式。如果资源的强缓存失效（即过期），浏览器将向服务器发送请求，并在请求中携带上次缓存的相关信息。服务器收到请求后，会根据携带的信息来判断资源是否有更新。

常常和content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。属性用于提供与该元数据相关的值或内容。常常和name 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值,当与。标签中使用类似于 HTTP 头部的指令，以控制浏览器的行为或提供特定的元数据。标签是一种用于在 HTML 文档头部提供元数据的标签。用于指定网页在移动设备上的可视区域的大小和缩放行为。

我们在创建一个HTML文件时都会有一个<!DOCTYPE>标签，虽然他很不起眼，但是他在我们的HTML文件只能却是很重要的。今天我们就来好好分析一下它的作用！！！

我们在创建一个HTML文件时都会有一个<!DOCTYPE>标签，虽然他很不起眼，但是他在我们的HTML文件只能却是很重要的。今天我们就来好好分析一下它的作用！！！

首先，你需要定义一个初始状态对象。它表示应用程序的初始状态。

因此，为了在不刷新整个网页的情况下在不同的视图之间进行切换，我们需要一种路由机制，以便在不同的视图之间切换而不用刷新整个网页.而 React-Router就是目前最好的React路由解决方案。React Router 是一个基于 React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。API 来处理URL的变化，并根据URL的路径匹配渲染相应的组件。学习使用React Router之前先了解React Router提供的实现导航和路由功能的三个主要组件。

XSS（Cross-Site Scripting，跨站脚本攻击）是一种常见的网络安全漏洞，攻击者通过在网页中注入恶意脚本代码，使其在用户的浏览器中执行。这种攻击利用了网页应用程序对用户输入的不充分验证和转义，使得攻击者能够在受害者的浏览器上执行恶意脚本。存储型XSS：攻击者将恶意脚本代码存储在目标网站的数据库中，当用户访问包含该恶意代码的页面时，代码会从数据库中提取并在用户浏览器中执行。

React Hooks 是 React 16.8 新增的一种特性，它可以让你在函数式组件中使用 state、生命周期、context 等 React 特性。Hooks 可以让你将复杂的逻辑拆分成多个独立可重用的函数，并且使得这些函数更加易于理解和测试。

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情。

其实就是让服务端的代码更加简单。为什么要更简单？因为过去的服务端还需要渲染页面，还有数据存储，现在服务端什么都不用管了，它也不用管用户界面，只需要写好数据存储的逻辑就可以了，所以变得更简单了。可移植的一个软件能够很方便的移植到其他平台。为什么在这里说它方便移植？这是因为在过去我们的前端其实在操作系统里面写那些软件，在那个时候前端还需要去管一些数据的存储，一些计算，或者一些很复杂的逻辑。但是现在前端在浏览器里面进行工作，这样我们前端工程师就不需要去管那些复杂的计算了，只需要调用接口来渲染页面就可以了。

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

轻量化和效率高语法简单，编写轻松并发运行测试运行效率高包含 TypeScript 和 Flow 的类型定义首先我们要安装AVA插件然后我们要在我们的中修改我们的scripts执行脚本接下来我们就要开始编写我们的测试脚本test了首先我们要从到ava中导入我们的test方法和我们编写的arrify 函数然后我们要利用我们导入的test方法进行测试。第一个参数是我们测试的名称第二个参数要求是一个传入的是一个回调函数，在回调函数里编写我们的测试语法。

container是和的简写属性，用来显式声明某个元素是一个查询容器，并且定义查询容器的类型（由指定）和查询容器的名称（由指定，使用反斜杠（）隔开。表示指向容器的类型，是水平方向的（对应宽度），还是包括垂直方向的（对应宽度和高度）。其中normal是默认值，表示不建立容器元素，size表示水平和垂直方向都建立，是只在水平方向建立，会给元素同时应用layout、style和inline-size容器状态。

我们在编写项目的时候，都会引入很多很好用的工具包，例如VueX、axios、Router、Element UId等。这些包很好用，安装引入也很方便。那如果我们也想发布一个我们自己的工具包，在以后编写项目时，直接引入我们自己的工具包要怎么发布呢？今天我们就来手把手带你发布你的第一个npm包！！！

对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。常用生命周期对比如下表所示。Tips： setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地去定义。

当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期当父组件中状态发生变化（包括子组件的挂载以及卸载）时，会触发自身对应的生命周期以及子组件的更新render以及render之前的生命周期，则 父组件先执行render以及render之后的声明周期，则子组件先执行，并且是与父组件交替执行当子组件进行卸载时，只会执行自身的生命周期，不会再触发别的生命周期。

用户授予第三方应用访问该用户某些资源的权限你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息）实现授权的方式有：cookie、session、token、OAuth实现认证和授权的前提是需要一种媒介（证书） 来标记访问者的身份在战国时期，商鞅变法，发明了照身帖。照身帖由官府发放，是一块打磨光滑细密的竹板，上面刻有持有人的头像和籍贯信息。

【代码】前端工具宝库，帮你解决99%的业务需求难题。

单元测试的编写是比较简单的，它是提高我们软件开发的工具。它的使用有助于帮我更早的发现错误。并防止我们后期重构代码时再次产生同样的错误。它可以让我们的项目后期更易于管理和维护，即使我们的项目代码体积结构变得更大更复杂——尤其是在更大的开发团队中。而且自动化单元测试还能够让开发人员在够重构和优化代码时，不必担心新代码的是否会影响旧的功能。单元测试是开发过程的关键部分，对于帮助您构建更好、更安全的 JavaScript 应用程序至关重要。

定义：HTTP 协议是 Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP 是一个基于 TCP/IP 通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于 1990 年提出，经过几年的使用与发展，得到不断地完善和扩展。

相信大家对Vue的不陌生。在使用Vue的时候也会遇到报错，也会使用浏览器的F12 来查看报错信息。但是你知道Vue是如何进行异常抛出的吗？vue 是如何处理异常的呢？接下来和大家介绍介绍，Vue是如何处理者几种常见的报错的。先很大家说说常见的报错，再和大家介绍如何处理。

定义：浏览器-服务器（Browser/Server）结构，简称B/S结构。是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，如Chrome、Safari、Microsoft Edge、Netscape Navigator或Internet Explorer，服务器安装SQL Server、Oracle、MYSQL等数据库。

默认情况下, 原生的constructor属性是不可枚举的，如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了。我们在上一个构造函数的方式创建对象时，有一个弊端：会创建出重复的函数，比如running、eating这些函数。JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。不是的，因为它是一个函数，才有了这个特殊的属性。既然字面量创建的对象会有原型，那么创建的函数也会有原型吗？

如何在本地运行我们的dist文件夹

在ECMAScript5标准中，JavaScript提出了严格模式的概念（Strict Mode）：第一种方式：（单文件严格模式）在js文件中开启严格模式，仅仅对这个JavaScript文件生效第二中方式：（特定函数严格模式）在函数的作用域内部单独开启严格模式，仅仅对这个函数的内部生效严格模式对正常的JavaScript语义会有那一些限制呢？严格模式通过 抛出错误 来消除一些原有的 静默（silent）错误；严格模式让JS引擎在执行代码时可以进行更多的优化（不需要对一些特殊的语法进行处理）；严格

用一句话总结就是:with会扩展出一个语句的作用域链可是这样的解释对于大多数同学来说还是太过于生硬，很不好理解，那我们下面我们用代码例子证明一下但是我们强烈不建议使用with语句，因为它可能是混淆错误和兼容性问题的根源。但是我们还是要了解一下with的作用因为源码中有with语句，了解with语句，可以方便我们对代码的理解eval函数的作用：eval() 函数会将传入的字符串当做 JavaScript 代码进行执行，如果传入的字符串是表达式则返回表达式求值结果，否则返回 undefined 。同样我们还

柯里化也是属于函数式编程里面一个非常重要的概念。在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化；是把接收多个参数的函数，变成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数，而且返回结果的新函数的技术；柯里化声称 “如果你固定某些参数，你将得到接受余下参数的一个函数”；维基百科的解释非常的抽象，我们这里做一个总结：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数；这个过程就称之为柯里化；那么柯里化到底是怎么样的表现呢？我们用代码来实例一下

函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；在react开发中纯函数是被多次提及的； 比如react中组件就被要求像是一个纯函数（为什么是像，因为还有class组件），redux中有一个reducer的概念，也是要求必须是一个纯函数；所以掌握纯函数对于理解很多框架的设计是非常有帮助的；在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：当然上面的定义会过于的晦涩，所以我简单总结一下：我们来看一个对数组操作的两个函数：slice：s

在JavaScript中我们对函数的执行通常是直接用函数的名称加个括号就可以进行调用了，但是这样调用有一个缺点，就是函数中的this指向是默认绑定的，有时候this的指向不太符合我们的预期。至于JavaScript中this的指向可以看我这篇文章《在JavaScript中，this的指向详细讲解》那我们想要把函数的this指向变成我们预期想的那样有什么方法吗？这时候JavaScript中的函数apply、call、bind调用就起到作用了apply接受两个参数，第一个参数是this的指向，第二个参数是函数接

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue

在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。我们先来看一个最简单的props传递：在前面，我们的props选项是使用一个数组。我们说过，除了数组之外，我们也可以使用对象，当需要对props进行类型等验证时，就需要对象写法了。验证都支持哪些数据类型呢？StringNumberBooleanArrayObjectDateFunctio

JS的垃圾回收因为内存的大小是有限的，所以当内存不再需要的时候，我们需要对其进行释放，以便腾出更多的内存空间。在手动管理内存的语言中，我们需要通过一些方式自己来释放不再需要的内存，比如free函数： 但是这种管理的方式其实非常的低效，影响我们编写逻辑的代码的效率； 并且这种方式对开发者的要求也很高，并且一不小心就会产生内存泄露； 所以大部分现代的编程语言都是有自己的垃圾回收机制：垃圾回收的英文是Garbage Collection，简称GC； 对于那些不再使用的对象，我们都称之为是垃圾，它需要被回收，

我们在日常使用axios时都是直接使用axios.request(config)来发送请求和instance.interceptors.request.use()来进行响应拦截，但是如果后期axios这个项目不再维护了，或者我们要换成别的网络请求方式了。这样又怎么办呢？难道我们要一处一处的起修改我们的代码吗？重构我们的请求模块？这样不仅会给我们带来大量的工作量，而且代码的耦合度太高也会导致代码如果出现bug。但是如果我们把axios在进行封装，封装出一个axios类，然后只让实例依赖axios，我们

平时我们在JavaScript中编写函数都是 function 函数名（）{ 函数体 } 的编写方式来编写函数的，但是在ES6更新后函数有了一种更将简洁的编写方式，那就是箭头函数，但是箭头函数到底是怎么编写呢？箭头函数的编写规则有是什么呢？接下来就让我们详细讲解一下箭头函数的编写规则编写函数箭头函数有三大要素// 1> (): 参数// 2> =>: 箭头// 3> {}: 函数的执行体那我们就用这三大要素先编写第一个简单的箭头函数foo来和我们的普通函数进行对比一下箭头函数普通函数箭头

这里先来看一下闭包的定义，分成两个：在计算机科学中和在JavaScript中。在计算机科学中对闭包的定义（维基百科）：闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）。是在支持 头等函数 的编程语言中，实现词法绑定的一种技术；闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）； 闭包跟函数最大的区别在于，当捕捉闭包的时候，它的 自由变量 会在捕捉时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行；

网站开发中，如何实现图片的懒加载## 答案方法一、vue-router里面的路由懒加载方法二、位置计算用windo.scroll+DataSet.src API方法三、浏览器的loading属性，缺点目前兼容性不太好# 浏览器中如何实现剪切板复制内容的功能## 答案方法一、Clipboard-copy第三方库来实现...