有關es6的模塊化

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/23/12230863.html

假如有兩個文件:app.js和config.js app.js為主文件要去引用config這個模塊 以前學習node時使用的模塊導出: es6中的模塊導出 方法一 兩種可以混合使用 方法二 通過 export 導出的成員必須通過解構賦值按需載入 或者通過 的形式載入所有通過 export 關鍵字導出 ...


假如有兩個文件:app.js和config.js

app.js為主文件要去引用config這個模塊

以前學習node時使用的模塊導出:

需求:導出三個成員,分別是 foo: bar f: function num: 10

exports.foo = 'bar'
exports.f = function () {
  
}
exports.num = 10

es6中的模塊導出

方法一

export const foo = 'bar'
export const f = function () {
  
}
export const num = 10

兩種可以混合使用
方法二

const foo = 'bar'
const f = function () {
  
}
const num = 10

export {
  foo,
  f,
  num
}

通過 export 導出的成員必須通過解構賦值按需載入
或者通過import * as 變數名的形式載入所有通過 export 關鍵字導出的介面成員
通過 export default 載入導出的成員必須通過 import 變數名 from '模塊標識' 進行載入
export 和 export default 可以共存

import config from './config'
import { foo, num } from './config'
import * as config from './config'
import { foo } from './config'

預設導出

config.js

// 相當於 module.exports = function () {}
export default function () {
  console.log('fff')
}

app.js:

// 這種方式會去找被載入模塊中通過 export default 導出的成員
import defaultConfig from './config'

defaultConfig任意指定

最後通過模板字元串將它們列印出來

console.log(default: ${defaultConfig}, foo: ${foo}, all: ${allConfig})


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

更多相關文章
  • 數據分組 目前為止的所有計算都是在表的所有數據或匹配特定的 WHERE 子句的 數據上進行的。提示一下,下麵的例子返回供應商 1003 提供的產品數目 但如果要返回每個供應商提供的產品數目怎麼辦?或者返回只提供 單項產品的供應商所提供的產品,或返回提供10個以上產品的供應商怎 麽辦? 這就是分組顯身 ...
  • 聚集函數 我們經常需要彙總數據而不用把它們實際檢索出來,為此MySQL提 供了專門的函數。使用這些函數,MySQL查詢可用於檢索數據,以便分 析和報表生成。這種類型的檢索例子有以下幾種。 確定表中行數(或者滿足某個條件或包含某個特定值的行數)。 獲得表中行組的和。 找出表列(或所有行或某些特定的行) ...
  • Ream--(objc)寫事務精簡方案 地址: REALM-- Realm官方提供的的寫事務有兩種方式: A[realm beginWriteTransaction]; // ... [realm commitWriteTransaction]; B [realm transactionWithBl ...
  • 這幾天用自己目前掌握的安卓開發知識製作了一個記事本小程式,在這裡分享一下開發流程,希望可以幫到和我一樣的初學者。 開發工具為Android studio,後臺語言為java,使用的資料庫為安卓的SQLite資料庫,功能及效果圖如下: 主界面,長按可刪除: 點擊加號添加: 主頁面點擊查看,此頁面含修改 ...
  • 如果你剛剛說開心,說雞凍,說嘚瑟,那你完了,你高興得太早了,畢竟小程式佈局的技術,Flex都還沒開始學,等學會再嘚瑟吧。 Flex是Flexible Box的縮寫,意為”彈性佈局”,可以支持從左到右,從上到下...... ...
  • 載入靜態資源 複習以前學的express express怎麼用? 如何獲取請求? 如何處理響應? 如何對向外暴露靜態資源? express核心:中間件:如何理解? 中間件:用來處理 http 請求的一個具體的環節(可能要執行某個具體的處理函數) 中間件一般都是通過修改 req 或者 res 對象來為 ...
  • 對babel進行複習
  • 不做解釋,代碼一看就懂 app.js config.js ...
一周排行
  • 1. 泛型Generic 1.1 引入泛型:延遲聲明 泛型方法聲明時,並未寫死類型,在調用的時候再指定類型。 延遲聲明:推遲一切可以推遲的。 1.2 如何聲明和使用泛型 泛型方法:方法名稱後面加上尖括弧,裡面是類型參數 類型參數實際上就是一個類型T聲明,方法就可以用這個類型T了。 如下所示: pub ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7903617.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第三個模式--迭代器模式,先從名字上來看。迭代是遍歷的意思,迭代器可以理解為是遍歷某某的工具,遍歷什麼呢?在軟 件設 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7928521.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第四個模式--觀察者模式,先從名字上來看。觀察者模式可以理解為既然有“觀察者”,那肯定就有“被觀察者”了。“觀察者” ...
  • 先看核心代碼: public List<DataEntity> SearchShopSalesReport(DateTimeOffset? dateFrom, DateTimeOffset? dateTo,string groupBy) { var query = data.DataEntity / ...
  • 首先新建一個項目,名稱叫Caliburn.Micro.ActionConvertions 然後刪掉MainWindow.xaml 然後去app.xaml刪掉StartupUri這行代碼 其次,安裝Caliburn.Micro,Caliburn.Micro.Core,這兩個Nuget包,如下圖 然後新 ...
  • 一文帶你瞭解 C DLR 的世界 在很久之前,我寫了一片文章 "dynamic結合匿名類型 匿名對象傳參" ,裡面我以為DLR內部是用反射實現的。因為那時候是心中想當然的認為只有反射能夠在運行時解析對象的成員信息並調用成員方法。後來也是因為其他的事一直都沒有回過頭來把這一節知識給補上,正所謂亡羊補牢 ...
  • ​ 在C#8.0中,針對介面引入了一項新特性,就是可以指定預設實現,方便對已有實現進行擴展,也對面向Android和Swift的Api進行互操作提供了可能性。下麵我們來看看該特性的具體規則與實現。 一、主要應用場景: 在不破壞影響已有實現的情況下,可以添加新成員。這解決了在第三方已經大量使用了的介面 ...
  • 前言 通常在應用程式開發到正式上線,在這個過程中我們會分為多個階段,通常會有 開發、測試、以及正式環境等。每個環境的參數配置我們會使用不同的參數,因此呢,在ASP.NET Core中就提供了相關的環境API,方便我們更好的去做這些事情。 環境 ASP.NET Core使用ASPNETCORE_ENV ...
  • 擱置了幾天,工作忙的一塌糊塗,今天終於抽空來繼續看看MVC的知識。先來看看MVC的路由是如何處理的。以下為替代的路由: app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{ ...
  • 多用www.bing.com國際版解決代碼報錯 代碼運行的時候,報異常,國內的搜索引擎一搜, 浮誇的廣告太多,解決方案准確性不足, 盜版又很嚴重(導致一錯皆錯),方案未及時更新等詬病。 www.bing.com國際版可以關聯到: (1). 外國官網,可以獲得官方的解決方案。 (2). stackov ...
x