异步与模块

异步

同步: 顺序执行, 优点: 静态预判结果可控, 缺点: 耗时任务阻塞执行
异步: 乱序执行, 优点: 不会阻塞代码,体验好, 缺点: 顺序不可控

异步任务(耗时)

1. 定时任务: setTimeout, setInterval
2. 事件监听: addEventListener
3. 网络请求: ajax, promise,fetch
4. 文件读写等涉及IO的操作

ajax-xhr

传统方式,信息会在新页面中或者弹窗中查看,用户体验不好
Ajax: 局部更新,用户不需要离开当前页面就可以看到新内容, 单页面应用SPA

传统 XHR

1. 创建对象: new XMLHttpRequest();
2. 响应类型: xhr.responseType = "json";
3. 配置参数: xhr.open("GET", url, true);
4. 请求回调: xhr.onload = () => console.log(xhr.response);
5. 失败回调: xhr.onerror = () => console.log("Error");
6. 发起请求: xhr.send(null);

xhr 至少监听2个事件: load,error, 调用2个函数: open,send
post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同

function getUser1(btn) {
  //1. 创建对象
  const xhr = new XMLHttpRequest();
  //2. 响应类型
  xhr.responseType = 'json';
  //3. 配置参数
  // 不传get参数,默认返回全部用户, 用table显示
  let url = 'http://website.io/users.php';
  // 如果有get参数,用户id,用ul列表显示
  url = 'http://website.io/users.php?id=1';
  xhr.open('GET', url);
  //4. 请求回调
  xhr.onload = () => {
    console.log(xhr.response);
    // 将数组渲染到页面中
    render(xhr.response, btn);
  };
  //5. 失败回调
  xhr.onerror = () => console.log('Error');
  //6. 发起请求
  xhr.send(null);
}

fetch

fetch(url)
.then(res)
.then(...)
.catch(err)

function getUser2(btn) {
  let url = 'http://website.io/users.php';
  // fetch的所有操作都是异步的,但是通过then使用顺序可控
  fetch(url)
    .then(function (response) {
      return response.json();
    })
    .then(function (json) {
      // 控制台
      console.log(json);
      // 将数组渲染到页面中
      render(json, btn);
    });
}

JS模块

1. 模块就是一个js文档
2. 模块有自己的独立作用域(全局,函数,块)
3. 模块内成员,默认全部私有,只有导出后才可以被外部使用

模块成员导出与导入

<script type="module">
  // js中, 所有代码共用一个全局作用域: window
  // 导入模块
  import { username, hello } from './modules/m1.js';
  console.log(username);
  console.log(hello(username));
  </script>

默认导出

  <script type="module">
  // 导入模块的默认成员不要用对象字面量,用标识符
  // 只要不用对象字面量接收模块成员,就是默认导出
  import User from './modules/m3.js';
  console.log(typeof User);
  const user = new User('王老师');
  console.log(user.username);
  console.log(user.getUsername(user.username));
</script>

混合导出

<script type="module">
  // 接收混合导入成员,默认成员的命名,必须放在非默认的前面
  // import useremail, { username, hello } from './modules/m4.js';
  // 默认导出成员,在导入时可以随意命名的,useremail只是巧合
  import email, { username, hello } from './modules/m4.js';
  // console.log(useremail);
  console.log(email);
  console.log(hello(username));
</script>

命名空间

 <script type="module">
   // 导入的成员,过多时,使用{...}会很长的
   // 可以将所有的导入成员,全部挂载到一个对象上
   // 此时, 导入模块的成员,自动成为该对象上的属性
   // 这个对象就是: 命名空间
   // import email, { username, hello } from './modules/m4.js';
   import * as user from './modules/m4.js';
   console.log(user);
   // 此时,访问模块成员时, 必须添加空间前缀,其实就是user对象
   console.log(user.username);
   console.log(user.hello(user.username));
   // 访问默认
   console.log(user.default);