資訊專(zhuān)欄INFORMATION COLUMN
0x000 概述
模塊化是一個(gè)大型項(xiàng)目的必然趨勢(shì)。
0x001 命名導(dǎo)出可以使用export關(guān)鍵字，導(dǎo)出你要導(dǎo)出的東西，可以導(dǎo)出常量、變量、函數(shù)、類(lèi),
// 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)出類(lèi)
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)入需要使用{}包裹，可以同時(shí)導(dǎo)入多個(gè)命名導(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"; // 同時(shí)導(dǎo)入多個(gè)命令導(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)出
因?yàn)槟J(rèn)導(dǎo)出導(dǎo)出的其實(shí)是匿名導(dǎo)出，所以導(dǎo)入的時(shí)候可以使用任意名字導(dǎo)入，并且無(wú)需使用{}包裹
import num from "./export" import func from "./export" import arrowFunc from "./export" import generatorFunc from "./export" import class0 from "./export"0x005 全部導(dǎo)入
將一個(gè)模塊的所有導(dǎo)出都導(dǎo)入到別名中
import * as MyModule from "./export"0x006 重定向
將另一個(gè)模塊的東西當(dāng)做當(dāng)前模塊直接導(dǎo)出
export {var0} from "./export"
export * from "./export"
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108620.html
摘要：參考資料前端模塊化詳解完整版入門(mén)近一萬(wàn)字的語(yǔ)法知識(shí)點(diǎn)補(bǔ)充徹底搞清楚中的和和詳解 前言 前端的模塊化之路經(jīng)歷了漫長(zhǎng)的過(guò)程，想詳細(xì)了解的小伙伴可以看浪里行舟大神寫(xiě)的前端模塊化詳解(完整版)，這里根據(jù)幾位大佬們寫(xiě)的文章，將模塊化規(guī)范部分做了匯總和整理，希望讀完的小伙伴能有些收獲，也希望覺(jué)得有用的小伙伴可以點(diǎn)個(gè)贊，筆芯。 什么是模塊 將一個(gè)復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個(gè)塊(文件)...
摘要：下載地址安裝一個(gè)好用的命令行工具在環(huán)境下，系統(tǒng)默認(rèn)的非常難用，所以我個(gè)人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎(chǔ)進(jìn)階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對(duì)于新人朋友來(lái)說(shuō)，想要自己去搞定一個(gè)E...
摘要：兩者對(duì)比就像下面這樣通過(guò)對(duì)象把函數(shù)向外開(kāi)放而使用的模塊就像下面通過(guò)導(dǎo)出方法當(dāng)然了，的模塊肯定是比匿名函數(shù)自執(zhí)行更加高級(jí)的一種封裝了。相比于匿名函數(shù)，模塊具有下面幾種特點(diǎn)。 什么是ES6模塊? 在ES6中，每個(gè)文件就是一個(gè)模塊，有自己的作用域。在一個(gè)文件里面定義的變量、函數(shù)、類(lèi)，都是私有的，對(duì)其他文件不可見(jiàn)。在看到這里的時(shí)候感覺(jué)很熟悉，這不就是匿名函數(shù)自執(zhí)行，然后一個(gè)個(gè)匿名函數(shù)放在一個(gè)個(gè)...
摘要：聲明三大關(guān)鍵字聲明變量語(yǔ)法語(yǔ)法聲明常量語(yǔ)法聲明變量特性支持函數(shù)作用域支持預(yù)解析所謂變量提升支持重復(fù)聲明同域同名變量函數(shù)作用域局部作用域預(yù)解析重復(fù)聲明聲明變量推薦特性支持塊作用域不支持預(yù)解析不支持重復(fù)聲明同域同名變量塊作用域局部作用域不支持預(yù) 聲明 三大關(guān)鍵字 聲明變量： var （ES5語(yǔ)法） let （ES6語(yǔ)法） 聲明常量： const (ES6語(yǔ)法) var 聲明變量...
摘要：前端培訓(xùn)初級(jí)階段語(yǔ)法變量值類(lèi)型運(yùn)算符語(yǔ)句前端培訓(xùn)初級(jí)階段內(nèi)置對(duì)象函數(shù)基礎(chǔ)內(nèi)容知識(shí)我們會(huì)用到。模塊定義加載模塊繼承中的繼承依賴(lài)于原型鏈繼承。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。 該文為前...
閱讀 1059·2021-09-26 10:15
閱讀 2174·2021-09-24 10:37
閱讀 2641·2019-08-30 13:46
閱讀 2704·2019-08-30 11:16
閱讀 2484·2019-08-29 10:56
閱讀 2648·2019-08-26 12:24
閱讀 3533·2019-08-23 18:26
閱讀 2716·2019-08-23 15:43
