欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端模块化(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规范

项目结构:
前端模块化(CommenJS规范、ES6规范)
首先创建四则运算.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));

运行程序测试
前端模块化(CommenJS规范、ES6规范)



3. ES6模块化规范

写法一

项目结构:
前端模块化(CommenJS规范、ES6规范)
首先创建工具.js,作为工具类来使用,其中定义并导出两个方法

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

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

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

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

get();
save();

运行测试:发现报错了
前端模块化(CommenJS规范、ES6规范)
这是因为nodejs默认不支持es6的import语法,我们需要用Babel转换成ES5语法再执行

初始化项目成一个nodejs项目

npm init -y

前端模块化(CommenJS规范、ES6规范)编写.babelrc配置文件

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

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

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

前端模块化(CommenJS规范、ES6规范)
然后就可以进行转码,我们将在项目根目录下创建src目录,然后将测试.js工具.js移入,再输入如下命令转码

babel src -d dist

然后打开新生成dist/测试.js运行测试
前端模块化(CommenJS规范、ES6规范)
成功显示结果!


写法二(推荐)

工具.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

相关标签: 大前端进阶