網絡編程-基礎

一、H5新增存儲方案

什麼是SessionStorage和LocalStorage
和Cookie一樣, SessionStorage和LocalStorage也是用於存儲網頁中的數據的；
Cookie、 SessionStorage、LocalStorage區別
2.1 生命週期(同一瀏覽器下)
Cookie生命週期: 默認是關閉瀏覽器後失效, 但是也可以設置過期時間；
SessionStorage生命週期: 僅在當前會話(窗口)下有效，關閉窗口或瀏覽器後被清除, 不能設置過期時間；
LocalStorage生命週期: 除非被清除，否則永久保存；
2.2 容量
Cookie容量: 有大小(4KB左右)和個數(20~50)限制；
SessionStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/
LocalStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/
2.3 網絡請求
Cookie網絡請求: 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題
SessionStorage網絡請求: 僅在瀏覽器中保存，不參與和服務器的通信
LocalStorage網絡請求: 僅在瀏覽器中保存，不參與和服務器的通信
Cookie、 SessionStorage、LocalStorage應用場景
Cookie: 判斷用戶是否登錄
sessionStorage: 表單數據
LocalStorage: 購物車
注意點: 無論通過以上那種方式存儲的數據, 切記不能將敏感數據直接存儲到本地；

二、同源策略

1.什麼是同源策略?
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能；你
所謂同源是指: 協議，域名，端口都相同,就是同源, 否則就是跨域；

http://www.it666.com:80/index.html（最後的index.html是資源路徑）
協議: http/https/…
一級域名:it666.com/itzb.com
二級域名: www/study/edu/…
端口號: 80/3306/…

// 協議+一級域名+二級域名+端口號都相同, 所以同源

 http://www.it666.com:80/index.html
 http://www.it666.com:80/detail.html

// 協議不同, 所以不同源, 是跨域

 http://www.it666.com:80/index.html
 https://www.it666.com:80/index.html

// 一級域名不同, 所以不同源, 是跨域

 http://www.it666.com:80/index.html
 http://www.itzb.com:80/index.html

// 二級域名不同, 所以不同源, 是跨域

 http://www.it666.com:80/index.html
 http://edu.it666.com:80/index.html

// 端口號不同, 所以不同源, 是跨域

 http://www.it666.com:80/index.html
 http://www.it666.com:8090/index.html

2.同源策略帶來的影響
在同源策略下, 瀏覽器只允許Ajax請求同源的數據, 不允許請求不同源的數據
但在企業開發中, 一般情況下爲了提升網頁的性能, 網頁和數據都是單獨存儲在不同服務器上的
這時如果再通過Ajax請求數據就會拿不到跨域數據

3.跨域解決方案

jsonp
document.domain+iframe
location.hash + iframe
window.name + iframe
window.postMessage
flash等第三方插件

 當前的網頁地址: http://127.0.0.1:80/jQuery/Ajax/19-%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.html
 請求的資源地址: http://127.0.0.1:80/jQuery/Ajax/19-SameOriginPolicy.php

 當前的網頁地址: http://127.0.0.1:63342/jQuery/Ajax/19-%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.html
 請求的資源地址: http://127.0.0.1:80/jQuery/Ajax/19-SameOriginPolicy.php

三、fetch基本使用

1.什麼是fetch?
和Ajax一樣都是用於請求網絡數據的
fetch是ES6中新增的, 基於Promise的網絡請求方法

2.fetch基本使用

 fetch(url, {options})
 .then()
 .catch();

例1：

fetch("http://127.0.0.1/jQuery/Ajax/41.php?teacher=lnj&age=34", {
        method: "get"  // 設置參數在上面的地址後面處添加，如： ?teacher=lnj&age=34
    }).then(function (res) {
        // console.log(res.text());
        // return res.text();
        return res.json();
    }).then(function (data) {
        console.log(data);
        console.log(typeof data);
    }).catch(function (e) {
        console.log(e);
    });

例2：

fetch("http://127.0.0.1/jQuery/Ajax/41.php", {
        method: "post",  // 設置參數可用下面這種格式
        body: JSON.stringify({teacher:"zq", age:666})
    }).then(function (res) {
        // console.log(res.text());
        // return res.text();
        return res.json();
    }).then(function (data) {
        console.log(data);
        console.log(typeof data);
    }).catch(function (e) {
        console.log(e);
    });

四、axios網絡請求庫

1.什麼是axios?
Axios 是一個基於 promise 的 HTTP 庫網絡請求插件

2.axios特點
2.1可以用在瀏覽器和 node.js 中
2.2支持 Promise API
2.3自動轉換 JSON 數據
2.4客戶端支持防禦 XSRF

3.全局的 axios 默認值
在企業開發中項目分爲 :開發階段和部署階段, 這兩個階段項目存儲的位置是不同的；
項目上線前存儲在企業內部測試服務器上, 項目上線後存儲在企業正式服務器上；
所以如果每次請求都將請求的地址寫在請求中, 那麼項目上線時需要大量修改請求地址；
爲了解決這個問題, 我們可以配置一個全局URL根地址, 項目上線時只需要修改根地址即可；
例如: 上線前地址是: http://127.0.0.1/jQuery/Ajax/41.php
上線後地址是: http://192.199.13.14/jQuery/Ajax/41.php

axios.defaults.timeout = 2000;
    axios.defaults.baseURL = "http://127.0.0.1";
    axios.post("/jQuery/Ajax/41.php", {
        teacher: "lnj",
        age: 666
    })
        .then(function (res) {
            console.log(res.data);
        })
        .catch(function (e) {
            console.log(e);
        });

五、Symbol基本概念

1.什麼Symbol?
Symbol是ES6中新增的一種數據類型, 被劃分到了基本數據類型中；
基本數據類型: 字符串、數值、布爾、undefined、null、Symbol
引用數據類型: Object
2.Symbol 的作用
用來表示一個獨一無二的值

3.如何生成一個獨一無二的值?
let xxx = Symbol();

4.爲什麼需要Symbol?
在企業開發中如果需要對一些第三方的插件、框架進行自定義的時候, 可能會因爲添加了同名的屬性或者方法, 將框架中原有的屬性或者方法覆蓋掉, 爲了避免這種情況的發生, 框架的作者或者我們就可以使用Symbol作爲屬性或者方法的名稱。

5.如何區分Symbol?
在通過Symbol生成獨一無二的值時可以設置一個標記，這個標記僅僅用於區分, 沒有其它任何含義；

let name = Symbol("name");  // 括號裏的name僅僅起一個標記作用
    let say = Symbol("say");
    let obj = {
        // 注意點: 如果想使用變量作爲對象屬性的名稱, 那麼必須加上[]
        [name]: "lnj",
        [say]: function () {
            console.log("say");
        }
    }
    // obj.name = "it666";  // 這裏添加的name不會覆蓋掉上面的name取值；
   obj[Symbol("name")] = "it666"; 
    console.log(obj);

Symbol注意點

1.通過Symbol生成獨一無二值時需要在後面加上(), 但是前面不能加new, 因爲它不是引用類型;

let xxx = Symbol(); // 正確
let xxx = new Symbol(); // 錯誤

2.通過Symbol生成獨一無二值時傳入的字符串僅僅是一個標記, 方便我們閱讀代碼, 沒有其它任何意義
let xxx = Symbol("name");

3.做類型轉換的時候不能轉換成數值，能轉換成字符串和布爾類型

 let xxx = Symbol("name");
  console.log(String(xxx));
  console.log(Boolean(xxx));
 console.log(Number(xxx));

4.不能做任何運算

  let xxx = Symbol("name");
  console.log(xxx + "abc");
 console.log(xxx + 123);

5.Symbol生成的值作爲屬性或方法名稱時, 一定更要保存下來, 否則後續無法使用
let name = Symbol("name");

6.for循環無法遍歷出Symbol 的屬性和方法

六、Iterator基本概念

1.什麼是Iterator?
Iterator又叫做迭代器, 是一種接口；
這裏的接口和現實中接口一樣, 是一種標準一種規範；
例如: 電腦的USB接口有電腦USB接口的標準和規範, 正式因爲有了標準和規範，
所以A廠商生成的USB線可以插到B廠商電腦的USB接口上；
它規定了不同數據類型統一訪問的機制, 這裏的訪問機制主要指數據的遍歷，
在ES6中Iterator接口主要供 for…of 消費；

2.默認情況下以下數據類型都實現的Iterator接口
Array/Map/Set/String/TypedArray/函數的 arguments 對象/NodeList 對象

1.只要一個數據已經實現了Iterator接口, 那麼這個數據就有一個叫做[Symbol.iterator]的屬性
2.[Symbol.iterator]的屬性會返回一個函數
3.[Symbol.iterator]返回的函數執行之後會返回一個對象
4.[Symbol.iterator]函數返回的對象中又一個名稱叫做 next 的方法
5.next 方法每次執行都會返回一個對象{value: 1, done: false}
6.這個對象中存儲了當前取出的數據和是否取完了的標記

 // let arr = [1, 3, 5];
 // console.log(arr[Symbol.iterator]);
 // let it = arr[Symbol.iterator]();
 // console.log(it);
 // console.log(it.next());
 // console.log(it.next());
 // console.log(it.next());
 // console.log(it.next());

3.Iterator應用場景

解構賦值
擴展運算符

七、Generator函數基本概念

什麼是Generator函數?
Generator 函數是 ES6 提供的一種異步編程解決方案；
Generator 函數內部可以封裝多個狀態, 因此又可以理解爲是一個狀態機；
如何定義Generator函數
只需要在普通函數的function後面加上 * 即可；
Generator函數和普通函數區別
3.1調用Generator函數後, 無論函數有沒有返回值, 都會返回一個迭代器對象,
3.2調用Generator函數後, 函數中封裝的代碼不會立即被執行；
真正讓Generator具有價值的是 yield 關鍵字
4.1在Generator函數內部使用yield關鍵字定義狀態
4.2並且yield關鍵字可以讓 Generator內部的邏輯能夠切割成多個部分。
4.3通過調用迭代器對象的next方法執行一個部分代碼, 執行哪個部分就會返回哪個部分定義的狀態
在調用next方法的時候可以傳遞一個參數, 這個參數會傳遞給上一個yield;

注意點: yield關鍵字只能在Generator函數中使用, 不能在普通函數中使用

 function* gen() {
     console.log("123");
     let res = yield "aaa";

     console.log(res);
     console.log("567");
     yield 1 + 1;

     console.log("789");
     yield true;
 }
 let it = gen();
 // console.log(it);
 console.log(it.next());
 console.log(it.next("it666"));  // 在調用next方法的時候可以傳遞一個參數, 這個參數會傳遞給上一個yield
 // console.log(it.next());
 // console.log(it.next());

Generator函數應用場景1

應用場景, 讓函數返回多個值

function* calculate(a, b) {
        yield a + b;
        yield a - b;
    }
    let it = calculate(10, 5);
    console.log(it.next().value);
    console.log(it.next().value);

Generator函數應用場景2
1.應用場景: 利用 Generator 函數，可以在任意對象上快速部署 Iterator 接口;

Generator 函數特點
1.Generator 函數也是一個函數
2.Generator 函數會返回一個迭代器對象
3.迭代器對象有next方法
4.next方法每次執行都會返回一個對象{value: xxx, done: false}

1.必須有一個叫做[Symbol.iterator]的屬性
2.[Symbol.iterator]的屬性會返回一個函數
3.[Symbol.iterator]返回的函數執行之後會返回一個可迭代對象
4.[Symbol.iterator]函數返回的對象中又一個名稱叫做next的方法
5.next方法每次執行都會返回一個對象{value: xxx, done: false}

let obj = {
        name: "lnj",
        age: 34,
        gender: "man"
    }
    function* gen(){
        let keys = Object.keys(obj);
        for(let i = 0; i < keys.length; i++){
            yield obj[keys[i]];
        }
    }
    obj[Symbol.iterator] = gen;
    // console.log(obj[Symbol.iterator]);
    let it = obj[Symbol.iterator]();
    // console.log(it);
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());

Generator函數應用場景3
應用場景: 用同步的流程來表示異步的操作

function request() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve("拿到的數據");
            }, 1000);
        });
    }

function* gen() {
        yield request();
        yield request();
        yield request();
    }
    let it = gen();
    // console.log(it.next().value);
    it.next().value.then(function (data) {
        console.log(data, 1);
        return it.next().value;
    }).then(function (data) {
        console.log(data, 2);
        return it.next().value;
    }).then(function (data) {
        console.log(data, 3);
    });

八、async函數

1.async函數
async函數是ES6中新增的一個函數, 用於定義一個異步函數；
async函數函數中的代碼會自動從上至下的執行代碼；

2.await 操作符
await操作符只能在異步函數 async function 中使用
await表達式會暫停當前 async function 的執行，等待 Promise 處理完成。
若 Promise 正常處理(fulfilled)，其回調的resolve函數參數作爲 await 表達式的值，然後繼續執行 async function。

function request() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve("拿到的數據");
            }, 1000);
        });
    }

async function gen() {
        let res1 = await request();
        console.log(res1, 1);
        let res2 = await request();
        console.log(res2, 2);
        let res3 = await request();
        console.log(res3, 3);
    }
    gen();

-End

網絡編程-基礎

一、H5新增存儲方案

二、同源策略

三、fetch基本使用

四、axios網絡請求庫

五、Symbol基本概念

六、Iterator基本概念

七、Generator函數基本概念

八、async函數

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

JS-12-對象-封裝 / 繼承

JS-23-DOM事件

WEB前端學習課程推薦

JS-21-對元素內容 / 樣式的操作

JS-15-深拷貝和淺拷貝

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結