ES6 module

来源:http://www.cnblogs.com/unclekeith/archive/2017/07/08/7137047.html
-Advertisement-
Play Games

export export用於輸出模塊的對外介面。export命令只要處於模塊頂層就可以使用,也就是說,如果處於某個函數作用域、判斷語句、條件語句內,就會報錯。export命令有幾種輸出形式。 import export命令用於輸出模塊的對外介面,import命令用於引入其他模塊提供的功能介面。與e ...


export

export用於輸出模塊的對外介面。export命令只要處於模塊頂層就可以使用,也就是說,如果處於某個函數作用域、判斷語句、條件語句內,就會報錯。export命令有幾種輸出形式。

PS: export命令可用於輸出任何數據類型,可以是Number, String, Boolean, Null, Undefined, Array, Object, Function .... 以輸出函數與對象舉例

1. export var obj = { name: 'keith' } // 直接輸出

2. var obj = { name: 'keith' }
   export { obj }  // 使用該種形式輸出時需要添加大括弧
   export obj   // 不添加大括弧時會報錯,因為我們要輸出的是該對象的引用。註意是對該對象的引用,而不是拷貝。這也意味著在該模塊改變name屬性,會導致另一個模塊下name屬性的變化,這點與CommonJS不同,CommonJS只是對某個對象的拷貝
   var num = function () { return 123 }
   export { num }  // 正確
   export num // 報錯,輸出對num的引用,而不是直接輸出函數num

3. var obj = { name: 'keith' }
   export { obj as person }  // export命令支持介面的重命名

4  var obj = { name: 'keith' }
   export default obj
   // 輸出預設值時不需要添加大括弧, export default在一個模塊中只能使用一次,但export命令可以使用多次

   // export default的本質:就是將某個變數命名為default
   // export default num
   // 等同於 export { num as default }
   // import Num from './module.js'
   // 等同於 import { defualt as Num } from './module.js'

5  export { num, obj }
   // export命令處於模塊頂層的任何位置,都可以將變數輸出
   // 不管是用var聲明的變數,還是let聲明的變數
   // 在執行過程中export命令會被預設放置在整個模塊的最底層。
   var num = function () { return 123 };
   let obj = { name: 'keith' }
   // 相當於
   var num = function () { return 123 };
   var obj = { name: 'keith' }
   // ..函數、對象等其他數據類型
   // 被放置在模塊最底層
   export { name, obj }

import

export命令用於輸出模塊的對外介面,import命令用於引入其他模塊提供的功能介面。與export命令一樣,import命令只能用於模塊頂層,不能用於函數作用域、條件語句、判斷語句內。import命令有以下幾種形式。

1. import { num, obj } from './export.js'  // 模塊名,可以不添加.js尾碼,但需要寫配置文件,與Node知識相關
   // import入的介面名字,要與export出的名字對應
   console.log(num()) // 123
   console.log(obj.name) // 'keith'

2. import { obj as person } from './export.js'
   // 可以修改import進來的變數名
   console.log(person.name) // 'keith'

3. import * as $ from './export.js'
   // 使用*用於模塊的整體載入,並重命名為$對象.此時可以通過$對象取到export的對外介面
   console.log($.num()) // 123
   console.log($.obj.name) // 'keith'

4. import 'normalize.css'
   // 用於載入整個模塊,此時不需要添加變數名

5. let obj = { name: 'keith' }
   export default obj

   import person from './module.js'
   import boy from './module.js'
   // 對應於export default 命令
   // 此時import進來的介面不需要添加大括弧
   // 且支持import時的任意命名
   console.log(person.name) // 'keith'
   console.log(boy.name) // 'keith'

6. console.log(obj.name)  // 'keith'
   import { obj } from './export.js'
   // 與export相反,import預設會被提升到模塊最頂層
   // 即
   import { obj } from './export.js'
   console.log(obj)

export與import的複合寫法

如果在某個模塊中引入了其他模塊,又導出了該模塊,可以採用export和import的複合寫法

1. 使用{}導出模塊
export { Hello, World } from './modules'
// 相當於
import { Hello, World } from './moudles'
export { Hello, World }

2. 改寫模塊的名字
export { Hello as Person } from './modules'
// 相當於
import { Hello as Person } from './modules'
export { Person }

3. 改寫預設export default模塊的名字
export { default as Person } from './modules'
// 相當於
import Person from './modoules'  // ./modules里的模塊是通過export default導出的
export { Person }


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

-Advertisement-
Play Games
更多相關文章
  • JScookie 常用的3個預設函數(庫)無標題文檔記住用戶名學術或足球分析交流微信:chinamaths(進討論組) Don't hesitate to comment or add a like - Yours Bill Bill's技術博客 足球分析博客 足彩數據視頻 比爾極客日誌_博客園 比... ...
  • <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mappe ...
  • 代碼和特性在chrome49下測試有效。 文本渲染的本質是對文本節點的渲染,通過瀏覽器內置的對象Range可以獲得選擇的起始點、與終止點 getRangeObjec代碼如下 function getRangeObject(){ if(window.getSelection) { var select ...
  • flex佈局可以幫我們快速佈局一些區塊,實現你想要的效果,不用再去float,position之類的.我們在佈局網頁的時候很多時候都是一些特殊佈局,flex就能幫我快速去佈局,不需要去定位. 任何一個盒子都可以指定為flex佈局,但是要註意,設為 Flex 佈局以後,子元素的float、clear和 ...
  • canvas是html5的新標簽,是個可以繪製圖形的畫布,畫布的預設大小為300x150。在自定義繪製畫布大小的時候有註意的問題,就是 用樣式來設置高度和寬度的時候 比如 您的瀏覽器不支持H5畫布屬性 var canvas = document.getElementById("canvas"); v ...
  • 技術點:ES6+Webpack+HTML5 Audio+Sass 這裡,我們將一步步的學到如何從零去實現一個H5音樂播放器。 首先來看一下最終的實現效果:Demo鏈接界面: 接下來就步入正題: 抽離公共方法,在播放器中有很多可能需要抽離的公共方法如:點擊播放進度條和音量進度條時需要計算滑鼠距離進度條 ...
  • .text() //獲得或更改元素文本; .html() //獲得或更改元素標簽; .val() //獲得或更改input值; .css() //獲得或更改元素樣式; .click() //點擊觸發事件; .focus() //獲得焦點觸發事件; .blur() //失去焦點觸發事件; .keyup ...
  • 實際項目開發中,我們經常會用一些版本控制器來托管自己的代碼,今天就來總結下Git的相關用法,廢話不多說,直接開寫。 目的:通過Git管理github托管項目代碼 一、下載安裝Git 1、下載Git 官方地址為:https://git-scm.com/download/win 2、下載完之後,雙擊安裝 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...