vue - ES6模塊化、promise、webpack打包（所在在學的朋友們先看這篇，看了不吃虧）

来源:https://www.cnblogs.com/heymar/archive/2022/04/28/16202022.html
-Advertisement-
Play Games

首先我要說明一下，沒錯，還是沒有進入vue，劉備請諸葛亮三次都可以了吧，我這也是第三次了，也絕對是最後一次了，我應經摸透了因為，最後的webpack打包加上一個git學了過後我就去vue了。 為什麼要說先看這篇，其實跟我們今天的主題webpack沒有太大關係，昨天學了一下webpack，其實內容沒多 ...


首先我要說明一下，沒錯，還是沒有進入vue，劉備請諸葛亮三次都可以了吧，我這也是第三次了，也絕對是最後一次了，我應經摸透了因為，最後的webpack打包加上一個git學了過後我就去vue了。

為什麼要說先看這篇，其實跟我們今天的主題webpack沒有太大關係，昨天學了一下webpack，其實內容沒多少，webpack的內容無非就是參考文檔去怎麼做，然後最主要的js、html生成、css、字體圖標、圖片來打包包括開啟一個webpack伺服器。但是我們今天的主要內容，但是我要說的是比較重要的是，在學的朋友們，正在學包括後面在學的朋友們，作為一個程式員還在手寫筆記嗎？我也是昨天才知道手寫筆記的就我一個，我都驚了，我那麼大一本筆記本，又長又厚的，我都做了那麼多了，居然現在才知道，屬實太虧了，畢竟也是那個道理，如果後面工作不可能去翻書吧，優不優雅暫且不說，這耗費的時間就離譜雖然我自己做的筆記，我大概知道哪個知識點在哪一頁。

那麼既然不太推薦手寫筆記了，那要用什麼來做呢，程式員必備——Markdown！而他比較好的一款編輯器——Typora，昨天也花了一點時間瞭解了一下它有哪些功能哪些快捷鍵，確實這樣做筆記方便查找，而且省時最主要的，我原來學內容可能內容沒多少，但是也挺多的，滿打滿算都是一天的時間，反正現在有了這個，特別是代碼部分，有時候我還要手寫代碼，這個直接一個截圖的事情，你可以自己想想節省了多少時間。

至於我以前在筆記本上的，我的打算是，暴力一點，直接全 背 下 來。

1.

回到我們今天的主題上來，首先第一個內容說一下vue的前提基礎，首先es6的模塊化，首先知道commanjs吧，是我們node的規則，require、exports都是他的語法，但他不是標準推薦的，真正的正統標準是ES6模塊化，而且commanjs只支持後端，而es6支持前後端。

他的一個語法規則：

1.1

導入為import 暴露共用成員export 沒有了s

如果我們node.js要使用es6模塊化的話首先版本號是要大於14.15.1的，其次需要在package.json添加“type”：“module”

關於他的導入導出一共有兩大類，第一類是預設導入導出。

export default 和 import 自定義 from ‘路徑’ 註意路徑必須添加尾碼js跟我們的commanjs不一樣

let x = 19
let y = 29
function show() {}

export default  {
    x,
    show
}
import m1 from './預設導出.js'

console.log(m1);

然後按需導出 export const a = 1 就是誰要導出就在定義它的前面加一個export

按需導入 import ｛a｝ from ‘’ 這個要註意的是花括弧裡面的名字不再自定義必須和我們導出的一致，但是我們可以用as重命名

export let x = 10
export function show() {console.log('hello vue');}
import {x, show} from './按需導出.js'


console.log(x, show);

最後是我們的直接導入，直接導入其實也挺常用比如css，或者js直接就是一段代碼，可以直接導入進來不使用，他們自己有自己的用處

for(let i = 0; i < 5; i++) {
    console.log(i);
}
import './直接導入代碼.js'

有一說一，這個代碼塊跟typora一樣，看來這一步棋走對了。

2.

然後看到我們的promise這個構造函數

2.1

先瞭解一下回調地獄的問題吧，什麼叫做回調地獄，就是我們多層嵌套回調函數，本身就是回調函數，還一層一層嵌套，他執行了才去執行裡面的，其實也就是我們的高階函數，那麼這個時候就有問題了，我們要改上面的代碼後面也要跟著改，而且大量冗餘的代碼可讀性也差。

2.2

然後說回到我們的promise，沒錯它本身是個構造函數，然後他的prototype上面有一個.then的方法，所以他的實例是可以用的，這個.then是個什麼方法，他就是用來預先指定成功或者失敗的回調函數的，成功是必選參數，失敗是可選。

比如我們下麵通過一個案例來說，基於回調來讀取內容，一個文件夾下麵三個txt，以前的做法不用多說了的通過fs讀完一個又在裡面嵌套一個，這就是典型的回調地獄。

我們的fs模塊不支持promise的方法所以我們需要下載一個包then-fs

import thenfs from 'then-fs'


thenfs.readFile('./files/1.txt', 'utf-8').then((r1) => console.log(r1))
thenfs.readFile('./files/2.txt', 'utf-8').then((r2) => console.log(r2))
thenfs.readFile('./files/3.txt', 'utf-8').then((r3) => console.log(r3))

 

 

 可以看到通過promise的方法能夠輸出出來，但是有一個問題順序不太對，這裡是因為非同步的原因，後面會說到

2.3

先來解決我們的順序問題，怎麼樣可以讓他們按照順序來呢？

想通一件事情，我們的thenfs讀取出來是一個promise的實例對象所以我們才能在後面用then這個方法，如果我們在成功的回到函數里先輸出然後返回下一個promise實例對象呢？

import thenfs from 'then-fs'

thenfs.readFile('./files/1.txt', 'utf8').then((r1) => {
    console.log(r1);
    return thenfs.readFile('./files/2.txt', 'utf8')
}).then((r2) => {
    console.log(r2);
    return thenfs.readFile('./files/3.txt', 'utf8')
}).then((r3) => console.log(r3))

 

 

 2.4

捕獲錯誤

我們promise有一個捕獲錯誤的方法，防止前面因為什麼東西發生錯誤，而導致整盤崩潰，當然如果你大概知道是哪裡可能有點問題也可以吧這個方法前移，那麼這樣就會繼續執行後面的

import thenfs from 'then-fs'

/* thenfs.readFile('./files/11.txt', 'utf-8').then((r1) => {
    console.log(r1);
    return thenfs.readFile('./files/2.txt', 'utf-8') //這裡不做失敗的回調函數，當我們成功後是不是又通過return反悔了一個thenfs創造的promise的實例對象
}).then((r2) => {
    console.log(r2);
    return thenfs.readFile('./files/3.txt', 'utf-8')
}).then((r3) => {
    console.log(r3);
}).catch((err) => {
    console.log(err.message);
}) */

thenfs.readFile('./files/11.txt', 'utf-8')
.catch((err) => {
    console.log(err.message);
})
.then((r1) => {
    console.log(r1);
    return thenfs.readFile('./files/2.txt', 'utf-8') //這裡不做失敗的回調函數，當我們成功後是不是又通過return反悔了一個thenfs創造的promise的實例對象
})
.then((r2) => {
    console.log(r2);
    return thenfs.readFile('./files/3.txt', 'utf-8')
})
.then((r3) => {
    console.log(r3);
})

 

 

 2.5

promise.all方法這是用來發起並行的非同步操作的，什麼意思，就是一個等待機制，多個非同步操作，等待他們全部完成才會去執行then裡面的函數

import thenfs from 'then-fs'

let arr =[
    thenfs.readFile('./files/1.txt', 'utf-8'),
    thenfs.readFile('./files/2.txt', 'utf-8'),
    thenfs.readFile('./files/3.txt', 'utf-8')
]

Promise.all(arr).then((r) => console.log(r))

 

 

 註意輸出為一個數組，並且輸出順序使我們數組裡面的執行順序。

與之對應的還有一個promise.race方法，他與all一起都是發起並行操作，但是他是一旦有人執行完，就輸出，意思就是最快的那一個

2.6

來一個案例，封裝一個promise獲取文件的函數，這個函數最主要的是要搞懂我們的回調與then之間這的關係，return 一個 new promise創造一個實例，而他只是形式上的promise實例對象，還需要往裡面添加一個函數，這個函數兩個參數就是用來接受then的兩個成功和失敗的函數，所以這兩個參數是函數，再在裡面來讀取，fs的操作步驟，也有失敗和結果去把結果給到剛纔對應的兩個參數

import fs from 'fs'
function getTxt(Fpath,type) {
    return new Promise(function(suc, wro)  {
        fs.readFile(Fpath, type, (err, result) => {
            if(err) return wro(err.message)
            suc(result)
        })
    })
}

getTxt('./files/1.txt', 'utf8').then((r1) => {
    console.log(r1)
},(err) => {
    console.log(err)
})

 

 2.7

簡化非同步操作 。

剛纔我們的不管是all方法還是按順序執行的函數是不是都是為了能讓我們的非同步操作能按照順序執行出來，下麵是不僅執行了非同步操作而且還能按照順序執行出來的簡化步驟用到await、async

import thenfs from 'then-fs'

async function getFile() {
    const r1 = await thenfs.readFile('../promise/files/1.txt', 'utf-8') 
    console.log(r1);
    const r2 = await thenfs.readFile('../promise/files/2.txt', 'utf-8') 
    console.log(r2);
    const r3 = await thenfs.readFile('../promise/files/3.txt', 'utf-8') 
    console.log(r3);
}

getFile()

function中用到await，函數就必須被async修飾。

不加await就是promise實例，加了就能返回值直接輸出。

在await第一個之前是同步輸出，後面都為非同步任務

import thenfs from 'then-fs'
console.log('A');
async function getFile() {
    console.log('B')
    const r1 = await thenfs.readFile('../promise/files/1.txt', 'utf-8') 
    const r2 = await thenfs.readFile('../promise/files/2.txt', 'utf-8') 
    const r3 = await thenfs.readFile('../promise/files/3.txt', 'utf-8') 
    console.log(r1,r2,r3);
    console.log('D');
}
getFile()
console.log('C');

這個你認為輸出出來是多少？

ABCr123最後D

3.

事件流，時間迴圈我自己口述一遍吧，之前也說過的，我們的任務分為同步任務和非同步任務，同步任務會優先在主棧道上執行完，非同步任務會根據宿主環境在那裡執行，但是非同步任務都是有回調函數的，所以執行了就會把函數放到非同步任務的排列隊伍，等到同步任務執行完，就會來按照順序執行非同步任務。

3.1

js又把非同步任務進一步劃分了巨集任務和微任務。

巨集任務：比如ajax、計時器、文件操作等

微任務：promise那幾個方法、prcess.nextTick等

在非同步任務中會優先執行巨集任務再去檢查這個巨集任務裡面的微任務，然後再去執行巨集任務這樣一個迴圈，來看一個經典面試題，你看輸出的什麼？

console.log('1');
setTimeout(() => {
 console.log('2');   
 new Promise (function(resolve) {
     console.log('3');
     resolve()
 }).then(function() {
     console.log('4');
 })
});
new Promise(function(resolve) {
    console.log('5');
    resolve()
}).then(function() {
    console.log('6');
})
setTimeout(() => {
    console.log('7');   
    new Promise (function(resolve) {
        console.log('8');
        resolve()
    }).then(function() {
        console.log('9');
    })
   });

正確答案：156234789

這個最大的難點我覺得在於當我們進入一個作用域後，會是一個全新的作用域，在這個裡面再去重新看待裡面的一些任務，就相當於你現在在這個作用域裡面就是全局作用域

4.

進入webpack。

webpack本質上是一個第三方模塊包，他可以起到壓縮、翻譯、打包、降級的作用。

webpack環境準備：

yarn init 初始化

yarn add webpack

在package裡面添加執行命令“build” ：“webpack”

反正webpack始終要記住一點他只支持js，其他的都需要去文檔上看怎麼轉過來。

而且他的操作也比較規律化，先定義好文件，css要有css文件，字體圖標要有字體圖標文件，然後要跟我們的入口文件掛上鉤，像img圖片、字體圖標這些需要動態創建在入口文件裡面，css直接導入，包括更改預設出入口，載入器、插件這些都是在webpack.config.js這個配置文件裡面改。

另外的註意點就是我們的圖片處理只針對於img標簽，背景圖片會被css解析的，但是最好還是要做圖片處理，因為如果type為asset的話，會以8kb作為一個區分


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • vue - git
    今天差不多從中午開始下午一點才開始學的，把git學了一大半了，還好任務不是很多，但是我上午用的時間挺值的，因為我去搞了個cnblogs的背景主題，就是你們現在所看到的這套，這個沒搞明白有一通研究的，只不過現在已經搞熟悉了，添加那些參數，不得不說挺強大的，這個自己編輯頁面的功能，我最滿意的這套主題，是 ...
  • 面試必問的8個CSS響應式單位,你知道幾個？
    大家好，我是半夏👴，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關註➕ 點贊 👍 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關註公眾號：搞前端的半夏,瞭解更多前端知識! 點我探索新世界！ 原文鏈接 ==>http://sylblog.xin/archi ...
  • Html簡單標簽
    前言 記錄一下學習html，初識前端，記錄一些html的常用標簽，雖然簡單，但會經常用到。 <h1> 標題標簽</h1> 標題標簽 <p>段落標簽</p> 段落標簽 換行標簽</br> 換行標簽 水平線標簽</hr> 特殊符號 &nbsp; &lt; &gt; &amp; &yen; &copy; ...
  • JS初識
    567網頁的組成: html:超文本標記語言,網頁結構層. CSS:層疊樣式表,網頁的樣式. Javascript:腳本語言,規定了網頁交互行為. 什麼是JS? JS是基於對象和事件驅動的解釋型腳本語言. JS特點: 基於對象:JS中萬物皆對象.JS中的任何內容都由一個對象來描述.任何操作都是由對象 ...
  • 如何完美地去除表格的“雙線”
    想必大家在做網頁表格的時候一定遇到過這種情況吧 表格出現了“雙線”，但是我們需要一個“單線”的表格 比較常用的解決方案 解決方案1： 在表格的樣式中添加border-collapse: collapse;以設置邊框合併（如果border-collapse的屬性值為collapse，則會忽略 bord ...
  • javascript生成一棵樹
    一 、通過雲開發平臺快速創建初始化應用 1.創建相關應用模版請參考鏈接： Hexo博客框架—輕量、一令部署 2.完成創建後就可以在github中查看到新增的Hexo倉庫 二 、 本地編寫《賽博朋克風格》個人博客 1.將應用模版克隆到本地 ● 首先假定你已經安裝了Git、node，沒有安裝請移步nod ...
  • pm2 常用命令
    先說一些廢話 之前學習Nodejs項目的時候使用了pm2作為生產環境的進程管理工具，最近伺服器崩了需要重啟一些服務，發現有些命令記得不是特別清楚， 所以這裡寫一篇文章幫助自己記憶整理一下pm2的常用命令，後續有需要查閱一下即可~ 常用命令 進入bin目錄啟動：pm2 start www / pm2 ...
  • Hexo博客框架—輕量、一令部署
    為什麼要使用Hexo Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。Hexo支持Github Flavored Markdown的所有功能, 甚至可以整合Octopress的大多數插件. 並自己也擁有 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類