面試必會---模塊化

来源:https://www.cnblogs.com/LHLVS/archive/2020/02/13/12304932.html

概念 ​ 什麼是模塊, 一個模塊是一塊具有獨立功能的代碼, 可以是一個函數, 一個對象,甚至是一個字元串或數字,通常存儲為一個單獨的j s文件。 為什麼需要模塊化? 過去,j s很難編寫大型應用, 因為有以下兩個問題: 1. 全局變數污染 2. 難以管理的依賴關係 這兩個問題導致j s無法進行精細的 ...


概念

​ 什麼是模塊, 一個模塊是一塊具有獨立功能的代碼, 可以是一個函數, 一個對象,甚至是一個字元串或數字,通常存儲為一個單獨的j s文件。

為什麼需要模塊化?

過去,j s很難編寫大型應用, 因為有以下兩個問題:

  1. 全局變數污染
  2. 難以管理的依賴關係

這兩個問題導致j s無法進行精細的模塊劃分, 因為精細的模塊劃分會導致更多的全局污染以及更加複雜的依賴關係。

於是先後出現了兩大模塊化標準, 用於解決以上兩個問題:

  • commonJs => amd => cmd (被歷史的車輪碾碎)
  • ES6 Module

commonJs

目前只有node環境才支持commonJs模塊化標準, 所以要使用commonJs, 必須安裝node

Nodejs遵循ecmascript標準, 但是由於脫離了瀏覽器環境, 因此:

  1. 你可以在nodej s里使用ecmascript標準的任何語法或API,例如:迴圈,判斷,數組,對象等

  2. 你不能在nodej s里使用瀏覽器的web api ,例如: document對象, window對象, dom對象, Location,

    History 等等

Node 的全局變數叫做 global

commonJs標準和使用

node中的所有代碼都是在commonJs規範中運行的

具體規範如下:

  1. 一個Js文件就是一個模塊
  2. 如果一個模塊需要暴露一些數據或者功能,需要用module.exports = xxx 導出
  3. 如果一個模塊需要使用另一個模塊導出的內容,需要使用require("模塊路徑")
    1. 路徑必須以./或者../開頭
    2. 如果模塊文件尾碼名為.js, 可以省略尾碼名
    3. require函數返回的是模塊導出的內容
  4. 模塊中的所有全局代碼產生的變數,函數,均不會對全局造成任何污染,僅在模塊內使用
  5. 模塊具有緩存, 第一次導入模塊時會緩存模塊的導出, 之後再導入同一個模塊,直接使用之前緩存的結果

原理

為什麼使用module.exports可以實現導出?

node實際上是將模塊文件中的代碼放置到一個函數環境中執行, 該函數類似下麵的樣子

function(module) {  
  module.exports = {};  
  var exports = module.exports;  
  // 模塊中的代碼。
  return module.exports;  
}

ES6 Module

由於種種原因, commonjs 標準難以在瀏覽器中實現, 因此瀏覽器端一直沒有合適的模塊化標準,直到ES6標準出現, ES6規範了瀏覽器的模塊化標準,一經發佈,各大瀏覽器廠商紛紛在自己的瀏覽器中實現了該規範。

模塊引入

瀏覽器使用以下方式引入一個ES6模塊化文件

<script src="./xxx.js" type="module"></script>

模塊導出

  1. 模塊導出分為兩種, 基本導出和預設導出

    1. 基本導出

      1. export var a = 1 // 基本導出a=1  
        var c = 3; export {c} // 基本導出c=3. 
        var c = 3; export {c as temp} // 基本導出temp=3.  
        export {c as default} // 預設導出default = 3。
    2. 預設導出

      1. export default 3 // 預設導出default = 3

我們平時 直接 export default 一把梭。

模塊導入

import {a, b} from "模塊路徑"  
import {a as temp1 , b as temp2} from "模塊路徑"  
import {defalut as a} from "模塊路徑"
import c from "模塊路徑"  //相當於import {defalut as c} from "模塊路徑"  
import * as obj from "模塊路徑"
模塊導入時註意
  1. ES6 module 採用依賴預載入模式, 所有模塊導入均會提升到代碼頂部
  2. 不能將導入代碼放置到判斷, 迴圈中
  3. 導入的內容放置到常量中, 不可更改
  4. ES6 module使用了緩存, 保證每個模塊僅載入一次

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

更多相關文章
  • css sprite 俗稱:精靈圖,雪碧圖,指將整個頁面不同的圖片or圖標合併在一張圖上;優點:使用CSS Sprite 可以減少網路請求,提高網頁載入性能,不會出現網頁上端載入完畢下麵還在載入中這一問題 缺點:如果後期更改其中某一圖標,且其像素大小發生改變,需要重新對所有圖標進行定位 精靈圖製作: ...
  • 什麼是選擇器?選擇器的作用是通過它可以找到元素,把css樣式傳遞給元素!css選擇器主要分為:基本選擇器、屬性選擇器、組合選擇器與偽類選擇器四個大類!基本選擇器又分為:*通配符、標簽選擇器、class選擇器、id選擇器,在這裡需要註意的編程思想在css層疊樣式表中元素有且僅有一個id。註意以下幾點1... ...
  • css原理:1.優先原則=>後解析的內容會覆蓋之前解析的內容(所謂解析就是讀取的css樣式)2.繼承原則=>嵌套裡面的標簽擁有外部標簽的某些樣式,子元素可以繼承父元素的屬性 1》優先原則針對選擇器:a.同一個選擇器從上往下讀取執行css樣式 b.同一類選擇器從上往下執行 c.不同類型的選擇器優先順序,... ...
  • 在移動端做了個導航,長這樣 原來結構是用的span <span class="menu_icon"> <img src="img/icon_1.png"> <p>導航</p> </span> 綁定用的是jquery的.click $('.menu_icon').click(function () { ...
  • css是什麼?不需要瞭解太多文字類介紹,記住css是層疊樣式表,HTML是頁面結構,css負責頁面樣式,javascrt負責靜態頁面的交互。CSS能夠對網頁中元素位置的排版進行像素級精確控制,擁有對網頁對象和模型樣式編輯的能力。詳情參考css百度百科瞭解其發展歷史,語言特點與語言基礎等,也是有好處的... ...
  • 轉自:貓貓小屋--js獲取url後參數信息 摘要: 下文講述javascript中使用js代碼獲取url地址後面的參數值的方法分享,如下所示; 實現思路: 使用正則表達式對參數值進行匹配,獲取參數後的相關值 例: 獲取url:http://www.maomao365.com?name=test123 ...
  • 項目創建完成,啟動正常,接下來就是項目打包了。將測試Demo打包成exe桌面應用,點擊exe文件,運行項目。 書接上文,創建項目有三種方式 Git拷貝、直接創建;通過electron社群提供的命令行工具(CLI) electron-forge 創建項目,看起來對應的項目打包方式也應該有三種才對,但其 ...
  • 在經歷了Jsp實訓的慘痛教訓後,特意花了點時間學習Ajax,學完後自我感覺良好,於是寫瞭如下一個小框架: 1 /** 2 * frameAjax 3 * 4 * 參數: 5 * paramsObj: Json 6 * required params: 7 * type:請求參數類型(String) ...
一周排行
  • 枚舉是 C 中最有意思的一部分,大部分開發人員只瞭解其中的一小部分,甚至網上絕大多數的教程也只講解了枚舉的一部分。那麼,我將通過這篇文章向大傢具體講解一下枚舉的知識。我將從大家都瞭解的部分開始講解,然後再講解大家所不知道的或者瞭解很少的部分。 零、基礎知識 枚舉是由開發人員聲明的一種 值類型 ,它在 ...
  • 一. elasticsearch on windows 1.下載地址: https://www.elastic.co/cn/downloads/elasticsearch 如果瀏覽器下載文件慢,建議使用迅雷下載,速度很快。下載版本為7.5.2 2. 修改配置文件 下載後解壓,找到config\jvm ...
  • 最近因為” 新冠” 疫情在家辦公,學習了 ASP.NET Core MVC 網站的一些知識,記錄如下。 ...
  • Regex.Replace("<!--(.|[\r\n])*?-->",string.Empty) ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7743118.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第四個模式--組合模式。當我們談到這個模式的時候,有一個物件和這個模式很像,那就是“俄羅斯套娃”。“俄羅斯套娃”是 ...
  • 一、前言 Entity Framework(後面簡稱EF)作為微軟家的ORM,自然而然從.NET Framework延續到了.NET Core。 二、程式包管理器控制台 為了能夠在控制臺中使用命令行來操作EF,需要先安裝Microsoft.EntityFrameworkCore.Tools。 安裝 ...
  • 項目gitHub地址 點我跳轉 今天給大家帶來一個C#裡面的時間工具類,具體的直接看下麵代碼 1 using System; 2 3 namespace ToolBox.DateTimeTool 4 { 5 public static class DateTimeExtend 6 { 7 /// < ...
  • 《C# 6.0 本質論》 [作者] (美) Mark Michaelis (美) Eric Lippert[譯者] (中) 周靖 龐燕[出版] 人民郵電出版社[版次] 2017年02月 第5版[印次] 2017年02月 第1次 印刷[定價] 108.00元 【前言】 成功學習 C# 的關鍵在於,要盡 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7772184.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第五個模式--外觀模式。先從名字上來理解一下外觀模式,當看到“外觀”這個詞時,很容易想到“外表”這個詞語,兩者有著 ...
  • 在 C 中存在一個名叫靜態類型檢查的機制,這個機制可以讓編譯器幫助我們把類型不服的用法找出來,從而使得應用程式在運行期間加少一些類型檢查的操作。但是有時候我們還是需要進行運行期類型檢查,比如我們在設計框架時將方法的參數類型定義為 object ,那麼這時我們就有很大的可能需要將 object 類型的 ...
x