ES5和ES6模块化编程

简介: ES5和ES6模块化编程

ES5模块规范


每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数他文件不可见。

1、创建“module”文件夹

、类,都是私有的,对其


2、导出模块


创建01.js创建js方法


//创建js方法
// 定义成员:
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}
const multiply = function(a,b){
    return parseInt(a) * parseInt(b)
}
const divide = function(a,b){
    return parseInt(a) / parseInt(b)
}
// 导出成员:
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}

简写

//简写
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

3、导入模块


创建02.js调用01.js


//调用01.js
//引入模块,注意:当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)
const result1 = m.sum(1, 2)
const result2 = m.subtract(1, 2)
console.log(result1, result2)

4、运行程序


ES6模块化规范


因为ES6的模块化无法在Node.js中执行,需要用Babel编辑成ES5后再执行


1、导出模块

创建 es6模块化/userApi.js


export function getList() {
    console.log('获取数据列表')
}
export function save() {
    console.log('保存数据')
}

2、导入模块

创建 es6模块化/userComponent.js


//只取需要的方法即可,多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()


注意:这时的程序无法运行的,因为ES6的模块化无法在Node.js中执行,需要用Babel编辑成

ES5后再执行。

这里要

通过转换es5

就是有个命令叫babel es6 -d es622


3、运行程序

node es6模块化-dist/userComponent.js

ES6模块化的另一种写法


1、导出模块


创建 es6模块化/userApi2.js


export default {
    getList() {
        console.log('获取数据列表2')
    },
    save() {
        console.log('保存数据2')
    }
}

2、导入模块


创建 es6模块化/userComponent2.js


import user from "./userApi2.js"
user.getList()
user.save()
相关文章
|
2月前
|
存储 JavaScript 前端开发
[JS] ES Modules的运作原理
【9月更文挑战第16天】ES Modules(ECMAScript Modules)是 JavaScript 中的一种模块化开发规范,适用于浏览器和 Node.js 环境。它通过 `export` 和 `import` 关键字实现模块的导出与导入。模块定义清晰,便于维护和测试。JavaScript 引擎会在执行前进行静态分析,确保模块按需加载,并处理循环依赖。ES Modules 支持静态类型检查,现代浏览器已原生支持,还提供动态导入功能,增强了代码的灵活性和性能。这一规范显著提升了代码的组织和管理效率。
|
6月前
|
缓存 JavaScript 前端开发
JavaScript模块化:CommonJS与ES Modules的对比与使用
【4月更文挑战第22天】本文探讨了JavaScript模块化的两种规范——CommonJS和ES Modules。CommonJS适用于Node.js,通过`require`同步加载模块,而ES Modules(ES6模块)用于前端,支持异步加载和静态导入导出。CommonJS有缓存,ES Modules无缓存。在选择时,Node.js环境常用CommonJS,但趋势正转向ES Modules,前端项目推荐使用ES Modules以利用其优化性能的优势。
|
6月前
|
JavaScript 前端开发
说说你对ES6模块化的理解?和commonJS的区别?
ES6模块化(也称为ES2015模块化)是ECMAScript 6中引入的一种模块化规范,用于在JavaScript中组织和管理代码。它提供了一种更优雅和强大的方式来定义、引入和导出模块。
79 0
|
编解码 JavaScript 前端开发
ES6 模块化编程 详解
ES6新特性 模块化编程详解。
112 0
|
JavaScript 前端开发
模块化开发:CommonJS、AMD 和 ES6 Modules 的区别与使用方式
在前端开发中,模块化开发是一种重要的编程方法,它可以帮助我们更好地组织和管理代码,提高代码的可维护性和复用性。在JavaScript中,有多种模块化开发的标准,包括CommonJS、AMD和ES6 Modules。让我们逐一了解它们的区别和使用方式:
207 0
|
JavaScript 前端开发 编译器
CommonJS与ES6 Module的本质区别
文章主要讨论了CommonJS和ES6 Module两种JavaScript模块系统的核心区别,包括动态与静态解决依赖方式,值拷贝与动态映射,以及如何处理循环依赖的问题。
220 0
|
缓存 自然语言处理 JavaScript
commonJS和ES6模块化的区别
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
|
缓存 JavaScript 开发者
CommonJs和es6的Module的区别
CommonJs和es6的Module的区别
|
JSON 前端开发 JavaScript
常用ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性归纳
js ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性归纳
354 0
|
JavaScript
es6 Module和commonjs的区别
es6 Module和commonjs的区别