亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

異步

同步: 順序執(zhí)行, 優(yōu)點(diǎn): 靜態(tài)預(yù)判結(jié)果可控, 缺點(diǎn): 耗時(shí)任務(wù)阻塞執(zhí)行
異步: 亂序執(zhí)行, 優(yōu)點(diǎn): 不會(huì)阻塞代碼,體驗(yàn)好, 缺點(diǎn): 順序不可控

異步任務(wù)(耗時(shí))

1. 定時(shí)任務(wù): setTimeout, setInterval
2. 事件監(jiān)聽(tīng): addEventListener
3. 網(wǎng)絡(luò)請(qǐng)求: ajax, promise,fetch
4. 文件讀寫等涉及IO的操作

ajax-xhr

傳統(tǒng)方式,信息會(huì)在新頁(yè)面中或者彈窗中查看,用戶體驗(yàn)不好
Ajax: 局部更新,用戶不需要離開當(dāng)前頁(yè)面就可以看到新內(nèi)容, 單頁(yè)面應(yīng)用SPA

傳統(tǒng) XHR

1. 創(chuàng)建對(duì)象: new XMLHttpRequest();
2. 響應(yīng)類型: xhr.responseType = "json";
3. 配置參數(shù): xhr.open("GET", url, true);
4. 請(qǐng)求回調(diào): xhr.onload = () => console.log(xhr.response);
5. 失敗回調(diào): xhr.onerror = () => console.log("Error");
6. 發(fā)起請(qǐng)求: xhr.send(null);

xhr 至少監(jiān)聽(tīng)2個(gè)事件: load,error, 調(diào)用2個(gè)函數(shù): open,send
post請(qǐng)求,需要設(shè)置一下請(qǐng)求頭與請(qǐng)求的數(shù)據(jù),其它與get請(qǐng)求完全相同

function getUser1(btn) {
  //1. 創(chuàng)建對(duì)象
  const xhr = new XMLHttpRequest();
  //2. 響應(yīng)類型
  xhr.responseType = 'json';
  //3. 配置參數(shù)
  // 不傳get參數(shù),默認(rèn)返回全部用戶, 用table顯示
  let url = 'http://website.io/users.php';
  // 如果有g(shù)et參數(shù),用戶id,用ul列表顯示
  url = 'http://website.io/users.php?id=1';
  xhr.open('GET', url);
  //4. 請(qǐng)求回調(diào)
  xhr.onload = () => {
    console.log(xhr.response);
    // 將數(shù)組渲染到頁(yè)面中
    render(xhr.response, btn);
  };
  //5. 失敗回調(diào)
  xhr.onerror = () => console.log('Error');
  //6. 發(fā)起請(qǐng)求
  xhr.send(null);
}

fetch

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

function getUser2(btn) {
  let url = 'http://website.io/users.php';
  // fetch的所有操作都是異步的,但是通過(guò)then使用順序可控
  fetch(url)
    .then(function (response) {
      return response.json();
    })
    .then(function (json) {
      // 控制臺(tái)
      console.log(json);
      // 將數(shù)組渲染到頁(yè)面中
      render(json, btn);
    });
}

JS模塊

1. 模塊就是一個(gè)js文檔
2. 模塊有自己的獨(dú)立作用域(全局,函數(shù),塊)
3. 模塊內(nèi)成員,默認(rèn)全部私有,只有導(dǎo)出后才可以被外部使用

模塊成員導(dǎo)出與導(dǎo)入

<script type="module">
  // js中, 所有代碼共用一個(gè)全局作用域: window
  // 導(dǎo)入模塊
  import { username, hello } from './modules/m1.js';
  console.log(username);
  console.log(hello(username));
  </script>

默認(rèn)導(dǎo)出

  <script type="module">
  // 導(dǎo)入模塊的默認(rèn)成員不要用對(duì)象字面量,用標(biāo)識(shí)符
  // 只要不用對(duì)象字面量接收模塊成員,就是默認(rèn)導(dǎo)出
  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>

混合導(dǎo)出

<script type="module">
  // 接收混合導(dǎo)入成員,默認(rèn)成員的命名,必須放在非默認(rèn)的前面
  // import useremail, { username, hello } from './modules/m4.js';
  // 默認(rèn)導(dǎo)出成員,在導(dǎo)入時(shí)可以隨意命名的,useremail只是巧合
  import email, { username, hello } from './modules/m4.js';
  // console.log(useremail);
  console.log(email);
  console.log(hello(username));
</script>

命名空間

 <script type="module">
   // 導(dǎo)入的成員,過(guò)多時(shí),使用{...}會(huì)很長(zhǎng)的
   // 可以將所有的導(dǎo)入成員,全部掛載到一個(gè)對(duì)象上
   // 此時(shí), 導(dǎo)入模塊的成員,自動(dòng)成為該對(duì)象上的屬性
   // 這個(gè)對(duì)象就是: 命名空間
   // import email, { username, hello } from './modules/m4.js';
   import * as user from './modules/m4.js';
   console.log(user);
   // 此時(shí),訪問(wèn)模塊成員時(shí), 必須添加空間前綴,其實(shí)就是user對(duì)象
   console.log(user.username);
   console.log(user.hello(user.username));
   // 訪問(wèn)默認(rèn)
   console.log(user.default);

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：