1. 简介

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

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

因此引入了两种模块化规范：

CommonJS模块化规范
ES6模块化规范

2. CommonJS规范

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

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

项目结构：

首先创建四则运算.js，作为工具类来使用，其中定义四个方法，然后导出所有方法

//四个方法
const sum = function (a, b) {return a + b
}
const sub = function (a, b) {return a - b
}
const mul = function (a, b) {return a * b
}
const div = function (a, b) {return a / b
}//导出
// module.exports = {//     sum: sum,
//     sub: sub,
//     mul: mul,
//     div: div
// }//可简写成
module.exports = {sum,sub,mul,div
}

然后创建test.js引入上述模块测试

const fun = require('./四则运算.js');console.log(fun.sum(1,2));
console.log(fun.sub(1,2));
console.log(fun.mul(1,2));
console.log(fun.div(1,2));

运行程序测试

3. ES6模块化规范

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

写法一

项目结构：

首先创建工具.js，作为工具类来使用，其中定义并导出两个方法

export function get(){console.log("获取");
}export function save(){console.log("保存");
}

然后创建工具.js，用来导入上述方法并测试

//导入方法
import {get,save} from './工具.js';get();
save();

运行测试：发现报错了

这是因为nodejs默认不支持es6的import语法，我们需要用Babel转换成ES5语法再执行

初始化项目成一个nodejs项目

npm init -y

编写.babelrc配置文件

{"presets": ["es2015"],"plugins": []
}

然后安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

然后就可以进行转码，我们将在项目根目录下创建src目录，然后将测试.js和工具.js移入，再输入如下命令转码

babel src -d dist

然后打开新生成dist/测试.js运行测试

成功显示结果！

写法二（推荐）

工具.js修改为：

export default {get() {console.log("获取");},save() {console.log("保存");}
}

测试.js修改为：

//以对象形式导入
import tool from './工具.js';tool.get();
tool.save();

然后同样进行转码执行即可

前端模块化（CommenJS规范、ES6规范）相关推荐

es6 混合commjs_前端模块化——CommonJS、ES6规范
什么叫模块化? 对于一个复杂的程序,将其按照一定的规范封装成几个文件块,每一块向外暴露一些接口,但是块的内部数据是私有的,块与块之间通过接口通信.这个过程称为模块化. 模块化的好处 CommonJS ...
java-初识大前端Node.js、ES6、Npm、Babel、模块化规范、WebPack、Vue-element-admin本地安装问题及解决、Git安装及配置、uni-app
VS code安装安装成功配置自动补齐Emment Node.js node.js下载网址: http://nodejs.cn/ 安装成功! 概念 Node.js发布于2009年5月,由Ryan ...
浅析：前端模块化开发规范
浅析:前端模块化开发规范早期的模块化解决方案 NameSpace:命名空间模式匿名闭包:IIFE模式模块模式:IIFE+依赖传参 ES6之前的模块化解决方案 CommonJS模块化规范 AMD模 ...
【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范区别」
在JS最早出现的时候,是为了实现一些简单的功能,但随着浏览器的不断发展,对于JS的要求也越来越高,需要实现一些较为复杂的功能.这个时候开发者为了维护方便,会把不同功能的模块抽离出来写入单独的 js 文 ...
JS模块化（CommomJS规范和ES6规范）
目录标题简介 CommonJS规范 ES6模块化规范简介随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. Javascript模 ...
前端模块化CommonJS、AMD、CMD、ES6
一.前端模块化什么是模块化?为什么前端需要模块化? js代码量激增,放在同一个文件里面,不容易维护,而且牵一发而动全身. 这时候就需要将代码按照逻辑放在不同的文件里面,按照一定的语法规则,遵循特定的 ...
[ES6] 细化ES6之 -- 前端模块化
前端模块化前言前端开发领域发展到目前阶段: 零件化 - 最终呈现给用户是一个完整的产品(由各个零件组成的) 降低生产成本 – 多人协作(每个人各司其职) 降低使用成本 - 各个零件之间是低耦合的 ...
模块化 AMD与CMD 规范
JavaSript模块规范 - AMD规范与CMD规范介绍 2014-02-19 13:12:01 分类: JavaScript JavaSript模块化在了解AMD,CMD规范前,还是需要先来简单 ...
7.前端开发规范 eslint-jslint规范
前端的开发规范 1.目录构建的规范命名原则: 简洁比如: src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包不使用复数比如: 不使用 imgs docs 根 ...

前端模块化（CommenJS规范、ES6规范）

目录

1. 简介

2. CommonJS规范

3. ES6模块化规范

写法一

写法二（推荐）

前端模块化（CommenJS规范、ES6规范）相关推荐

最新文章

热门文章