简介

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，Javascript不是一种模块化编程语言，它不支持"类"（class）（package）等概念，也不支持"模块"（module）。

CommonJS规范

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

1、创建“module”文件夹
2、创建 mokuai-common-js/四则运算.js

// 定义成员：
const sum = function(a,b){ return a + b }
const subtract = function(a,b){ return a - b }
const multiply = function(a,b){ return a * b }
const divide = function(a,b){ return a / b }

3、导出模块中的成员

// 导出成员：
module.exports = { sum: sum, subtract: subtract, multiply: multiply, divide: divide }

4、创建 mokuai-common-js/引入模块.js

//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)

CommonJS使用 exports 和require 来导出、导入模块。

ES6模块化规范

1、创建 mokuai-es6 文件夹
2、创建 src/userApi.js 文件，导出模块

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

3、创建 src/userComponent.js文件，导入模块

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

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

第二种写法

import user from "./userApi2.js"
user.getList()
user.save()

ES6使用 export 和 import 来导出、导入模块。

JS模块化（CommomJS规范和ES6规范）相关推荐

前端模块化（CommenJS规范、ES6规范）
目录 1. 简介 2. CommonJS规范 3. ES6模块化规范写法一写法二(推荐) 1. 简介随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来 ...
JS 模块化: CommonJS 与 ESM(ECMAScript Module) 的引用机制比较循环依赖解决方式
JS 模块化: CommonJS 与 ESM(ECMAScript Module) 的引用机制比较 & 循环依赖解决方式文章目录 JS 模块化: CommonJS 与 ESM(ECMAScr ...
Js模块化规范（commonJs、Es6模块化）
一.Js模块化常见的模块化规范: 1.CommonJS--nodeJS模块化规范规定: 每一个文件就是一个模块,拥有自己独立的作用域,变量,以及方法等(采用同步加载方式),对其他的模块都不可见. ...
基于前端Js模块化规范的粗浅应用
前言之前做项目时,由于刚起步,所以很多同事在Js的规范上写的很凌乱.又刚好自己在慕课网上接触了Js模块化的概念,顿时觉得怎么会有这么规范的写法.所以特别写篇博客,记录下. Js架构如下整个JS架构 ...
浅谈js模块化：commons、AMD、CMD、ES6几种模块化的用法及各自的特点
文章目录一个页面需要引入多个js文件引发的问题: 模块化的好处: 几种常用的模块化规范 1. commonJs 2. AMD 3. ES6 4.CMD 总结 js模块化是现在比较流行的一种用法,它能 ...
JS模块化（node.js模块化和es6模块化）
JS 模块化模块化概念模块化是指解决一个复杂问题时,自顶向下逐层把系统划分为若干模块的过程,模块是可组合.分解和更换的单元. 模块化可提高代码的复用性和可维护性,实现按需加载. 模块化规范是对代码 ...
浏览器端已支持 ES6 规范（包括 export import）
当然,是几个比较优秀的浏览器,既然是优秀的浏览器,大家肯定知道是那几款啦,我就不列举了,我用的是 chrome. 对 script 声明 type 为 module 后就可以享受 es6 规范所带来的 ...
ES6规范前后块级作用域与函数声明的缠缠绵绵
今天我们就以上面的这个例子来说一下,块级作用域与函数声明在ES6前后的纠葛,当然在ES6之前是没有块级作用域的,但为了与ES6统一,使文章更简明,所以把这对'{}'统一称为块级作用域. 开正题之前,还 ...
关于 JS 模块化的最佳实践总结
模块化开发是 JS 项目开发中的必备技能,它如同面向对象.设计模式一样,可以兼顾提升软件项目的可维护性和开发效率. 模块之间通常以全局对象维系通讯.在小游戏中,GameGlobal 是全局对象.在小程 ...

JS模块化（CommomJS规范和ES6规范）

目录标题

简介

CommonJS规范

ES6模块化规范

JS模块化（CommomJS规范和ES6规范）相关推荐

最新文章

热门文章