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

資訊專欄INFORMATION COLUMN

es6基礎(chǔ)0x019：模塊化

khlbat / 2620人閱讀

0x000 概述

模塊化是一個大型項目的必然趨勢。

0x001 命名導(dǎo)出

可以使用export關(guān)鍵字，導(dǎo)出你要導(dǎo)出的東西，可以導(dǎo)出常量、變量、函數(shù)、類,

// export.js

export var var0 = "var0" // 直接導(dǎo)出 var 聲明
export let let0 = "let0" // 直接導(dǎo)出 let 聲明
export const const0 = "const" // 直接導(dǎo)出 const 導(dǎo)出
export function func1() {} // 直接導(dǎo)出函數(shù)
export function* funcx() {} // 直接導(dǎo)出生成器函數(shù)
export class class0{} // 直接導(dǎo)出類

let variable = "variable" 
export {variable} // 先聲明后導(dǎo)出， 需要使用{} 包裹

function func2(){}
export {func2} // 先聲明后導(dǎo)出，需要使用 {} 包裹

function* funcx(){}
export {funcx} // 先聲明后導(dǎo)出，需要使用 {} 包裹

class class1{}
export {class1} // 先聲明后導(dǎo)出，需要使用 {} 包裹
export {class1 as Person} // 別名導(dǎo)出
0x002 命名導(dǎo)入

命名導(dǎo)入需要使用{}包裹，可以同時導(dǎo)入多個命名導(dǎo)出

import {var0} from "./export" // 導(dǎo)入 var0
import {let0} from "./export" // 導(dǎo)入 let0
import {const0} from "./export" // 導(dǎo)入 const0
import {func1} from "./export" // 導(dǎo)入 func1
import {funcx} from "./export" // 導(dǎo)入 funcx
import {class0} from "./export" // 導(dǎo)入 class0

import {var0, let0} from "./export"; // 同時導(dǎo)入多個命令導(dǎo)出
import {Person as class1} from "./export"; // 導(dǎo)入后取別名
0x003 默認(rèn)導(dǎo)出

默認(rèn)導(dǎo)出可以使用default關(guān)鍵字，可以匿名導(dǎo)出

export default 1 // 默認(rèn)導(dǎo)出常量
export default function () {} // 默認(rèn)導(dǎo)出
export default () => {}
export default function* () {}
export default class {}
0x004 默認(rèn)導(dǎo)出

因為默認(rèn)導(dǎo)出導(dǎo)出的其實是匿名導(dǎo)出，所以導(dǎo)入的時候可以使用任意名字導(dǎo)入，并且無需使用{}包裹

import num from "./export"
import func from "./export"
import arrowFunc from "./export"
import generatorFunc from "./export"
import class0 from "./export"
0x005 全部導(dǎo)入

將一個模塊的所有導(dǎo)出都導(dǎo)入到別名中

import * as MyModule from "./export"
0x006 重定向

將另一個模塊的東西當(dāng)做當(dāng)前模塊直接導(dǎo)出

export {var0} from "./export"
export * from "./export"

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

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

相關(guān)文章

  • 【JS基礎(chǔ)】一文看懂前端模塊化規(guī)范

    摘要：參考資料前端模塊化詳解完整版入門近一萬字的語法知識點(diǎn)補(bǔ)充徹底搞清楚中的和和詳解 前言 前端的模塊化之路經(jīng)歷了漫長的過程，想詳細(xì)了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版)，這里根據(jù)幾位大佬們寫的文章，將模塊化規(guī)范部分做了匯總和整理，希望讀完的小伙伴能有些收獲，也希望覺得有用的小伙伴可以點(diǎn)個贊，筆芯。 什么是模塊 將一個復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個塊(文件)...

    HelKyle 評論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（十五）：詳解 ES6 Modules

    摘要：下載地址安裝一個好用的命令行工具在環(huán)境下，系統(tǒng)默認(rèn)的非常難用，所以我個人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎(chǔ)進(jìn)階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對于新人朋友來說，想要自己去搞定一個E...

    Lowky 評論0 收藏0

  • javascript基礎(chǔ)之模塊

    摘要：兩者對比就像下面這樣通過對象把函數(shù)向外開放而使用的模塊就像下面通過導(dǎo)出方法當(dāng)然了，的模塊肯定是比匿名函數(shù)自執(zhí)行更加高級的一種封裝了。相比于匿名函數(shù)，模塊具有下面幾種特點(diǎn)。 什么是ES6模塊? 在ES6中，每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數(shù)、類，都是私有的，對其他文件不可見。在看到這里的時候感覺很熟悉，這不就是匿名函數(shù)自執(zhí)行，然后一個個匿名函數(shù)放在一個個...

    keithyau 評論0 收藏0

  • 前端基礎(chǔ)_ES6

    摘要：聲明三大關(guān)鍵字聲明變量語法語法聲明常量語法聲明變量特性支持函數(shù)作用域支持預(yù)解析所謂變量提升支持重復(fù)聲明同域同名變量函數(shù)作用域局部作用域預(yù)解析重復(fù)聲明聲明變量推薦特性支持塊作用域不支持預(yù)解析不支持重復(fù)聲明同域同名變量塊作用域局部作用域不支持預(yù) 聲明 三大關(guān)鍵字 聲明變量： var （ES5語法） let （ES6語法） 聲明常量： const (ES6語法) var 聲明變量...

    wuyangnju 評論0 收藏0

  • 前端培訓(xùn)-初級階段（13） - 類、模塊、繼承

    摘要：前端培訓(xùn)初級階段語法變量值類型運(yùn)算符語句前端培訓(xùn)初級階段內(nèi)置對象函數(shù)基礎(chǔ)內(nèi)容知識我們會用到。模塊定義加載模塊繼承中的繼承依賴于原型鏈繼承。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思想，我們開課啦（每周四）。 該文為前...

    luodongseu 評論0 收藏0

發(fā)表評論

0條評論

khlbat

男|高級講師

TA的文章

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