ES6的模块化

﹏ヽ暗。殇╰゛Y 2021-07-25 02:08 381阅读 0赞

# 一 点睛 #

模块化就是把代码进行拆分，方便重复利用。类似Java中的导包，要使用一个包，必须先导包。而 JS 中没有包的概念，换来的是模块。

模块功能主要由两个命令构成：export 和 import

export 命令：用于规定模块的对外接口。

import 命令：用于导入其他模块提供的功能。

一些注意点：

*  模块导入导出各种类型的变量，如字符串，数值，函数，类。
 *  导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
 *  不仅能导出声明还能导出引用（例如函数）。
 *  export 命令可以出现在模块的任何位置，但必需处于模块顶层。
 *  import 命令会提升到整个模块的头部，首先执行。

# 二 实战 #

1 hello.js

export const util = {
        sum(a, b) {
            return a + b;
        }
    }
    
    // 对应import可对其改名
    export default {
        sum1(a, b) {
            return a + b;
        }
    }
    
    const util1 = {
        sum(a, b) {
            return a + b;
        }
    }
    
    // export 不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
    export { util1 }

2 user.js

let name = "jack"
    var age = 21
    function add (a,b){
        return a+b;
    }
    
    export { name, age ,add}

3 main.js

import util from "./hello"
    import { name, age, add } from "./user"
    // 这里改名为abc
    import abc from "./hello"
    
    util.sum(1, 2);
    console.log(name);
    add(1, 3);
    abc.sum1(3, 5)

发表评论取消回复

表情：

评论列表（有 0 条评论，381人围观）

还没有评论，来说两句吧...

相关阅读

相关【JavaScript模块化】6-ES6模块化教程

ES6-Babel-Browserify使用教程 1. 定义package.json文件 { "name" : "es6-bab

蔚落/ 2024年04月03日 12:48/ 0 赞/ 25 阅读

相关 Es6 模块化

默认导出与导入 // 创建了一个js文件，文件名module let a = 10; let b = 20; let c = 30;

超、凢脫俗/ 2022年12月06日 12:55/ 0 赞/ 156 阅读

相关关于ES6的模块化

历史上，JavaScript一直没有自己模块体系（module），无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言如java、python等都具备这

Myth丶恋晨/ 2022年11月27日 07:09/ 0 赞/ 131 阅读

相关详解ES6模块化

[参考博文][Link 1] 第一步：初始化项目，使得能被npm管理 npm init -y 第二步：配置.babelrc Babel提供babel-c

ゝ一纸荒年。/ 2022年11月13日 15:27/ 0 赞/ 179 阅读

相关 JS模块化6_ES6模块化教程

ES6-Babel-Browserify模块化教程 0. ES6模块化语法暴露模块： - 分别暴露：export 暴露内容 - 统一暴

偏执的太偏执、/ 2022年09月12日 15:56/ 0 赞/ 185 阅读

相关 ES6模块化

文章目录一、模块化说明二、引入模块数据语法三、Babel的使用一、模块化说明模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小

r囧r小猫/ 2022年09月07日 14:59/ 0 赞/ 180 阅读

相关 ES6中的模块化

过去，JS很难编写大型应用，因为有以下两个问题： 1. 全局变量污染 2. 难以管理的依赖关系这些问题，都导致了JS无法进行精细的模块划分，因为精细的模块划分会导致更

╰+攻爆jí腚メ/ 2022年08月30日 05:28/ 0 赞/ 152 阅读

相关 es6模块化开发

如果不是默认导出则要用\{\}导入 5.文件导入导出在一个util.js文件里写入 export let sum=(x,y)=>{ retur

青旅半醒/ 2022年05月09日 06:36/ 0 赞/ 238 阅读

相关 ES6 模块化

1/ 定义模块方法一：(对应的引入方法二) export const a = 1; export const b = 2; export l

男娘i/ 2022年04月13日 06:13/ 0 赞/ 242 阅读

相关 ES6的模块化

一点睛模块化就是把代码进行拆分，方便重复利用。类似Java中的导包，要使用一个包，必须先导包。而 JS 中没有包的概念，换来的是模块。模块功能主要由两个命令构成：

﹏ヽ暗。殇╰゛Y/ 2021年07月25日 02:08/ 0 赞/ 382 阅读