let与var区别大总结
1. 函数作用域与块级作用域在ES6出现之前，JavaScript是没有块级作用域的概念的。ES6的横空出世带来了let和const代替之前的var声明变量和常量，由此也带来了块级作用域的概念。
我们来看代码：
12345{ var a = 23 console.log(a);}console.log(a);
上述输出两个23；
再来看let和const声明形式：
12345678{ let a = 23; const NUM = 6; console.log(a); console.log(NUM); } console.log(a); console.log(NUM);
上述输出如下：
很明显，在大括号外输出变量a和常量NUM是直接报错，没有定义！这已经充分说明let和const声明的变量具有块级作用域。
2. 关于变量提升我们知道由var声明的变量和function声明的函数会提升到当前作用域的最前边，而ES6出现的let和const声明的变量是不会进行提升的，请看代码：
12cons ...
性能优化之HTML5离线存储(应用程序缓存)
前言HTML5 提供一种 应用程序缓存 机制，使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器应该缓存的资源并使得离线用户可用。 在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。
简介Application Cache使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：
1. 离线浏览 - 用户可在应用离线时使用它们
2. 速度 - 已缓存资源加载得更快
3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景；传统还有离线存储技术Cookie。经过实践我们认为localstorage应该存储一些非关键性ajax数据，做锦上添花的事情；Application Cache用于存储静态 ...
JavaScript正则表达式精华总结
写在前面正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”）。
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。
正则表达式是繁琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。只要认真阅读本文，加上应用的时候进行一定的参考，掌握正则表达式不是问题。
创建正则表达式的两种方式1. 字面量方式1let reg = /\d/g
如上代码所示，即是字面量方式创建正则表达式。
2. 构造函数方式1let reg = new RegExp('\d', 'g')
RegExp 为创建正则表达式的构造函数，有两个参数，第二个参数不是必传的。第一个参数是一个字符串，指定了正则表达式的模式或其他正则表达式，第二个参数是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果第一个参数是正则表达式，而不是字符串，则必须省略该参 ...
JavaScript手写new操作符
前言想要实现new操作符，首先得知道new操作符干了哪些事情：
第一步第一、new操作符会创建一个对象并返回，且此对象的__proto__等于此函数的原型prototype（这里需要注意__proto__和prototype的区别和联系，原型prototype是函数才有的，务必记住，而__proto__可以理解为对象的某个属性，此属性指向对象的构造函数的prototype，是不是很绕。举个例子）；比如，new函数A创建了对象a，则a.__proto__ = A.prototype，代码如下：
1234567function A(age) { this.age = age}const a = new A(18)console.log(a.__proto__ === A.prototype)// true
第二步第二、函数体中的this指向new操作符所创建的对象；
第三步第三、如果此函数的返回值为对象，则函数的返回值则为函数体中所写的返回值，否则new操作符则创建一个对象并返回；弄清楚了这三件事，下面就可以入手开始实现自己的new了：
12345function m ...
vue插槽slot踩坑--父组件通信
当我们在封装vue组件时，难免会用到插槽slot来进行子组件的嵌套，那么，当slot插槽处的内容组件需要和父组件进行通信时，怎么办呢？场景代码如下：
12345678910111213141516171819202122232425262728// parent.vue<template> <div> <slot></slot> </div></template><script> export default { methods: { }, }</script> // child.vue<template> <div> <input @input="onInput"> </div></template><script> export def ...
为什么 TCP 建立连接需要三次握手?
因为这是为了防止出现失效的连接请求报文段被服务端接收的情况，从而产生错误。
可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求，然后接收数据后释放了连接。
假设这时候连接请求 A 在两端关闭后终于抵达了服务端，那么此时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。但是客户端其实是 CLOSED 的状态，那么就会导致服务端一直等待，造成资源的浪费。
PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN Flood 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。
webpack系列之webpack性能优化
写在前面在此文中，我不会浪费篇幅给大家讲如何写配置文件。如果你想学习这方面的内容，那么完全可以去官网学习。在这部分的内容中，我们会聚焦于以下两个知识点，并且每一个知识点都属于高频考点：
有哪些方式可以减少 Webpack 的打包时间；
有哪些方式可以让 Webpack 打出来的包更小；
减少 Webpack 打包时间优化loader对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。
首先我们可以优化 Loader 的文件搜索范围
12345678910111213module.exports = { module: { rules: [{ // js 文件才使用 babel test: /\.js$/, loader: 'babel-loader', // 只在 src 文件夹下查找 include: ...
JavaScript函数传参---按值传递
所有函数的参数都是按值传递的,也就是说把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。所以如果能理解变量的复制，那么参数的传递也就很简单了。
12345678910let obj = { name: 'Tom', age: 15}function test(arr) { arr.name = 'Toney'}test(obj)console.log(obj) // {name: "Toney", age: 15}
总所周知，在JavaScript中，引用数据类型存储在堆中，传递时传递的实际上是指向此地址的一个指针，如上例，obj作为参数被传递到了函数内部，实际上相当于复制了一个指针，而指针指向的地址还是此对象所对应的地址，所以改变了函数的参数属性，实际上相当于操作obj的属性改变。
12345678910let obj = { name: 'Tom', age: 15}function ...
react项目配置react-hot-loader实现模块热更新
前言今天我们来聊一聊react的模块热更新，熟悉react的同学都知道，使用官方的脚手架，当我们改动页面时，整个页面会被刷新，那我们当然希望页面只刷新我们改动的部分而不是刷新整个页面，那么怎么做到如此呢？千呼万唤始出来，react-hot-loader就是来完成这个伟大的使命的。
1. 安装react-hot-loader1npm i react-hot-loader --save
2. 在开发环境下添加入口12345678910111213141516171819202122// webpack.config.jsentry: [ isEnvDevelopment && 'react-hot-loader/patch', // Include an alternative client for WebpackDevServer. A client's job is to // connect to WebpackDevServer by a socket and get notified about cha ...
webpack系列《一》核心概念（入门篇）
1. 什么是webpack作为前端开发者，webpack可谓是家喻户晓的构建工具！那么，我们先来看看英文官方对于webpack的定义和说明：
webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webPack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其 ...
