成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

對于JS模塊的簡單了解

hiYoHoo / 3126人閱讀

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

require、import、export CommonJS規(guī)范

require()和module.exports

使用立即執(zhí)行函數(shù)的寫法，外部代碼無法讀取內(nèi)部的_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規(guī)范

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

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

（1） 輸出變量或者函數(shù)、類

輸出變量

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

另一種寫法，優(yōu)先考慮下面這種寫法

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

export {firstName, lastName, year}

輸出一個函數(shù)

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

（2） export語句輸出的接口，與其對應的值是動態(tài)綁定關(guān)系，可以取到模塊內(nèi)部實時的值

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

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

// default.js

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

// 非匿名函數(shù)
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}

// 函數(shù)或類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" // 不會報錯，可正常調(diào)用foo函數(shù)

（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"

模塊的繼承

假設(shè)有一個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))

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83925.html

相關(guān)文章

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

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

    tinylcy 評論0 收藏0

  • Webpack 熱更新機制

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

    mikasa 評論0 收藏0

  • Express 實戰(zhàn)（二）：Node.js 基礎(chǔ)

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

    soasme 評論0 收藏0

  • 了解Webpack嗎？

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

    Cympros 評論0 收藏0

  • chrome擴展應用開發(fā)快速科普

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

    MockingBird 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<