前端模块化(CommenJS规范、ES6规范)
程序员文章站
2022-06-22 13:53:09
目录1. 简介2. CommonJS规范3. ES6模块化规范写法一写法二(推荐)1. 简介随着网站逐渐变成”互联网应用程序”,嵌入网页的Javascript代码越来越庞大,越来越复杂。Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript不是一种模块化编程语言,它不支持”类”(class),包(package)等概念,也不支持”模块”(module)。因此引入了两种模块化规范:Commo...
1. 简介
随着网站逐渐变成”互联网应用程序”,嵌入网页的Javascript代码越来越庞大,越来越复杂。
Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript不是一种模块化编程语言,它不支持”类”(class),包(package)等概念,也不支持”模块”(module)。
因此引入了两种模块化规范:
-
CommonJS
模块化规范 -
ES6
模块化规范
2. CommonJS规范
项目结构:
首先创建四则运算.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模块化规范
写法一
项目结构:
首先创建工具.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();
然后同样进行转码执行即可
本文地址:https://blog.csdn.net/qq_45173404/article/details/114260716
上一篇: 日本九大知名的便利店 Popular上榜 全家便利店数量繁多
下一篇: vue-$nextTick