es6基礎0x019：模塊化

khlbat 發布于2019-08-26 12:24 / 2595人閱讀

0x000 概述

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

0x001 命名導出

可以使用export關鍵字，導出你要導出的東西，可以導出常量、變量、函數、類,

// export.js

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

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

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

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

class class1{}
export {class1} // 先聲明后導出，需要使用 {} 包裹
export {class1 as Person} // 別名導出

0x002 命名導入

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

import {var0} from "./export" // 導入 var0
import {let0} from "./export" // 導入 let0
import {const0} from "./export" // 導入 const0
import {func1} from "./export" // 導入 func1
import {funcx} from "./export" // 導入 funcx
import {class0} from "./export" // 導入 class0

import {var0, let0} from "./export"; // 同時導入多個命令導出
import {Person as class1} from "./export"; // 導入后取別名

0x003 默認導出

默認導出可以使用default關鍵字，可以匿名導出

export default 1 // 默認導出常量
export default function () {} // 默認導出
export default () => {}
export default function* () {}
export default class {}

0x004 默認導出

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

import num from "./export"
import func from "./export"
import arrowFunc from "./export"
import generatorFunc from "./export"
import class0 from "./export"

0x005 全部導入

將一個模塊的所有導出都導入到別名中

import * as MyModule from "./export"

0x006 重定向

將另一個模塊的東西當做當前模塊直接導出

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

云服務器 GPU云服務器 python基礎模塊 ES6 es6-系列 ES6入門

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

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

【JS基礎】一文看懂前端模塊化規范

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

HelKyle 2019-08-23 17:09 評論0 收藏0
前端基礎進階（十五）：詳解 ES6 Modules

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

Lowky 2019-08-21 18:31 評論0 收藏0
javascript基礎之模塊

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

keithyau 2019-08-22 15:43 評論0 收藏0
前端基礎_ES6

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

wuyangnju 2019-08-23 14:39 評論0 收藏0
前端培訓-初級階段（13） - 類、模塊、繼承

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

luodongseu 2019-08-26 13:43 評論0 收藏0