es6基础0x019：模块化

khlbat 发布于2019-08-26 12:24 / 2494人阅读

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"

私有云混合云 python基础模块 ES6 es6-系列 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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