Wu hao's blog

前端调用后端接口，下载生成的 excel 文件。前端通过调用后端接口，接收到后端返回的文件流。动态创建触发 a 标签点击事件，实现下载的功能。/** * 导出 excel 报表接口 * @param {Object} params * @param {Object} data */export const exportPreSalePermitExcel = (params, data) => axios({ url: 'xxx', method: 'post',

前言：随着前后端分离项目开发模式日渐成熟，前端和后端的职能逐渐趋于明确 。前端着重于数据渲染，页面动态性，页面性能优化等工作 。前端核心基础三大件 html，css，js 。基于此之上还有很多框架，类库，组件库等 。其中核心的渲染逻辑由 javascript去实现完成，它是前端基础中的核心 ，这里对日常项目开发中，使用 JS 开发规范做一个总结 。命名规则 避免单字母命名，命名应具备描述性 。 // badfunction q() {}// goodfunction quer...

使用原生 JS实现树形表格 ？请求本地 JSON文件获取数据 。问题：cors，跨域问题 。 解决：使用 jsonp方式，请求相关数据 。 注意：在 json文件中，json 数据使用 callback( json数据 ) 包裹，才能保持浏览器控制台打印出数据无报错。我这里回调函数是 getData( json数据 )。 代码： <script type="text/javascript"> /* getData 函数: JSONP 的函调函数，解决跨域问题。请...

前言：你能说出搜索引擎工作原理是怎样的吗 ?在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，每个关键词又对应着很多的网址，这些网址被称为搜索引擎蜘蛛 / 网络爬虫。一个关键词对应多个网址，因此就出现了排序的问题，相应的与关键词最稳合的网址会排在最前面。在蜘蛛抓取网页提取关键字的过程中，存在一个问题。如果网站是 flash 和 js 等，它看不懂。相应的如果网站内容可以被搜索引擎识别，搜索引擎就会提高该网站的权重，增加对该网站的友好度，这样一个过程称之为 SEO。..

前言 :在页面中，JS 和 HTML 之间的各种交互，是通过一系列的事件去实现的。那么我们就必须要去掌握 JS 中的事件，事件流，事件冒泡，事件捕获，事件委托等知识。事件 ？事件：是文档或浏览器窗口中发生的一些特定的交互问题。事件流 ？事件流：描述的是页面中接受事件的顺序，它分为两种，事件冒泡和事件捕获，现在主流为事件冒泡。IE9，chrome，Firefox，Opera，Safari 均实现了 DOM2 级规范中定义的标准 DOM 事件，而 IE8 和 IE8 以下版本仍然保..

Promise 对象的定义ES6 原生提供 Promise 对象。所谓 Promise 对象，就是代表了某个将要发生的事件（通常是一个异步操作）。 它的好处在于，有了 Promise 对象，就可以将异步操作以同步操作的流程表示出来，避免了层层嵌套的回调函数。 ES6 的 Promise 对象是一个构造函数，用来生成 Promise 实例。var promise = new Promise(function(resolve, reject){ if(/* 异步操作成功 */){

ES6—— Set :什么是 Set ?ES6 提供了新的数据结构 Set，类似于数组，只不过其成员值是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 结构，通过 new Set()。 Set 函数接受一个数组作为参数，用来初始化。【注意】：向 Set 加入值的时候，不会发生类型转换，这意味着，在 Set 中，5 和 '5' 是不同的两个值。Set 有哪些属性 ？Set,prototype.constructor：构造函数，默认为 Set 函数。 ...

前言 :面向对象是一种编程的思想，编程语言有面向过程的 C语言，有面向对象的 C++ ，Java 等语言。面向对象主要的特性在于，封装性，继承性，多态性。这里我们来讨论在 JS 面向对象中怎么样去实现多态的。因为在 JS 中名称函数不允许重复，否则会发生覆盖 。所以 JS 中实现多态，通常有参数不同和类型不同。了解 arguments ？在 ES5 的时候，JS 函数内部存在一个 arguments 对象。可以通过 arguments.length 获取到实参个数，argument...

前言 :在学习 JS 面向对象的相关知识的时候，对于它怎样去实现的继承 ？与其他语言相比不同之处又在哪里 ？有哪些需要注重的点 ？它的底层的实现原理又是怎样的 ？这些问题我们会有疑问，在这里总结一下我自己对于它的理解。字面量层面实现继承 ？完全赋值，实现继承 (对象字面量形式)，存在的问题，如果是浅拷贝的话，父类中，要实现深拷贝，才能达到目的。（采取递归的方式）。var person = { // person 对象，父类 name: 'wuhao', age: 23, a..

JS 中对象的种类 ？JS 内置的对象（如 Number 等）。 宿主环境对象（如 window，document 等）。 自己创建的对象 。在 JS 中怎么创建对象 ？字面量形式创建对象（属性，方法，get，set 型属性）。成员访问：两种访问方式（. []）。访问对象中没有的属性时，会返回 undefined。级联访问（对象里面嵌套对象）。/* 字面量创建对象 */var student = { // 属性 'name': 'wuhao', 'age': 22

前言 ：JS 解析与执行过程，习惯分为全局和函数两种不同状态，是为了方便理解，二者之间的一些不同点。这并不说明全局和函数的预处理，执行阶段是分开存在间隔性的。在之前我们了解过全局的预处理过程和执行过程。这里我们在来探讨下在函数中它的预处理和执行阶段都有哪些特性。函数预处理阶段 ？先让我们来思考一个问题，在函数预处理阶段的时候，JS 解析器会做什么事情 ？产生一个 LexicalEnvironment (JS 词法环境对象) 。 函数的参数加入 LexicalEnvironm...

前言 :了解 JS 解析与执行过程，可以帮助我们更好的掌握 JS 这门语言特性，而不是仅仅停留在使用阶段。JS 解析与执行过程大概可以分为两种情况，全局状态下和函数内部状态下。每种情况下又分为预处理阶段和执行阶段。（既：全局预处理阶段，全局执行阶段，函数预处理阶段，函数执行阶段。）全局预处理阶段 ？首先让我们来思考一个问题，在全局预处理阶段的时候，JS 会做一些什么事情呢 ？全局生成一个 LexicalEnviroment (JS 词法环境对象 ) 。 将用 var 声明的变量 和..

前言 ：在说栈之前先来说一下我们比较熟悉的数组，JS 中已经对数组做了很好的封装，可以通过一些 API 方法实现指定位置插入，指定元素删除，还实现了自动扩容的功能等。在其他的语言中，如 JAVA。数组作为底层数据结构，存在无法自动扩容等问题，在 ArrayList 等中，会使用新建更大的数组去替换原数组的方式去实现。总而言之，从数据结构来说，数组的插入和删除操作很耗性能，比较复杂的，因为要考虑到其他元素下标值得改变。但是数组又有它自己独特得优势，可以通过下标查找指定元素（高效）。后续链表得出现，弥补.

前言 ：首先可以自己思考几个问题，为什么 JS 语言当初会设计成单线程的，而不是像 Java 那样设计成多线程呢 ？什么是时间循环(event loop)，它所用来解决什么问题的 ？所谓的 event loop 是由哪几部分构成的，它是怎样运作的 ？如果你思考完，自己说不出缘由，有疑问不清楚的地方的话，就可以花时间去了解下面的内容了。问题开始 ：第一个问题 ，为什么 JS 被设计为单线程的 ？JS 被设计为单线程，原因是，它作为浏览器脚本语言，JavaScript的主要用途是与用户互动.

引言 ：最近，在接触的项目中用到了国际化的开发模式，因为是首次接触，这里写博客记录下，也方便以后查阅。自己对于它的理解是，用多种语言实现的多个版本的 web 页面。比较一般比较官方的网站或者文档，都会提供中文和英文版，可以让读者自己选择阅读模式。这种用不同语言实现相同页面的 web 开发方式，就可以理解为国际化的开发。使用 SpringMVC4.2.4 版本，在 JSP 页面中使用 <spring:message> 标签只能显示默认语言，无法动态切换，而在JAVA后台则可以动态切换..

什么是展开运算符 （...）？展开运算符 ：允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）等地方可以使 用，作用就是展开数组或字符串为一个新数组。 注意 ：展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。iterables 的实现是依靠 [Symbol.iterator] 函数，而目前只有 Array,Set,String 内置 [Symbol.iterator] 方法，而 Obje..

​​​​​字符转换，type: 1:首字母大写 2：首字母小写 3：大小写转换 4：全部大写 5：全部小写 ?const changeCase = (str, type) => { type = type || 4 switch (type) { case 1: return str.replace(/\b\w+\b/g, function (word) { return word.substring(0, 1

对于 JSON.stringify() 方法，你了解多少 ？有什么作用 ？JSON.stringify() 方法能将一个 JavaScript 对象或值转成一个 JSON 字符串。常用场景 ？const user = { "name":"wuhao", "age":23}console.log(user);//[object object]console.log(JSON.stringify(user));//"{"name":"wuhao","age":23}...

这篇文章是对于 Cookie，Session，Token，JWT 区别的一个总结：前置知识 ：什么是 认证 ，授权，凭证？认证 ： 验证当前用户身份。互联网中的认证 ：用户名密码登录；邮箱发送登录链接；手机号接收验证码等。授权 ：用户授权第三方应用访问该用户某些资源的权限。实现授权的方式有 ：cookie，session，token，OAuth。凭证 :实现认证和授权的前提是需要一种媒介（证书）来标记访问者的身份。一般网站中，当用户登录成功后，服务器会给该用户使用的浏...

前置知识 ：单线程模型 ？JavaScript一门单线程语言（执行引擎在同一时间只做一件事）。单线程是指 JavaScript 的主线程只有一个。除了这个主线程，JavaScript 还有一个 I/O 线程，通过事件循环来处理 I/O 问题，但两者之间相对独立，不需要进行状态同步，因此我们仍然可以把 JavaScript 看成一门单线程语言。任务队列 ？任务队列，就是用于存储等待执行的任务的队列。由于 JavaScript 是一门单线程语言，如果当前有一个任务需要执行，但 JavaSc..

原型链继承 ：核心：将父类的实例作为子类的原型。//构造函数function Person(name) { this.name = name || 'Person'; this.sleep = function() { console.log(this.name + '正在睡觉！'); };}//原型上面的方法：Person.prototype.eat = function(food) { console.log(this.name + '正在吃:' + food);...

toString 和 valueOf 方法 ：所有 JS 数据类型都拥有这两个方法，null 和 undefined 除外。它们俩解决 javascript 值运算与显示的问题。如果只重写了 toString，对象转换时会无视 valueOf 的存在来进行转换。但是，如果只重写了 valueOf 方法，在要转换为字符串的时候会优先考虑 valueOf 方法。在不能调用 toString 的情况下，只能让 valueOf 上阵了。对于那个奇怪的字符串拼接问题，可能是出于操作符上，翻开 ECMA26

原型和原型链是 js 中的难点也是重点，明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效，并且原型和原型链会是面试中必不可少的话题。这篇文章，对于 JS 中的原型和原型链做一个概述 ：构造函数的缺点 ?JavaScript 通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部。通过构造函数为实例对象定义属性，虽然很方便，但是有一个缺点。同一个构造函数的多个实例之间，无法共享属性，从而造成对系统资源的浪费。解决方法，就是 JavaS..

ES6 中的 Symbol ：Symbol 是什么 ？在ES6中引入了一种新的原始数据类型 Symbol，表示独一无二的值。其最大的用途是用来定义对象的唯一属性名。Symbol 产生原因 ？在 ES5 对象属性名都是字符串形式，这就难免会产生命名冲突的问题，为了防止属性名的冲突，所以 Symbol 诞生。Symbol 怎么生成 ?Symbol 值通过 Symbol 函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就存在的字符串，另外一种就是新增的 Symbo...

这篇文章是对于，在 JS 中深浅拷贝问题的一个总结 ：前置知识 ：JS 中的数据类型 ？数据分类 ：基本数据类型 :（String,Number,Null,Undefined,Symbol (ES6中新增)）。 引用数据类型 :（统称为 Object 类型，细分则有：Object,Array,Date,RegExp,Function）。特点 ：基本数据类型的特点 ：直接存储在栈（stack）中的数据。 引用数据类型的特点 ：存储的是该对象在栈中的引用，真实的数据存放在堆内存中。...

这篇文章是对于 JS 中数组排序的常见方法的一个总结 ：前置知识 ：排序大的分类可以分为两种：内排序和外排序。在排序过程中，全部记录存放在内存，则称为内排序，如果排序过程中需要使用外存，则称为外排序。下面讲的排序都是属于内排序。内排序有可以分为以下几类：插入排序：直接插入排序、二分法插入排序、希尔排序。 选择排序：直接选择排序、堆排序。 交换排序：冒泡排序、快速排序。 归并排序 基数排序稳定性稳定：归并排序、冒泡排序、插入排序，基数排序。 不稳定：选择排...

这篇文章是对于在 JS 中数组去重方法的一个总结 ：方法一 ：通过数组的双重 for 循环实现实现思路：双层循环 for 循环实现，外层循环遍历原数组中每一个元素，内层循环遍历新生成的数组中每个元素，设置一个标记位判断原数组中元素是否在新数组中存在，存在就 return / break 不存在则添加到新的数组中。function uniqueArray(arr){ //存放不重复的数值 const newArr = []; //做是否重复的标记 let i..

方法一 ：typeof作用 ： 区分基本数据类型。语法 ： typeof(变量名)。返回值 ： 对应的数据类型。存在的问题 ： 如果是引用类型（对象或者数组），那么返回值都是 Object，无法具体区分。实例 ：var str = "hello world";var num = 520;var obj = new Object();var arr = [1,2,3];var fn = function(){ console.log("函数")}typeof(st

ES6 中的箭头函数和普通函数有哪些区别 ？箭头函数没有 prototype（原型）：function test1 () { console.log(test1.prototype)}test1() //普通函数 constructor: f test1()const test2 = () => { console.log(test2.prototype)}test2() //箭头函数 undefined;this 指向规则不同 ：箭头函数 ：它没有 proto...

这篇文章是，对于 JS 中防抖和节流的实现方式和它们之间的区别 也包括在 Vue 中使用步骤的一个简单总结 :函数防抖（debounce）函数防抖概念 ：在事件被触发的 n 秒后执行回调，如果在这 n 秒内又被触发，则重新计时，意味着 n秒内函数只会被执行一次（最后一次）。函数防抖缺点 :如果事件在规定的事件间隔内被不断的触发，则调用方法会被不断的延迟。函数防抖实现原理:维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的...

浏览器的渲染过程 : 当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染。浏览器会将 HTML 解析成一个 DOM 树，DOM树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 将 CSS 解析成CSS 规则树（Style Rule）。 根据 DOM 树和 CSS 规则树来构造 Rendering Tree（渲染树）。注意：Rendering Tree 并不等同于DOM树，因为一些像Header或d...

这篇文章对于 JS 中 变量提升和函数声明提升做一个简单的概括 :参考链接 ：https://blog.csdn.net/qq_40856225/article/details/82916382变量的定义 :在 ES6 之前可以使用var关键字来定义一个变量；如果变量未初始化，则变量的值为undefined；变量的作用域 ：根据变量作用域可以分为全局变量和局部变量；全局变量的作用域为全部作用域；局部变量作用域为函数内； 根据变量作用域可以分为全局变量和局部变...

这篇文章是对于JS 中立即执行函数(IIFE)的一个概述 :概念 ：声明一个函数，并马上调用这个匿名函数就叫做立即执行函数（IIFE）；即立即执行函数是定义函数以后立即执行该函数，并且在执行完后，会被立即销毁。常见形式 ://形式一：用括号把函数定义包裹起来，后面再加括号(function(param){ console.log(param) //123})(123);//形式二：用括号把整个函数定义和调用包裹起来(function(param){ console...

在 JS 中，闭包 是一个神奇的存在，这篇文章概述一下 JS 中的闭包的 概念，以及它的 优缺点的一个简单总结 :闭包概念 :闭包是 js 中的一大特色，也是一大难点。简单来说，所谓闭包就是说，能够读取其他函数内部变量的函数；或 简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用。通常情况下，变量作用域两种：全局变量、局部变量。js 中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。要想从外部读取函数内部的变量，就会用到闭包。闭包特性 :函数嵌套函数；.

图片懒加载出现的原因 :有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个 1M 大小的图片，并发情况下，达到 1000 并发，即同时有 1000 个人访问，就会产生 1个G 的带宽。为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。懒加载原理 :一张图片就是一个<img&gt...

对于 JavaScript 中 this 指向问题比较绕人，写这篇文章做一个简单的总结 :this :它的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定，this 最终指向调用它的对象。如果一个函数中有 this，但是它没有被上一级的对象所调用，那么 this 指向的就是 window：function a(){ var user = "追梦子"; console.log(this.user); //undefined console.log(th...

这篇文章是对于，在平时前端日常开发中，常用的一些正则表达式的一个较为系统的总结;固定格式 的正则表达式 ：Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ ; 网站域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.? ; URL网址：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ; 手机号码：^(13[.

自己在学习JS原生的时候，做过的一些简单实例这是一些简单的 JS 小实例，比较简单，适于初学者进行练手。 每个实例对应的源码，都部署在 github 上，点击旁边的实例链接，跳转查看源代码。 同时也可以在 github 中点击下载源码，自己在本地运行，浏览器中预览即可；01_JS 基础实例 创建一个欢迎 cookie 实例链接 02_JS 基础实例 七天免登录...

JS 原生动画 JS 匀速或斜线运动: 完整代码链接 window.onload = function(){ let speedX = 5; let speedY = 3; let oDiv = document.getElementsByTagName("div")[0]; function move() {let currentLeft = p...

ES6基础语法let 和 const 的使用:let: 用来声明变量,用法和var相似;但是所声明的变量只有在let命令的代码块中有效;存在块级作用域;-->{}之间有效(局部变量); 不存在声明提升; 不允许重复声明（包括普通变量和函数参数）;const:用来声明常量(不可修改),不要试图改变常量的值,语法用法和let相似;let a = 10;console...