初识ES6
ES6:最新版的JS,ECMAScript标准 JavaScript语言(实现),它还有多种称呼:
var——重复定义不报错;没有块级作用域;不能限制修改
let——变量,不能重复定义,有块级作用域
const——常量,不能重复定义,有块级作用域
箭头函数的简写方式:
方法名 | 作用 | 例子 |
---|---|---|
map | 映射 | 31, 56, 89, 67 => 不及格, 不及格, 及格, 及格 |
reduce | 汇总 | ..., ..., ... => xx |
filter | 过滤 | x, x, x, x, x, x => x, x, x... |
forEach | 迭代、遍历 |
字符串模板 "xxx" 'xxx' `x${变量}xx
什么是同步——只有操作完事了,才往下执行,一次只能做一个事儿
什么是异步——这个操作进行中,其他操作也能开始,一次可以做多个事儿
异步的优势:1.用户体验好; 2.高效
同步的优势:简单
没用es6异步例子:
$.ajax({
url: '/get_banners',
type: 'post',
dataType: 'json',
success(){
$.ajax({
url: '/get_hot',
type: 'post',
dataType: 'json',
success(){
$.ajax({
url: '/get_list',
type: 'post',
dataType: 'json',
success(){
$.ajax({
url: '/get_hot',
type: 'post',
dataType: 'json',
success(){
},
error(){
alert('读取失败');
}
})
},
error(){
alert('读取失败');
}
})
},
error(){
alert('读取失败');
}
})
},
error(){
alert('读取失败');
}
})
复制代码
同步例子:
let banners=$.ajax('/get_banners');
let hot=$.ajax('/get_hot');
let list=$.ajax('/get_list');
let hot=$.ajax('/get_hot');
使用es6-Promise异步例子
# 创建Promise对象
let p=new Promise(function (resolve, reject){
# 异步代码...
});
# 使用Promise对象
p.then(()=>{}, ()=>{});
<script>
let p=new Promise(function (resolve, reject){
$.ajax({
url: 'data/1.txt',
dataType: 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
});
});
p.then(arr=>{
alert('成功了'+arr);
}, err=>{
alert('失败了');
});
</script>
# 多个异步方法一起调用
Promise.all([p, p2, p3, ...]).then()
普通函数: 一直执行到头,就像飞机一样,起飞就不能随便降落
generator: 中间可以暂停,就像出租车,想到哪里就到哪里
# 方法名前面加上 * 号就是generator
function *show(){
xxxx
xxx
let data1 = yield $.ajax('a.txt'); #暂停一会去调用ajax做别的事情,就像乘客中途想上WC,让出租车等一会一样
xxxx
xxx
xxx
let data2 = yield $.ajax('b.txt');
xxxx
xxxx
}
复制代码
下面再看一个generator例子,先异步获取返回值结果,判断后再进行其他异步逻辑调用,使用generator这么写,如下:
runner(function *(){
let data1=$.ajax();
if(xxx){
let data1=$.ajax();
let data1=$.ajax();
let data1=$.ajax();
let data1=$.ajax();
}else{
let data1=$.ajax();
let data1=$.ajax();
let data1=$.ajax();
}
});
以上写法如果换成es6之前的写法,可能得这么写,颇为复杂晦涩
$.ajax({
success(){
if(xxx){
$.ajax({
success(){
$.ajax({
success(){
$.ajax({
success(){
}
})
}
})
}
}else{
$.ajax({
success(){
$.ajax({
success(){
$.ajax({
success(){
}
})
}
})
}
}
})
}
})
复制代码
以下是相同功能的不同代码实现——基于runner和async
## runner && yield
runner(function *(){
xxx
let 结果1=yield 异步操作1;
xxx
let 结果2=yield 异步操作2;
xxx
});
## async && await
(async ()=>{
xxx
let 结果1=await 异步操作1;
xxx
let 结果2=await 异步操作2;
xxx
})();
模块化的几种实现方式
模块的定义与调用
# 1.定义模块 mod1.js
define(function (require, exports, module){
exports.a=12;
exports.b=5;
});
# 2.引用模块 1.html
seajs.use(['xxx.js', 'xxx.js', ...], function (mod1, mod2, ...){
console.log(mod1.a);
});
以下演示些简写的语法:
let a=12;
let b=5;
# 1.key和value一样,简写
let json={a, b};
# 2.函数
{
show: function (){
...
},
show2: function (){
...
}
}
# 函数简写
{
show(){
...
},
show2(){
...
}
}
复制代码
如果引用模块,有以下两种情况:
node的模块化:
#输出
exports.xx=xxx;
module.exports={x, x, x};
#引入
let mod=require('./aaa.js');
ES6模块化: 参考文档
#输出
export {x, x, x};
#引入
import mod from "./xxx.js"
想到的有这些,还有一些其他的小的软件
使用场景 | 功能 | 使用率 |
---|---|---|
后台语言 | 操作数据、接口 | 35% |
工具 | WebPack、grunt、爬虫 | 65% |
npm(Node Package Manager) 作为包管理工具,可以自动解决依赖,自动下载,但是下载比较麻烦,在国内速度较慢。可以使用cnpm代替npm,关于如何是用cnpm代替npm,可以参考这篇文章淘宝 NPM 镜像
使用npm
npm i [xxx]
cnpm i -g bower
# npm 后台包管理器
# bower 前台包管理器
npm i -g phonegap@6.5.2
npm i -g n # n---升级node本身
web端与服务端数据交互的几种方式:
http协议——协议
解决http缓存的几种方案:
htttp和https HTTP和HTTPS详解 HTTP与HTTPS握手的那些事
http版本 | 特性 |
---|---|
http 1.0 | 短连接 |
http 1.1 | 主流 长连接——keep alive |
http 2.0 |
form最重要
<form action="1.php" method="get" enctype="multipart/form-data">
用户:<input type="text" name="username"><br>
密码:<input type="password" name="password"><br>
<input type="submit" value="提交">
</form>
ajax原理——XMLHttpRequest
ajax好再哪里:用户体验、性能高。原生的ajax写法如下所示:
<script>
window.onload=function (){
let oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
# 1.创建对象
let xhr=new XMLHttpRequest();
//alert(xhr.readyState); 0
# 2.连接
xhr.open('GET', 'data/1.txt', true);
//alert(xhr.readyState); 1
# 3.发送
xhr.send();
# 4.接收
xhr.onreadystatechange=function (){
if(xhr.readyState==4){
if(
(xhr.status>=200 && xhr.status<300)||
xhr.status==304
){
console.log(xhr);
alert('成功');
}else{
alert('失败');
}
}
};
};
};
</script>
# 接收响应数据:
# xhr.responseText 文本数据
# xhr.responseXML xml数据
复制代码
上述代码中的 onreadystatechange = on ready state change(当通信状态改变)
readyState值说明
值 | 状态 | 说明 |
---|---|---|
0 | 初始状态 | xhr对象刚创建完 |
1 | 连接 | 连接到服务器 |
2 | 发送请求 | 刚刚send完 |
3 | 接收完成 | 头接收完了 |
4 | 接收完成 | 体接收完了 |
status——http状态码
值 | 描述 |
---|---|
1xx | 消息 |
2xx | 成功 |
3xx | 重定向 |
301 Moved Permanently | 永久重定向——下回不会再找他了 |
302 Move temporarily | 临时重定向——下回依然会请求服务器 |
304 Not Modified | 缓存 |
4xx | 请求错误 |
5xx | 服务端错误 |
6xx+ | 自定义 |
HTTP状态码大全
为什么要重定向,经常听到这个词
如果我们访问这个网址taobao.com,会发现不同的访问终端最终会被重定向到对应该终端的一个网址,如下所示:
PC端访问->302->www.taobao.com
手机端访问->302->m.taobao.com
操作json字符串
前端安全
跨域
什么是ajax2.0——ajax2.0的理解与应用实例 三种ajax上传文件方法
json标准格式
{"a": 12, "name": 'blue'}
什么是沙箱机制
隔离出来虚假系统
c的数组和js的数组有啥区别
c数组——是空间;没有结尾、没有长度、没有操作(移动指针);固定长
JS数组——是对象;相关操作api;可变长
链表和数组
类型 | 长度 | 扩展 | 时间复杂度 | 索引 | 时间复杂度 |
---|---|---|---|---|---|
链表 | 可变长 | 可以随意扩展 | O(1) | 不擅长 | O(n) |
数组 | 固定长 | 不擅长扩展 | O(n) | 擅长 | O(1) |
上面所说的固定长如果想变长,必须重新开辟一块内存空间,然后把之前数组中的内容一个个复制到新的数组中,复制完成后之前老的固定数组所占用的内存空间就就可以释放了。