二、ES6中的解构赋值
解构赋值 ECMAScript 6允许按照一定模式从数组或对象中提取值，对变量进行赋值。这种赋值方式被称为解构赋值。 ECMAScript 6的“解构赋值”本质上属于“模式匹配”。赋值运算符两边的模式相同，左边的变量会被赋予对应位置的值。 变量的解构赋值 从指定的数组或对象中提取值，为指定变量进行赋值。 1var/let [变量名1,变量名2,变量名3] = 数组或对象 变量的索引值对应值的索引值。 123let [a, b, c] = [1, 2, 3];console.log(a, b, c); // 1 2 3 赋值失败 123let [a] = [];console.log(a); // undefined 以上代码相当于定义了一个变量a，但未初始化（赋值） 12let [n, m] = [1];console.log(n, m); // 1 undefined 以上代码表示由于变量只有一个，而定义变量有两个，因此m不会得到值。 不完全解构赋值 即定义变量的数量小于值的数量。 12let [a, b] = [1, 2, 3];console.log(a, b); // ...
一、ES6基本概念
ES6的概念以及运行环境 ES6即是一个历史名词，也是一个泛指。含义是5.1版以后的JavaScript的下一代标准。涵盖ES2015、ES2016、ES2017等 WebStorm配置 找到左上角的file，选择setting 选择Languages & Frameworks设置ES6选项。 新版的webstorm已经默认是es6了 Babel编译器 其主要作用是用于将ES2015+代码转化为向下兼容的JavaScript代码。 安装 12yarn add @babel/core @babel/cli @babel/preset-env -Dyarn add @babel/polyfill 通过以上命令安装后会导致只有当前项目才可以使用babel工具，因此为了所有项目都可以使用babel工具，可以进行全局安装。 12yarn global add @babel/core @babel/cli @babel/preset-envyarn global add @babel/polyfill 创建配置文件 也就是在项目根目录创建package.jso ...
Node安装及更换源
NodeJs的安装 无论是何种系统进行安装，都需要到其官网进行下载。 Windows Windows版本以Windows10 64位为例，为了方便我选择msi安装方式进行安装。 下载 安装步骤 选择安装位置 下一步 接下来一路下一步即可。 验证是否安装成功 终端内输入命令node -v即可验证node是否安装成功。输入npm -v即可验证npm是否安装成功。 Linux 下载安装包 如果是服务器，那么上传到服务器。如果是本地，那么直接解压即可。 解压命令参考tar -xvf 文件名。 切换用户，切换用户到root用户，并将解压出来的文件夹移动。 1mv node /usr/local/src/ 变基环境变量 vi /etc/profile 12export NODE_HOME=/usr/local/src/nodeexport PATH=$NODE_HOME/bin:$PATH 运行命令source /etc/profile使配置生效 多版本管理 对于node的多版本管理推荐使用nvm。其GitHub开源（Win ...
通过JSONP实现跨域访问
跨域访问 说到跨域访问就要谈到浏览器的同源策略，所谓同源指的就是协议相同、域名相同、端口号相同，三个条件必须全部匹配，否则就会收到限制，例如： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 无法获得 AJAX 请求不能发送 而互联网默认原则就是同源策略，也就是说不允许跨域访问。 常见的跨域可以通过标签元素实现，例如link、script、img、iframe等标签。 1234567891011121314151617<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=" ...
原生JS实现一个Ajax跨域请求
什么Ajax 在现实Ajax之前，我们需要了解下什么Ajax？ Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法。 当使用结合了这些技术的 AJAX 模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。 异步交互 接下来便要弄清楚什么是异步交互。 所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。 举个简单的例子就是当点击某个按钮后，程序会去请求一些数据，而这个过程整个页面是不会刷新的。如下图所示，异步获取一言并且显示在页面中 快速开始 一：核心对象 关于核心对象：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 核心对象是实现Aja ...
三、基于promise封装属于自己的Ajax库
模拟axios利用promise封装一个自己的Ajax库。 一、基础框架 封装Ajax库之前，我们要将其框架结构写出来。 我们通过一个匿名函数，将我们的核心函数暴露给全局。 对这个核心函数进行方法（get、post等）的添加。 1234567891011121314151617181920212223242526272829303132(function anonymous(window) { //默认配置项 let _default = { // 请求方式 method: "GET", // URL url: "", // URL基 baseURL: "", // 请求头 headers: {}, // 设置返回格式 dataType: "JSON", // POST请求的数据 data ...
二、fetch中的基础语法
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch fetch概念 fetch不是Ajax，它诞生的目的是为了代替Ajax，它是js中内置的API。 基于fetch可以实现客户端和服务端的信息通信 由于fetch是2018年提出，因此存在浏览器兼容问题。 12345fetch('https://v1.hitokoto.cn', { method: 'GET',}).then(result => { console.log(result);}) 12345678910fetch('https://v1.hitokoto.cn', { method: 'POST', body: 'c=b', headers: { ' ...
一、Axios基础
参考文档：http://www.axios-js.com/zh-cn/docs/ axios库基本概念 它是一个类库，基于promise管理的Ajax库 关于get、post方法的参数 url 第一个参数，请求的url地址 options 对象。 get方法 123456789axios.get('https://v1.hitokoto.cn/', { params: { c: "b" }}).then(function (res) { console.log(res);}).catch(function (err) { console.log(err);}) get请求会把params中的键值对拼接成urlencode格式的字符串，然后以问号传递参数的形式，传递给服务器。 post方法 post方法与get稍有些不同，其第二个参数直接传入对象即代表请求数据。 1234567axios.post( ...
四、实现跨域访问
同源策略 同源：协议相同、域名相同、端口号相同 如果非同源那么将收到的限制： Cookie、LocalStorage和IndexDB无法读取 DOM无法获得 AJAX请求不能发送 互联网默认原则：同源策略（不允许跨域访问） 常见跨域 link元素 script元素 img元素 iframe元素 JSONP 通过动态创建 script 标签，通过 script 标签的 src 请求没有域限制来获取资源 例如在 html 页面中，将 script 标签地址改为后端接口。 网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同原政策限制；服务器收到请求后，将数据放在一个指定名的回调函数里传回来。 12345678910111213141516171819<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c ...
三、jQuery中的Ajax
JQuery中的Ajax 方法 load方法 $.get和$.post方法 $.ajax方法 $.getScript方法和$.JSON方法 事件 ajaxStart和ajaxStop ajaxComlete、ajaxSend、ajaxError、ajaxSuccess事件 load方法 $element.load(url,[data],[callback]) url 异步请求的地址 data 异步请求的数据.。如果传入参数那么请求方式为post，否则为get。请求数据为键值对形式。 callback 自动将返回结果写入到目标元素中 12345$('.btn').click(function () { $('button').load('data/server2.txt', { name: '123' }, function () { console.log('success'); }) ...
