qq_29055201的博客

发现一个好的国内免费服务器，阿贝云,花1元，终身使用，亲测有效哦有兴趣的小伙伴，或者刚刚接触服务器的小伙伴，可以去试试！

1. 概念跨站脚本攻击（Cross-site scripting, 通常简称为XSS）,是一种网站应用程序的安全漏洞攻击。2. 攻击类型XSS属于代码注入的一种，是通过在客户端写入javaScript, flash代码，盗取网站Cookie, 或者使网站无法正常浏览。3. 攻击手段利用XSS盗取Cookie, 再通过Cookie，伪装成用户，向服务端发送数据，进而盗取用户的信息。目的：恶作剧 <script> alert('this is a joke') </sc

{// sublime语法“sublimeTextKeymap.promptV3Features”: true,// Alt + Shift + 鼠标左键拖动就可以选择多行，请注释掉下面这行代码// “editor.multiCursorModifier”: “ctrlCmd”,// 控制是否将代码段与其他建议一起显示以及它们的排序方式“editor.snippetSuggestions”: “top”,// 工作区颜色主题“workbench.colorTheme”: “Monokai”,

前段时间，遇到一个功能，前段将填写的数据，按模板导出到word文件。现在，在这里记录一下自己的使用心得。这里主要用到了docxtemplater, pizzip, jszip-utils, file-saver四个插件。所以首先先安装对应插件：npm i docxtemplater pizzip jszip-utils file-saver -S安装后的版本是：在安装的同时，我们在public目录（vue-cli3.0构建的项目）放下我们要导出的模板文件。我这里是将其命名world-exp

博主在使用webpack做spa（单页面应用）的时候出现了404错误，原因很简单是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。于是我就看webpack的官网，在devServer里面有个historyApiFallback的属性，是用于如果找不到界面就返回默认首页，我一看这就是我要的东西，兴奋的设置上了。发现他不管用，原因是他默认的就是主目录的index.html，你自己设置的index没有用于是按官方的说法：historyApiFallback: {

JavaScript类型化数组使用JavaScript类型化数组可以方便地操作二进制数据，它分为两层，数据缓存和数据视图，数据缓存（ArrayBuffer）用于储存数据，但不负责数据读写，读写数据需要创建数据视图来实现 ，类型化数组就是数据视图的一种。数据缓存和数据视图的关系如下：let buffer = new ArrayBuffer(16)buffer.length // 16let int32View = new Int32Array(buffer)int32View.length //

这个问题很有意思，也在面试中经常被问，这里在知乎上看到一个作者，回答的很完整，在这里搬过来，也作为备注，以便后续查阅。让我们返璞归真，从原始的前端代码开发讲起，上图是一个“可爱”的index.html页面和它的样式文件a.css,用文件编辑器写代码，无需编译，本地预览，确认OK，丢到服务器，等待用户访问。前端就是这么简单，好好玩啊，门槛好低啊，分分钟学会有木有？然后我们访问页面，看到效果，再查看一下网络请求，200！不错，太完美了！那么，研发完成了吗？等等，这还没完呢！对于大公司来说，那些变态的

有一个开源库Fingerprint,就是用来处理这个事情的。这是它提供的一个demo

其实用一句话来概括很简单，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install 的时候的依赖能保证一致。

const obj = { a: 3, b: 4, c: null, d: undefined, get e() { return 'e' }}console.log(JSON.stringify(obj)) 答案："{"a": 3, "b": 4, "c": null}"对象中的null, function将在JSON.stringify时会忽略掉如果对上面的例子，再进行改造，看看会输出什么结果var obj = { a: 3, b: 3, c: nu

我们在项目中，总会遇到需要使用富文本的情况，而Tinymce就是一个很不错的富文本编辑器,如何将Tinymce整合到vue项目中呢？本文是利用vue-cli3.0结合Tinymce4.x版本作的整合1、安装tinymce, @tinymce/tinymce-vue组件npm install tinymce @tinymce/tinymce-vue -S安装成功后，在node_modules目录中，查找tinymce/skins目录，将skins目录拷贝到public目录下。为了结构清晰，在s

经常在面试中，会听到面试官问，你在工作中遇到了哪些问题，你是怎么解决的？这里总结一下经常在工作中遇到的一些问题Uncaught TypeError: Cannot read property ‘b’ of undefined该错误说明没有某个属性，一般是该属性前面的值是undefined或者是null的情况会出现。这个错误经常发生在后端返回的数据没有按文档的格式返回，这个时候，前端可以做一些异常处理如var a = res && res.a更好的方法，是使用lodash中的g

前端代码规范随着前端技术的发展，越来越多的人员加入到了这个领域，随之而来的就是，代码写法上的差异，代码维护难度的增加，所以推出前端代码规范，势在必行。HTML 部分优先使用 IE 最新版本和 Chrome Frame<!-- 优先使用 IE 最新版本和 Chrome Frame --><meta http-equiv="X-UA-Compatible" content=...

elementUI 的resetField是对整个表单进行重置，将甩有字段值重置为初始值并移除校验结果，当内容不一致，或者找不到内容时，就会报错，具体原因举例如下：原因： 当表单有v-if根据表单内部数据去控制是否显示时，会存在这个问题 <el-form ref="form" :model="form" :rules="addLabelValidator"> <el-f...

Vue移动端适配项目是采用vue-cli3.0开发，经本人研究实践，这里提供四种解决方案，亲测有效。一、lib-flexible + postcss-plugin-px2rem(推荐)安装px2rem-loader(将css中的px转换为rem)npm install px2rem-loader --save-dev移动端适配解决npm包 “lib-flexible”npm ...

利用vue从零实现一个消息通知组件平时，我们肯定用过类似element-ui,antd等一些UI框架，感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大，用起来，就会觉得特别别扭，这时候，就有必要自己来重新造轮子。重新造轮子，有几个好处，1.所有代码都是服务你的业务，没有太多用不上的东西。2.代码是由自己维护，而不是第三方，方便维护。3.提升自己的视野，让自己站在更高的角度来...

webpack从零构建一个vue的项目平时里，大家要构建一个vue项目或者react项目，大都是通过官方提供的脚手架来实现，这也确实为我们提供了便利，可这同时也为我们，带来了很多的困惑，为什么有那么多的配置文件，有那么多的项目依赖，它们之间有什么关系，是如何工作的？感觉用了webpack项目开发是变得简单了，但同时问题也变得多了，项目的构建变成了一个墨盒子，我们不知道盒子里的内容是如何工作的。这...

官方介绍React：React 是一个用于构建用户界面的 JavaScript 库。Vue： Vue是一个渐进式JavaScript 框架Hello WorldReactReactDOM.render(<h1>Hello, World</h1>,document.getElementById('root'))Vuenew Vue({ el:...

当时使用element-ui的日期控件，没有问题，后来，测试提出说，默认高亮的时间要用应用服务器的时间，摸索半天，想先将服务器时间取回来，最后发现没有用，后来就跟产品反馈了这个问题，就说暂时不处理了，因为代码他了异常处理，就想改不了，也就没有将代码还原，结果，这几天，测试这边反馈说，在IE11上用不了日期控件，找了半天，最后发现是用了async语法。模板部分：<el-date-pick...

平时在开发中，会经常使用到element-ui等类似的UI组件库，而在业务开发中，经常会调用一些组件，如table组件，于是就想，可不可以将其封装起来，方便自己调用呢，于是说干就干。封装的这个组件要有以下功能：首先想的是封装的这个组件要完全覆盖element-ui组件table原生的功能。不仅支持prop方式去渲染表格列，也支持render方式渲染。支持分页于是，为了实现自己的这个想...

在搭建一个前端工程，总有各种各样的类库去选择，如何选择一个合适的库，让自己的项目工程，更加健壮呢？

简介在vue中经常使用axios发起网络请求，与服务器进行数据交互。在使用过程中会有许多问题存在，比如由于网络不稳定导致请求超时/失败，通常有两种解决方案，一种是提示用户重新提交请求，另一种是进行相关提示并自动重新发送请求。第二种方式用户体验明显高于第一种方式。本文就针对第二种方式设计一个解决方案。拦截器基本所有的网络请求库都有拦截器接口，包括请求拦截器和响应拦截器。axios设置拦截器的接...

经过几年开发，自己也犯过各种大大小小的错误，现在把这些错误或者经验总结出来，避免以后再犯，同时也希望能帮助到其他也在前端开发路上的朋友们。1.输入框要限制长度任何输入框，只要需要将数据传给后台，都一定要限制其长度，必竟后台数据库字段都有长度限制，如果，不做长度限制，提交给后台，后台做了限制还好，如果没有做限制，sql则会报错。2.新增/修改数据成功后，要清空数据新增/修改数据成功后，记得...

经常在面试题中会看到，让你实现一个Promsie,或者问你实现Promise的原理，所以今天就尝试利用class类的形式来实现一个Promise为了不与原生的Promise命名冲突，这里就简单命名为MyPromise.class MyPromise { constructor(executor) { let _this = this this.state = 'pendin...

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove，keyup 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。防抖 （debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函...

故事背景这是在刚请完假回来，一切都在计划之中，早上一来，就接到项目经历的新的需求（这个是烂摊子，已经好几个人接手，离职），我内心是拒绝的，可最后办法，没有其他人去做，最后就落在了我头上。接到需求，先看了需求，跟以前的比起来，改动挺大，数据结构全改了，如果在原来的基础上改，成本有点大，所以，就想着重启项目来实现。于是就使用vue的最新脚手架工具vue-cli3.0来初始化项目，但突然，一个会议又...

ajax请求的get请求是通过URL传参的（以？和&符连接），而post大多是通过json传参的。qs是一个库。里面的stringify方法可以将一个json对象直接转为(以?和&符连接的形式)。在开发中，发送请求的入参大多是一个对象。在发送时，如果该请求为get请求，就需要对参数进行转化。使用该库，就可以自动转化，而不需要手动去拼接。axios默认的content-type是a...

最近在开发中遇到一个问题，就是由于对父子组件生命周期钩子函数执行顺序理解不透彻引起的。问题是这样的：有一个组件由一系列子组件组成，子组件又被分解成组件，这样下来构成了三级组件。需求是在组件显示在页面上之后，再将数据初始化进行回显。父组件获取数据后传递到子组件，要求子组件根据这个值将内部元数据进行过滤和加工。那么在子组件中什么时机下才能获取父组件传递过来的新值呢？我的做法是这样的：最高层父组件的m...

$attrs包含了父组件中不被认为（且不预期为）props的特性绑定(class和style除外)。当一个组件没有声明任何props时，这时会包含所有父组件的绑定(class和style除外)，并且可以通过v-bind="$attrs"传入内部组件-在创建更高层次的组件时非常有用。$listeners包含了父组件中的(不含.native修饰器)v-on事件监听器。它可以通过v-on="$li...

在vue-cli3.0中mock数据在vue-cli3.0中mock数据，可以通过vue.config.js中的devServer配置项来mock数据。devServer: { before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, ...

1.什么是前端模块化模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便地使用别人的代码，要用什么功能就加载什么模块。2.模块化开发的好处1）避免变量污染，命名冲突2）提高代码利用率3）提高维护性4）依赖关系的管理3.前端模块化的进程前端模块化规范从原始野蛮阶段现在慢慢进入“文艺复兴”时代，实现的过程如下：3.1 函数封装我们在讲到函数逻辑的时候提到过，函数...

数据类型分为两种基础类型和引用类型：1.基础类型：如Number, String, Boolean，undefined, null2.引用类型：Object，Array, Function浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝（例：assign()）深拷贝是将对象及值复制过来，两个对象修改其中任意的值另一个值不会...

js中到处是对象，对象之间往往会通过__proto__连接在一起，这种链接的现象被称为原型链。极少数的对象会滑原型，比如:Object.create(null)生生的对象里面没有任何属性，非常“空”，我们称它为字典，这种字典对象适合存放数据，不必担心原型带来的副作用。对象生的有三种方式，一种是上面的Object.create(),一中是字面量（var a = {}）,另外一种是通过构造函数（v...

在chrome控制台打印可以找到答案：__proto____proto__.__proto____proto__.constructor.__proto____proto__.constructor.__proto__.__proto____proto__.constructor.__proto__.__proto__.__proto__...

function A() {}A.__proto__ === A.constructor.prototype // true上面代码，构造函数A也是对象，我们知道，任何对象都有一个constructor属性，指向它的构造函数，即A的构造函数为A.constructor而构造函数中又有一个属性prototype指向实例的原型，即A.constructor.prototype...

实现一个bind函数var fn = function(a, b, c, d) { return a + b + c + d}fn.bind(scope, a, b)(c, d)Function.prototype.bind = function(scope) { let newFn = this let args = Array.prototype.slice.call(argum...

箭头函数没有自己的this，所以不能通过bind动态地去修改thisvar a = {say: function() { var fn = (() => { console.log(this) }).bind(window) fn()}}a.say() // {say: f}

1.当数据发生变化时，vue是怎么更新节点的？要知道渲染真实的DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能免帮助我们。我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode,然后Vn...

Virtual DOM这个概念相信大部分人都不会陌生，它产生的前提是浏览器中的DOM是昂贵的，为了更直观的感受，我们可以简单地把一个div元素的属性都打印出来，可以看到真正的DOM元素是非常庞大的，因为浏览器的标准就把DOM设计得非常复杂。当我们频繁地去做DOM更新，会产生一定的性能问题。而Virtual DOM就是用一个原生的JS对象去描述一个DOM节点，所以它比创建一个DOM的代价要小得多。...

什么是双向数据绑定？vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也是算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单向的，这时就会和双向数据绑定有冲突，我们可以这...

JS的执行机制是一个主线程和一个任务队列(Eventqueue)，所有的同步任务都是在主线程上直接执行的。异步任务都被放在任务队列中。（这里盗了一个图）这时程序的执行还没有真正的进入事件循环。接下来异步任务的执行，就涉及到了宏任务和微任务。所有的任务在主线程执行，会形成一个执行栈，执行栈会区分出宏任务和微任务，并把任务放在各自的任务队列中。宏任务一般包括整体SCRIPT代码块，seiTim...

右移运算符（>>）表示将一个数的二进制值向右移动指定的位数，头部补0，即除以2的指定次方（最高位即符号位不参与移动）。4 >> 1// 2/*// 因为4的二进制形式为 00000000000000000000000000000100，// 右移一位得到 00000000000000000000000000000010，// 即为十进制的2*/-4 >...

左移运算符（<<）表示将一个数的二进制值向左移动指定的位数，尾部补0，即乘以2的指定次方（最高位即符号位不参与移动）。// 4 的二进制形式为100，// 左移一位为1000（即十进制的8）// 相当于乘以2的1次方4 << 1// 8-4 << 1// -8上面代码中，-4左移一位得到-8，是因为-4的二进制形式是1111111111111...

异或运算（^）在两个二进制位不同时返回1，相同时返回0。0 ^ 3 // 3上面表达式中，0（二进制00）与3（二进制11）进行异或运算，它们每一个二进制位都不同，所以得到11（即3）。“异或运算”有一个特殊运用，连续对两个数a和b进行三次异或运算，a^=b; b^=a; a^=b;，可以互换它们的值。这意味着，使用“异或运算”可以在不引入临时变量的前提下，互换两个变量的值。var a ...

二进制否运算符~将每个二进制位都变为相反的值(0变为1， 1变为0)。它的返回结果有时比较难理解，因为涉及到计算机内部的数值表示机制。~ 3 // -4上面表达式对3进行二进制否运算，得到-4。之所以会有这样的结果，是因为位运算时，JavaScript内部将有的操作数都转为32位二进制整数再进行运算。3的32位整数形式是00000000000000000000000000000011，二进...

比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。javaScript一共提供了8个比较运算符。< 小于运算符大于运算符<= 小于或等于运算符= 大于或等于运算符== 相等运算符=== 严格相等运算符!= 不相等运算符!== 严格不相等运算符这八个比较运算符分成两类：相等比较与非相等比较。1.非相等比较对于非相等比较，算法是先看两个...

常见写法如下：function isOdd(n) { return n % 2 === 1}但是这种写法不太严谨，如果n为负数，时判断就会出问题。是因为余数运算符（%）运算结果的正负号由第一个操作数的正负号决定。所以，更好的写法应该如下：function isOdd(n) { return Math.abs(n % 2) === 1;}...

减法，乘法，除法在运算过程中，都是先将操作数，转成数值，再进行后续操作，而加法，却有所不一样。1）两个数值相加当两个数值相加时，加法运算符，跟减法操作符一样，直接求和。var a = 1var b = 2a + b // 32）字符串相加当两个字符串相加时，加法运算符，这表现为字符串拼接。var a = '1'var b = '2'a + b // '12'注意：只有...

with语句语法with(对象) { 语句}它的作用是，操作同一个对象的多个属性时，提供一些书写的方便.var person = { name: '张三', age: 25} with(person) { console.log(name) console.log(age)}注意，如果with内部有变量的赋值操作，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局...

1.1 in运算符in运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值）， 如果包含就返回true,否则返回falsevar obj = { p: 1 }'p' in obj // true'toString' in obj // true上面代码中，obj对象上有一个p属性，所以使用in运算符时，得到true,但toString并没有在obj对象上，为什么也返回tru...

如果键名是数值 ，会被自动转化为字符串。如果不是十进制数，先转成十进制数，再转成字符串。var obj = { 1: 'a', 3.2: 'b', 1e2: 'c', 1e-2: 'd', .123: 'e', 0xff: 'f'}如果键名不符合标识符的条件（比如第一个字符为数字，或者含有空格或者运算符），且也不是数字，则必须加上引号，否则会报错。// 报错var obj ...

利用Number方法实现一个isNaN方法function myIsNaN(param) { var param = Number(param) return param !== param}

我们都知道，parseInt与parseFloat都是用来将字符串转换成数字，parseInt将字符串转成整数，parseFloat将字符串转成浮点数，但是它们在处理十六进制数时有细微的差别，话不多说，上粟子parseInt('0x11') // 17parseFloat('0x11') // 0上面代码中，parseInt在处理十六进制的字符串时，会直接按十六进制处理，而parseFlo...

parseInt(string, radio)内部转化机制1.首先看传入的第一个参数是否是字符串，如果是，继续后续步骤2.如果不是,如果不是数值，直接调用String()方法，将其转化为字符串3.如果是数值，如果是十六进制，parseInt会将其按照十六进制ovt解析，如果是二进制，或者八进制，先将其转成十进制数，再调用String()方法，转成字符串4.第二个参数控制参数传入的进制，...

JavaScript内部，所有数字都是以64位浮点数形式储存，即使整数也是如此，所以，1和1.0是相同的，是同一个数。1 === 1.0 // true 也就是说，JavaScript语言的底层根本没有整数，所有数字都是小数(64位浮点数)。...

思路：二进制的整数部分，可以使用parseInt(string, 2)得到。二进制小数部分，将是将小数点后的每位二进制数都转换成十进制数，然后将各个位的十进制数加起来，就是完整的小数部分的十进制数了比如：1111011.111的小数部分为：111转换过程为：代码实现为：/*** 将二进制小数部分转换为十进制数* @param binaryFloatPartArr 二进制小数部分中...

十进制小数转换成二进制小数采用"乘2取整，顺序排列"法。具体做法如下：用2乘十进制小数，可以得出积，将积的整数部分取出，再用2乘余下的小数部分，又得到一个积，再将积的整数部分取出，如此进行，直到积中的小数部分为零，或者达到所要求的精度为止。然后把取出的整数部分按顺序排列起来。先取的整数作为二进制小数的高位有效位，后取的整数作为低位有效位。例如：...

如果函数中出现了同名参数，则取最后出现的那个值function f(a, a) { console.log(a);}f(1, 2) // 2上面代码中，函数f有两个参数，且参数名都为a，取值 的时候，以后面的a为准，即使后面的a没有值，或者被省略，也是以其为准。function f(a, a) { console.log(a);}f(1) // undefined调...

函数参数如果是原始类型值，传递方式是值传递。这意味着，在函数体内修改参数值，不会影响函数外部。var p = 2 function f(p) { p = 3}f(p)p // 2上面代码中，变量p是一个原始类型的值，传入函数f的方式是值传递，因此在函数内部，p的值是原始值的拷贝，无论怎么修改，都不会影响到原始值。但是，如果函数参数是复合类型，传入函数的方式是引用的传递，也就是说，...

函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在作用域无关。var a = 1var x = function() { console.log(a)}function f() { var a = 2 x()}f()上面代码中，函数x是在函数f的外部声明的，所以它的作用域绑定外层，内部变量a不会到函数f体内取值，所以输出1...

函数的length属性返回函数预期传入的参数个数，即函数定义之中的参数个数。function f(a, b) { return a + b}f.length // 2上面代码中，函数f的length属性就是定义时的参数个数，不管调用时传入多少个参数，length属性始终等于2.如果函数的参数有默认值，则计算length属性时，将不计算有默认值的参数function f(a, b = 2...

函数的name属性返回函数的名字。function fn() {}fn.name // 'fn'如果是通过变量赋值定义的函数，那么name属性返回变量名。var f = function() {}f.name // 'f'但是，上面这种情况，只有在变量的值是一个匿名函数时才是如此，如果变量的值是一个具名函数，那么name属性返回的function关键字之后的那个函数名。var ...

function cssStyle2DomStyle(sName) { return sName.replace(/(?!^)\-(\w)(\w+)/g, function(a, b, c){ console.log(a, b, c) return b.toUpperCase() + c.toLowerCase(); }).repla...

function rgb2hex(sRGB) { var hex = function(n){ return n < 16 ? '0' + (+n).toString(16) : (+n).toString(16);} return sRGB.replace(/^rgb\((\d+)\,\s*(\d+)\,\s*(\d+)\)$/g, function(a, r, g...

邮箱的正则表达式：/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/

function formatDate(date, format){ date = new Date(date) || new Date() var add0 = function(num){ return num < 10 ? '0' + num : num } var o = { 'yyyy': date.getF...

Error实例对象是最一般的错误类型，在它的基础上，JavaScript还定义了其他6种错误对象，也就是，存在的6个派生对象。1.1 SyntaxError对象SyntaxError对象是解析代码时发生的语法错误。上面代码的错误，都是在语法解析阶段就可以发现，所以会抛出SyntaxError。第一个错误提示是"token非法"，第二个错误提示1.2 ReferenceError对象Re...

如果数组的某个位置是空位，使用in运算符返回falsevar arr = []arr[100] = 'a'100 in arr // true1 in arr // false

function format (num) { num = num + '' var reg = /[1-9]\d{0,2}(?=(\d{3})+$)/g return num.replace(reg, '$&,')}解释：正则表达式[1-9]\d{0-2}(?=(\d{3})+&) 表示前面有1-3个数字，后面至少由一组3个数字结尾?=表示正向引用，可以作为匹配的...

replace()方法的第二个参数可以是一个文本，也可以是一个函数，在只有一个匹配项（即与模式匹配的字符串）的情况下，会向这个函数传递3个参数：模式的匹配项，模式匹配项在字符串中的位置和原始字符串。在正则表达式中定义了多个捕获组的情况下，传递给函数的参数依次模式的匹配项，第一个捕获组的匹配项，第二个捕获组的匹配项…，但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串。var url...

在正则表达式中，利用()进行分组，使用斜杠加数字表示引用，\1就是引用第一个分组，\2就是引用第二个分组。将[a-zA-Z]做成一个分组，然后引用，就可判断是否有连续重复的字母。function containsRepeatingLetter(str) { return /([a-zA-Z])\1/.test(str); }...

利用parseInt将二进制数转成十进制数function base10(str) { return parseInt(str, 2)}

利用toString可以实现将一个十进制数转成二进制数function value2Bit(num) { return +num.toString(2)}

1）TCP是面向连接的，UDP是无连接的即发送数据不需要先建立连接。2）TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP尽最大努力交付，即不保证可靠交付。并且因为TCP可靠，不会丢失数据，因此适合大数据量的交互。3）TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）...

1.基本概念http: 超文本传输协议，是互联网上应用最广泛的一种网络协议，是一个客户端和服务端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。https: 是以安全为目标的http通道，简单讲是http的安全版，即http下加入SSL层，https的安全基础是SSL，因此加密的详细内容就需要SSL。https协议的主要...

详情见：https://blog.csdn.net/qq_40668835/article/details/85557327

高阶函数：高阶函数是指函数可以作为另一个函数的参数或者返回值。高阶组件：是接收一个组件作为参数，并返回一个新组件的函数。高阶组件是一个函数。...

react中的context是一个全局共享的一个属性

在react中使用form可以使用受控组件，也可以使用非受控组件。受控组件是指input框中的value被state中的值控制，要想输入，需要通过onChange事件来处理。非受控组件，是利用ref来实现。ref接收一个回调函数。<input type="text" ref={textInput => this.textInput = textInput} />...

react的生命周期主要分为：初始化，更新，卸载初始化： componentDidMount是指组件被插入到DOM中时，触发更新：componentDidUpdate是指传入新的props,或者调用setState()或者调用forceUpdate()时触发，componentDidUpdate(currentProps, currentState)接收两个两个参数.currentProp...

react中的state是组件内部的数据，只能在组件内部使用，且是不可修改的，如果要修改state中的数据，要通过setState方法来修改。

react之props（属性），是纯函数的写法，不允许修改，props表示函数的输入。函数的输出是一个reactElement用一个函数表示：V = f(props)

jsx是javascript的语法扩展，jsx本质上是一种语法糖jsx其实替代的是React.createElement()方法，而返回值是一个reactElementReact.createElement()接收三个参数：第一个参数表示外层的标签。第二个参数表示标签上的属性。第三个参数表示标签内部的内容。里面的内容也可以是一个React.createElement()...

在React中如果外层容器没有什么意义，或者想减少dom层级，可以使用Fragment来代替外层容器render () { return ( <Fragment> <section> <input type="text" value={this.state.value} onChange={() => t...

react父组件向子组件传值是通过属性实现import React from 'react'import TodoItem from './TodoItem'class TodoList extends React.Component { constructor(props) { super(props) this.state = { list: [ ...

在React中，通过“有变化，就一定返回一个新对象；没变化，原对象不做变化直接返回”的原则，永远可以通过判断“新旧变量是否对同一内存内容的引用”来侦测变化，效率上比deepwatch高得多...

要想正确地获得react事件绑定程序中的this，有以下几种方法：方法一：import React from 'react'class TodoList extends React.Component { constructor(props) { super(props) this.handleButtonClick = this.handleButtonClick.b...

概述前端工程本质上是软件工程的一种。软件工程化关注的是性能、稳定性、可用性、可维护性等方面，注重基本的开发效率、运行效率的同时，思考维护效率。一切以这些为目标的工作都是"前端工程化"。工程化是一种思想而不是某种技术。举例说明：要盖一栋大楼，假如我们不进行工程化的考量那就是一上来掂起瓦刀、砖块就开干，直到把大楼垒起来，这样做往往意味着中间会出现错误，要推倒重来或是盖好以后结构有问题但又不知道出现...

1、解析webpack配置参数，合并从shell传入和webpack.config.js文件里的配置参数，生成最后的配置结果 。2、注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。3、从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。4、在解析文件递归的过程中根据文件类型和loader配置找出合适的loader...

module.exports = { // 部署应用时的基本 URL baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为 outputDir: ...

1、 link标签的href属性2、 script标签的src属性3、 img标签的src属性4、 ajax发送请求5、 表单提交发送请求6、 a标签的href发送请求7、 iframe的src属性发送请求...

粘性定位stickyposition: sticky是CSS3新增的一处属性，可以说是相对定位relative与固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，某个元素距离父元素的距离达到sticky粘性定位的要求时(比如：top: 40px;)position: sticky这时的效果相当于fixed定位，固定到适当的位置（比如：固定在距离屏幕上方40p...

第一次第一次握手：建立连接时，客户端发送syn包(syn=j)到服务器，并进入SYN_SENT状态，等待服务器确认；SYN同步序列号第二次第二次握手： 服务器收到syn包，确认客户端的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包，此时服务器进入SYN_RECV状态第三次第三次握手：客户端收到服务器的SYN+ACK包，服服务器发...

什么是同源策略两个页面地址中的协议，域名，端口号一致，则表示同源为什么浏览器要使用同源策略设置同源策略的主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。...

const Cookie = { set (name, value, expires, domain, path, secure) { let cookieText = '' cookieText += `${encodeURIComponent(name)}=${encodeURIComponent(value)}` if (expires instanceof Da...

cookie数据存放在客户端，session数据存放在服务器。cookie不是很安全，别人可以分析存在本地的cookie并进行cookie欺骗，考虑安全，应当使用sessionsession会在一定时间内保存在服务上，当访问增多，会比较占用服务器的性能，考虑到减轻服务器性能方面，应当使用cookie单个cookie保存数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie...

一、事件流（捕获，冒泡）事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。当页面发生某种事件（如：点击，缩放等等）时，子元素和父元素都会接收到事件，可具体顺序是怎么样的呢？DOM2级事件规定事件流包括三个阶段，如图：假如我们点击一个div,实际上先点击document，然后点击事件传递到div，而且并不会在这个div就停下，div有子元素就还会向下传递，最后又会冒泡传递回documen...

使用工具：husky。一个git钩子工具，这里主要用pre-commit钩子。通俗点讲就是husky可以在你commit之前帮你做一些事情。prettier。 一个很流行的代码格式化工具，你很容易在编辑器找到实现它的各种插件，像vscode,atom,webstom都可以找到。这里用它在代码提交前做代码格式化。eslint。 代码检查工具。eslint也可以负责一部分代码格式检查的工作，但是...

地址： https://unbug.github.io/codelf/

直接上代码：var http = require('http')var url = require('url')var util = require('util')http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/plain;charset=utf-8'}) var ...