淺談幸運28源碼下載FIle協議與Http協議及區別
index.html:
復制代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<script src="./index.js" async></script>
</body>
</html>
復制代碼
index.js:
import * as circle from ‘./test‘;
console.log(‘圓面積：‘ + circle.area(4));
console.log(‘圓周長：‘ + circle.circumference(14));
test.js:
復制代碼
export function area(radius = 5) {
}
export function circumference(radius = 5) {
return 2 Math.PI radius;
}
復制代碼
使用的是幸運28源碼下載dashengba.com【大聖源碼論壇】企娥3266397597的module語法，但是通過檢查思路
-
瀏覽器版本過低，不支持es6語法。於是升級瀏覽器至最新（Chrome）,但是問題依舊沒有解決。
- 本地不支持module模塊，通過：
$ npm install -g es-checker
$ es-checker
檢查本地對ES6的支持，發現問題並不在這裏
-
通過bable（在這裏就不對bable做敘述了）將ES6語法轉化成ES5語法，瀏覽器依舊報CORS跨域問題。
- 在外網一段回答中主要到回答者提到http和file,於是思考可能是協議使用錯誤。最後通過localhost本地服務器進行訪問文件，報錯消失。
什麽是File協議
字面意思：本地文件傳輸協議
什麽是File：
file協議主要用於訪問本地計算機中的文件，好比通過Windows的資源管理器中打開文件或者通過右鍵單擊‘打開’一樣。
如何使用：
file協議的基本格式如下：
file:///文件路徑
比如需要打開E盤下txt目錄中的index.txt，那麽在資源管理器或者瀏覽器地址欄中輸入：file:///E:/txt/index.txt。用file:///+文件地址，其實等價於文件的地址。即：
file:///C:/Users/CLi/AppData/Local/Temp/WindowsLiveWriter1627300719/supfiles52F410/wangdan-se-436963[2].jpg
等價於：
C:/Users/CLi/AppData/Local/Temp/WindowsLiveWriter1627300719/supfiles52F410/wangdan-se-436963[2].jpg
URI中問什麽本地文件file後面跟三個斜杠？
URI的結構為：
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]
如果有host，前面需要加//，因此對於http或https等網絡地址來說會寫成：
這樣看上去很自然。如果是文件的話，文件沒有host，所以中間的host部分就不要了，就變成了:
因為如果沒有host的話，第一個[]的內容就不存在了，這種同意的寫法有一個標準叫CURIE。
什麽是http協議
簡介：
http協議是Hyper Text JTransfer Protocol,即超文本闡述協議的縮寫。是用來從萬維網服務器傳輸超文本到本地瀏覽器的傳送協議，基於TCP/IP通信協議來傳輸數據。http協議工作於客戶端-服務器架構上，瀏覽器作為http客戶端通過url向http服務器端發送請求，服務器接收到請求後，向客戶端發送請求。
HTTP的URL：
http使用統一資源標識符URI來傳輸數據和建立連接。而URL是一種特殊類型的URI。
完整的URL包含下面幾個部分：
協議：該URL的協議部分為“https”，標識網頁使用的是https協議，在internet中可以使用多種協議（http,https,ftp等）
域名：一個URL中也可以使用IP作為域名，這個URL中域名為www.baidu.com
端口：跟在域名後，以“:”作為分隔符。如果省略端口，那麽將采用默認端口。
虛擬目錄：虛擬目錄不是必須部分。是從域名後第一個“/”開始到最後一個“/”為止。
文件名：從域名後的最後一個“/”開始到“？”為止，是文件名部分，如果沒有“?”,則是從域名後的最後一個“/”開始到“#”為止，是文件部分，如果沒有“？”和“#”，那麽從域名後的最後一個“/”開始到結束，都是文件名部分。文件名部分也不是一個URL必須的部分，如果省略該部分，則使用默認的文件名。
錨：從“#”開始到最後都是錨，錨也不是一個URL必須的部分。
參數：從“？”開始到“#”為止中間為參數，參數可以允許有多個參數，中間以“&”作為分隔符。
請求方法：
復制代碼
GET 請求指定的頁面信息，並返回實體主體。
HEAD 類似於get請求，只不過返回的響應中沒有具體的內容，用於獲取報頭
POST 向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST請求可能會導致新的資源的建立和/或已有資源的修改。
PUT 從客戶端向服務器傳送的數據取代指定的文檔的內容。
DELETE 請求服務器刪除指定的頁面。
CONNECT HTTP/1.1協議中預留給能夠將連接改為管道方式的代理服務器。
OPTIONS 允許客戶端查看服務器的性能。
TRACE 回顯服務器收到的請求，主要用於測試或診斷。
復制代碼
瀏覽器通過
file協議用於訪問本地計算機中的文件，好比通過資源管理器中打開文件一樣，需要主要的是它是針對本地的，即file協議是訪問你本機的文件資源。
http訪問本地的html文件，相當於將本機作為了一臺http服務器，然後通過localhost訪問的是你自己電腦上的本地服務器，再通過http服務器去訪問你本機的文件資源。
再簡單點就是file只是簡單請求了本地文件，將其作為一個服務器未解析的靜態文件打開。而http是在本地搭建了一個服務器再通過服務器去動態解析拿到文件。
其他區別：
file協議只能在本地訪問
本地搭建http服務器開放端口後他人也可以通過http訪問到你電腦中的文件，但是file協議做不到
file協議對應有一個類似http的遠程訪問，就是ftp協議，即文件傳輸協議。
file協議無法實現跨域
問題解決
開始通過file協議直接訪問index.html，在index.html中靜態引入index.js，在index.js中import test.js。在import的過程中需要http服務器去解析es6語法並添加header頭信息去跨域引入test.js，但是file協議相當於通過資源管理器靜態訪問index.html，中間的過程沒有http服務器參與解析，所以無法識別es6的import語法。
淺談幸運28源碼下載FIle協議與Http協議及區別