對于JS模塊的簡單了解

hiYoHoo 發布于2019-08-20 17:51 / 3127人閱讀

摘要：注意命令會忽略模塊的方法。這時，也可以將的屬性或方法，改名后再輸出上面代碼表示，只輸出模塊的方法，且將其改名為。

require、import、export CommonJS規范

require()和module.exports

使用立即執行函數的寫法，外部代碼無法讀取內部的_count變量

let module = (function() {
    let _count = 0
    let m1 = function() {
      console.log(_count)
    }
    
    let m2 = function() {
      console.log(_count + 1)
    }
    
    return {
        m1: m1,
        m2: m2
    }
})

ES6規范

使用export導出，用于規定模塊的對外接口

一個模塊是一個獨立文件，文件內的所有變量或函數或類外部無法獲取，如果希望獲取到，必須使用export關鍵字

（1）輸出變量或者函數、類

輸出變量

// profile.js
export let firstName = "Mc"
export let lastName = "IU"
export const year = 2017

另一種寫法，優先考慮下面這種寫法

let firstName = "Mc"
let lastName = "IU"
const year = 2017

export {firstName, lastName, year}

輸出一個函數

function v1() { }
function v2() { }
export {
    v1 as namedV1, // as關鍵字重命名
    v2
}

（2） export語句輸出的接口，與其對應的值是動態綁定關系，可以取到模塊內部實時的值

export let foo = "baz"
setTimeout(() => foo = "baz", 500)
// 輸出foo值為bar，500毫秒之后變為baz

（3） export default命令，默認輸出

// default.js

// 匿名函數
export default function() {
  console.log("foo")
}

// 非匿名函數
export default function foo() {
  console.log("foo")
}

// 另一種寫法
function foo() {
  console.log("foo")
}

export default foo

default后不能跟變量聲明語句

// 錯誤
// export default let a = 1
let a = 1
export default a

輸出類

export default class {}

import Name from "Myclass"
let o = new Name()

（4）需要注意的正確的寫法

// 錯誤寫法
// ①export 1
// ②let m = 1; export m

// 變量的export正確寫法
export let m = 1

let m = 1
export {m}

let n = 1
export {n as m}

// 函數或類export正確寫法
export function f() {}

function f() {}
export {f}

使用import導入，用于獲取其他模塊提供的功能

使用export命令定義了模塊的對外接口后，其他JS文件就可以通過import來加載這個模塊

（1）引入變量

// main.js
import {firstName, lastName, year} from "./profile"

function setName(element) {
  element.textContent = firstName + " " + lastName
}
// 同樣可重命名
import {lastName as listame} from "./profile"

（2） import具有提升效果

foo()
import {foo} from "my_module" // 不會報錯，可正常調用foo函數

（3）整體加載

// circle.js
function area(radius) {
  return Math.PI * radius * radius
}
function circumference(radius) {
  return 2 * Math.PI * radius
}

// main.js
import {area, circumference} from "./circle" // 逐個加載

area(4)
circumference(14)

import * as circle from "./circle" // 整體加載

circle.area(4)
circle.circumference(14)

（4）引入默認導出

// 默認導出
export default function crc32() {}

import anyName from "crc32"

// 非默認導出（注意大括號）
export function crc32() {}

import {crc32} from "crc32"

模塊的繼承

假設有一個circleplus模塊，繼承了circle模塊：

// circleplus.js
export * from "circle" // 繼承了circle的所有屬性和方法
export let e = 2.718

export default function(x) {
  return Math.exp(x)
}

上面代碼中的export ，表示再輸出circle模塊的所有屬性和方法。注意export 命令會忽略circle模塊的default方法。
然后，上面代碼又輸出了自定義的e變量和默認方法。

這時，也可以將circle的屬性或方法，改名后再輸出：

// circleplus.js
export {area as circleArea} from "cricle"

上面代碼表示，只輸出circle模塊的area方法，且將其改名為circleArea。

加載方法如下

// math.js
import * as math from "circleplus"

import exp from "circleplus"

console.log(exp(math.e))

云服務器 GPU云服務器 js實現的簡單特效簡單js做的特效簡單的js提示框簡單的上傳圖片js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83925.html

從 IIFE 聊到 Babel 帶你深入了解前端模塊化發展體系

摘要：我覺得那時他可能并沒有料到，這一規則的制定會讓整個前端發生翻天覆地的變化。前言作為一名前端工程師，每天的清晨，你走進公司的大門，回味著前臺妹子的笑容，摘下耳機，泡上一杯茶，打開 Terminal 進入對應的項目目錄下，然后 npm run start / dev 或者 yarn start / dev 就開始了一天的工作。當你需要進行時間的轉換只需要使用 dayjs 或者 momentj...

tinylcy 2019-05-23 17:33 評論0 收藏0
Webpack 熱更新機制

摘要：聯想到我在微信小程序上的開發體驗，真心覺得如果有熱更新機制的話，開發效率要高很多。熱更新示例下面通過例子來進一步解釋熱更新機制。想必作為前端大佬的你，工作中應該用過 webpack，并且對熱更新的特性也有了解。如果沒有，當然也沒關系。下面我要講的，是我對 Webpack 熱更新機制的一些認識和理解，不足之處，歡迎指正。首先：熱更新是啥？熱更新，是指 Hot Module Re...

mikasa 2019-08-23 14:05 評論0 收藏0
Express 實戰（二）：Node.js 基礎

摘要：而通過實現名為的標準模塊，完美的解決了模塊導入問題。通常都被稱為包管理器，而這也是它最大的特色。例如，接受請求發送響應。該模塊主要處理文件相關內容，其中大多數都是文件讀寫功能。在上一篇文章中，我們簡單的介紹了 Node.js 。了解到它基于 JavaScript、天生異步、擁有大量的第三方類庫。本文將會在之前的基礎上，對 Node.js 進行更深入的介紹。其中主要內容包括： Nod...

soasme 2019-08-20 18:53 評論0 收藏0
了解Webpack嗎？

摘要：你了解嗎核心概念的核心概念大致分為四個入口出口插件，是一個打包模塊化的工具，專注構建模塊化項目。優點只更新變更內容，以節省寶貴的開發時間。在構建過程中，將引用的靜態資源路徑修改為上對應的路徑。可以通過在啟動時追加參數來實現提取公共代碼。你了解Webpack嗎？核心概念 Webpack的核心概念大致分為四個：入口、出口、loader、插件，是一個打包模塊化js的工具，專注構建模塊化項...

Cympros 2019-08-23 18:29 評論0 收藏0
chrome擴展應用開發快速科普

摘要：擴展應用模塊功能介紹擴展應用由很多部分組成，其中主要模塊為為了避免由于翻譯原因導致的問題，因此在下文中對相關模塊的稱呼一律采用上面的英文。附錄官方開發文檔英建議有英文閱讀能力的人閱讀此文檔。概述本文通過對chrome插件的各個部分進行快速的介紹，從而讓大家了解插件各個部分的關系，并且知道如何將其進行組裝成一個完整的chrome插件。由于chrome官方文檔中對于如何從零開發一個c...

MockingBird 2019-08-22 16:07 評論0 收藏0