理解JavaScript
面向需求编程：ES就是根据web客户端需求不断更新的代码，对应的，JS就是不断实现新需求的代码；所以不要纠结于语法，语法本身是有语义的，从功能上说只是解释器用来做词法分析的；所以对于实现某类需求、解决某类问题的js模块的语法，我们只需用经验和常规逻辑来编写demo
ES6 ES2015 ES2016 ES和JS的关系
【ES6与ES2015、ES2016以及ECMAScript的区别
-
ECMAScript 3.0：奠定了 JavaScript 语言的基本语法
-
ECMAScript 5：ES4->ES3.1->ES5
-
ES2015是ES6的第一个版本：ES6是ECMA的为JavaScript制定的第6个版本的标准，标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。ECMAscript 2015 是在2015年6月份发布的ES6的第一个版本。依次类推ECMAscript 2016 是ES6的第二个版本、 ECMAscript 2017 是ES6的第三个版本……现在采用年份命名，也就是==官方不会有es6了，只有es201、es2016…
-
ES5、ES6、TS的区别：https://www.jianshu.com/p/3c8c7713fa0e
ES6实现ES5难以实现的功能
TS添加类型、接口、注解、装饰器（angular6）、异步/等待 等未来性的技术，以实现安全开发和完善报错
-
TS学习资料
https://github.com/Microsoft/TypeScript/wiki/Roadmap
“边编程，边理解”。为了可以理解代码、上手编程并养成模块编程习惯，我们需要先了解模块的导入和导出
模块的导入和导出
参考后半部分https://segmentfault.com/a/1190000038457788
综合案例
export const length = 10;
export const width = 5;
export default function perimeter(x, y) {
return 2 * (x + y);
}
import calculatePerimeter, { length, width } from "./functions.js";
calculatePerimeter(length, width); // 30
了解js是单线程执行的，为解决单线程的阻塞问题，js引入了异步操作，通过Prromise类实现，在实现过程中可以理解回调函数的意义和习惯这种编程模式
Promise
-
为什么需要异步操作：js代码执行的逻辑
由于历史和软硬件因素，js本身的单线程执行的，同一时间只能做一件事
但是遇到等待（网络卡顿、定时任务）就会卡主，此时cpu是空闲的，还有利用空间
为解决这个问题，我们将不影响页面整体观感且可能导致卡顿的代码用异步执行，异步不会阻塞代码执行，页面就不会卡住
异步采用callback回调函数来执行
应用场景：网络请求之资源加载( 以图片资源为例 )、网络请求之ajax
-
理解概念：舍友找到简历才能通过面试的例子
-
参考教材：菜鸟教程
-
Promise 是一个 ECMAScript 6 的类，目的是更加优雅地书写复杂的异步任务。
-
解决了传统异步代码中函数瀑布的问题
-
语法
-
Promise 构造函数只有一个参数
-
Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数
-
resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。
如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作。
reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。
【注意】：resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；
new Promise(function (resolve, reject) { setTimeout(function () { console.log("First"); resolve(); }, 1000); }).then(function () { return new Promise(function (resolve, reject) { setTimeout(function () { console.log("Second"); resolve(); }, 4000); }); }).then(function () { setTimeout(function () { console.log("Third"); }, 3000); }); -
-
函数封装promise
function print(delay, message) { return new Promise(function (resolve, reject) { setTimeout(function () { console.log(message); resolve(); }, delay); }); } print(1000, "First").then(function () { return print(4000, "Second"); }).then(function () { print(3000, "Third"); }); -
常见问题
Q: then、catch 和 finally 序列能否顺序颠倒？
A: 可以，效果完全一样。但不建议这样做，最好按 then-catch-finally 的顺序编写程序。
Q: 除了 then 块以外，其它两种块能否多次使用？
A: 可以，finally 与 then 一样会按顺序执行，但是catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。
Q: then 块如何中断？
A: then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断。
Q: 什么时候适合用 Promise 而不是传统回调函数？
A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。
Q: Promise 是一种将异步转换为同步的方法吗？
A: 完全不是。Promise 只不过是一种更良好的编程风格。
Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程？
A: 当你又需要调用一个异步任务的时候。
前端需要与后台进行数据交互，我们通过ajax实现，并且ajax默认支持异步
前后端交互——ajax
参考这篇，通俗且有代码示例https://blog.csdn.net/Oriental_/article/details/104863762?spm=1001.2014.3001.5502
demo：封装ajax
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta提供文章的基本信息-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<script>
/*
type 请求方式
url 请求url地址
data 发送数据
success 下载数据成功后执行的函数
error 下载数据失败后执行的函数
*/
function $ajax({type="get",url,data,succes,error}){
// s1 创建xhr对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
// s2 建立对服务器的调用
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
// s3 向服务器发送请求
if(type=="get"){
xhr.send();
}else{
// 设置提交数据格式
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
data? xhr.send(querystring(data)) : xhr.send();
}
// 检查提交效果
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error : " + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = "";
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0,str.length-1);
}
// 页面渲染完成后进行的操作
window.onload = function(){
var btns = document.getElementByTagName("button");
btns[0].onclick = function(){
$ajax({
url:"code14/1.get.php",
data:{
username:"小明",
age:18,
password:"123abc"
},
success: function(result){
alert("GET请求到的数据：" + result);
},
error: function(msg){
alert("GET请求数据错误"+msg);
}
})
}
btns[1].onclick = function(){
$ajax({
type: "post",
url: "code14/2.post.php",
data:{
username: "小明",
age: 18,
password:"123abc"
},
success: function(result){
alert("POST请求到的数据：" + result);
},
error: function(msg){
alert("POST请求数据错误："+ msg);
}
})
}
}
</script>
</head>
<body>
<button>
GET请求
</button>
<button>
POST请求
</button>
</body>
</html>
</html>
4914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
