JavaScript进阶4-学习笔记

JavaScript进阶4-学习笔记

前端：
根据Ui写页面，使用vuecli+vue---测试功能---需要数据(json,array,字符串)----根据文档定义----
根据文档可以造数据---因为后端可能没有提供---如何造数据？----模拟服务node----
什么是nodejs?-----是一个运行js的环境---如何安装node环境---下载nodejs并安装
我是前端为什么要学后端Node?----1.容易上手，因为它是js, 2.模拟服务node 3.加薪
---已经有接口

如何调用?---发送ajax----调接口地址----若调成功---拿到返回的数据---渲染页面

如何启动node服务？----右击打开命令行----安装依赖npm install-----根据package.json中的依赖安装----
将dependencies依赖包下载并放到node_modules目录----启动服务命令：node express-run.js(express是node框架)----可以看到服务启动，端口3000.---不能关闭服务
关闭node服务----ctrl+c

如何发送请求？----使用的是浏览器原生对象XMLHttpRequest(xhr)---知道接口地址---根据文档找---
-----接口调用方式-----get post delete put----使用xmlhttprequest请求数据----指定接口地址和方法---
发送请求异步----拿到数据---检查数据是否拿到---把数据渲染---数据格式不符合前端----

异步请求？-----点外卖----玩手机----外卖到了电话通知
同步请求？-----点外卖----只能等待外卖，不能做任何事----外卖到了---才能做其它事情

如何检查请求接口状态？-----在浏览器控制台----network---截取请求header信息

防止多次触发请求？----前端必会----
1.点击按钮---发送请求---禁用按钮---请求完毕---解禁按钮
2.可以使用防抖节流优化
防抖-----在点击请求后n秒后再发送，若中间再次点击则重新计算n秒
节流-----在n秒内只发送一次，不重新计算

发送ajax使用什么协议？-----http/https(超文本传输协议)-----前后请求完毕不保存任何数据
特点：
无连接----每次发送请求即断开连接
无状态----没有记忆
媒体独立----浏览器发送数据可指定内容类型

请求头：
general请求行----地址，方法，请求状态
responseHeader响应头----返回服务端的参数
requestHeader请求头----发送请求时带的头信息
请求体-----包括参数

问题：
从触发请求到页面渲染成功这个时间比较长，怎么判断是前端的锅还是后台的锅，或者是网络的锅。。。
在network中查看请求接口的时间, 若时间较长，需后端优化

前端的问题慢: 加载慢，渲染慢

后端：
根据接口文档写接口, 可以任何语言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="sendData()">发送ajax</button>
    <div id="content"></div>
    <script>
        function sendData(){
            var xmlhttp = new XMLHttpRequest();
            //open---指定一个接口（url, method）
            xmlhttp.open("get", "http://localhost:3000/info?name=jack"); //异步
            xmlhttp.send(); //发送
            xmlhttp.onreadystatechange = function() { //接收数据
                //4--node服务响应完成   200---成功
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    console.log(xmlhttp.responseText) //打印
                    //把拿到的数据展示出来 写入dom
                    content.innerHTML = xmlhttp.responseText; //conten 简写
                }
            }

        }
    </script>
</body>
</html>

递归

//什么是递归？-----方法自己调用自己----很容易犯错误？-----没有终止条件
//目录结构----修改所有目录名----递归

//死循环
function f1(){
    console.log("f1.......")
    f1();
}
f1();
//改进----加入终止条件
var i=0;
function f1(){
    i++;
    console.log("f1.......")
    if (i<5) {
        f1();
    }
}
f1();


//用递归实现一个简单求和函数， 5-4-3-2-1  有限
var sum = 0;
for (var i=0; i<=5; i++) {
    sum +=i;
}
console.log(sum)

//递归---方法自己调用自己---需定义函数----很重要思想
//return终止函数---把结果返回
//为什么要返回1? ------5-4-3-2-1-----因为自己调自己最后一次n==1
//执行步骤：
// 1.传入5----if不成立---5+---getSum(5-1)自己调自己
// 2.传入4----if不成立---4+---getSum(4-1)自己调自己
// 3.传入3----if不成立---3+---getSum(3-1)自己调自己
// 4.传入2----if不成立---2+---getSum(2-1)自己调自己
// 5.传入1----if成立---返回1---终止
function getSum(n) {
    if (n === 1) {   //终止条件
        return 1;    //终止调用
    }
    return n+getSum(n-1);  //自己调自己
}
var sum = getSum(5);
console.log(sum)