面試必會---模塊化

来源: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) ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...