ES6 模块化编程 详解

目录

一、基本介绍

二、基本原理示意图 

三、传统CommonJS实现模块化编程

        1.介绍 : 

        2.实例 : 

四、ES6新特性实现模块化编程

        1.介绍 : 

        2.实例 : 


一、基本介绍

        (1) ES6新特性——模块化编程,用于解决传统非模块化开发中出现的"命名冲突", "文件依赖"等问题。

        (2) 类似于Java中可以引入其他已经写好的模块完成开发,JS也引入了模块化编程;开发者只需要实现核心的业务逻辑即可

        (3) JavaScript中使用"Module"(/ˈmɑːdʒuːl/)来实现模块化编程。


二、基本原理示意图 

                在Java中,可以将多个功能相关的.java文件放在同一个包下进行统一管理,比如Java后端三层经典架构(Web层-Service层-DAO层);JS中的模块Module就是类似于这样的一种机制,其目的都是实现“分门别类,各司其职”。
                JS模块化编程的基本原理示意图,如下所示 : 


三、传统CommonJS实现模块化编程

        1.介绍 : 

        (1) CommonJS是一种 JavaScript 语言的模块化规范,它规定每个.js文件就是一个模块,有自己的作用域。在文件中定义的变量、函数、类或对象,都是私有的,对其他.js文件(即其他模块)都不可见

        (2) CommonJS使用格式——
             module.exports = {} / exports = {}导出模块;(首先在要使用的其他模块中写下导出语句)
             
let / const var_name = require("__.js")导入模块。(然后在当前模块中写下导入语句)

        2.实例 : 

                定义calculate.js,用来模拟要使用的其他模块,需要在calculate.js文件中定义导出语句。
                calculate.js代码如下 : 

//def some variables and constants
let color = "cyan";
const PI = 3.1415926;
const E = 2.71828182;//The function used to calculate the sum of two numbers
let plus = function (number1, number2) {return parseInt(number1) + parseInt(number2);
}//The function used to calculate the difference of two numbers
let minus = function (number1, number2) {return parseInt(number1) - parseInt(number2);
}//def a object
let blogger = {name: "Cyan_RA9",age: 21,write() {console.log("I relish writing blogs.")}
}//export the data of this .js file out(导出模块)
module.exports = {plus: plus,minus: minus,eValue: E,PIValue: PI
}//若导出的名称和本身属性名一致,可以使用ES6新特性———对象简写:
exports = {plus,minus,E,PI
}

                定义testCalculate.js,用来模拟需要导入其他模块的模块,在testCalculate.js中定义导入语句,导入calculate.js模块。
                testCalculate.js代码如下 : 

//import the data of other .js file in(导入模块)
let calculate = require("./calculate");     //默认携带.js尾缀
//亦可以通过解构赋值来导入模块中的部分数据
let { plus } = require("./calculate");
let { color } = require("./calculate");/*导入模块后,通过"名称."的形式来调用,类似于JS中对象的调用。*/
console.log(calculate.plus(11, 5));
console.log(calculate.minus(11, 5));
console.log(plus(11, 5));console.log(calculate.eValue);
console.log(calculate.PIValue);
console.log(color);/*若IDEA没有报出语法错误,说明导入成功!若导入模块失败,使用其他模块中的内容会报错———Missing require() statement*/

四、ES6新特性实现模块化编程

        1.介绍 : 

        ES6新特性实现模块化编程,在使用上和传统CommonJS原则一致,都是先写导出语句以导出模块,再写导入语句来导入模块。

        导出模块可以使用三种方式——
        (1) export {}; (2) export 定义名称 = ; (3) export default {};

        导入模块有对应的两种方式——
        (1) import {} from "__.js"; (2) import 名称 from "__.js"; [方式(2)主要用于对应第三种导出语句]

        PS : 

        1> ES6的模块化无法在Node.js中执行,需要用Babel转码ES5之后再执行。

        2> export可以导出一切JS变量,包括基本类型变量,函数,数组,对象等。

        2.实例 : 

                另定义calculate_EX.js,用来模拟要使用的其他模块,需要在calculate_EX.js文件中定义导出语句。
                calculate_EX.js代码如下 : 

//define some variables and constants
let symbol = "RA9";
let color = "cyan";//The function used to calculate the sum of three numbers
let plus = function (number1, number2, number3) {return parseInt(number1) + parseInt(number2) + parseInt(number3);
}//The function used to calculate the difference of two numbers
let minus = function (number1, number2) {return parseInt(number1) - parseInt(number2);
}//def a object
let blogger = {name: "Cyan_RA9",age: 21,write() {console.log("I relish writing blogs.")}
}//(1)第一种导出方式———批量导出(可以全部导出,也可以部分导出)
export {plus,minus,blogger,color
}
//(2)第二种导出方式———在定义时就直接导出(直接在定义语句前面加上export关键字)
export let divide = function (number1, number2) {return number1 / number2;
}//(3)第三种导出方式———default默认导出
export default {multiply(number1, number2) {return number1 * number2;},symbol
}

                另定义testCalculate_EX.js,用来模拟需要导入其他模块的模块,在testCalculate_EX.js中定义导入语句,导入calculate_EX.js模块。
                testCalculate_EX.js代码如下 : 

//(1) 通过解构赋值的形式导入模块// [可以选择性的导入部分数据]// [要求导入和导出时的名称一致]
import { blogger } from "./calculate_EX";
console.log(blogger);//(1) 通过解构赋值的形式导入模块
import {divide} from "./calculate_EX";
console.log(divide(12, 3));//(2) 通过定义名称的形式导入模块(对应导出模块的default导出语句)//该方式可用于解决命名冲突问题
import demoI from "./calculate_EX";
console.log(demoI.symbol);
console.log(demoI.multiply(11, 5));

        System.out.println("END-------------------------------------------------------------");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/122934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kubernetes(k8s)高可用搭建

目录 一、系统基础设置1.1、关闭防火墙1.2、关闭selinux1.3、关闭swap1.4、设置hostname1.5、将桥接的IPv4流量传递到iptables的链1.6、 时间同步1.7 配置开启 ipvs 的前提条件1.8、 安装iproute-tc和dig工具 二、所有master节点部署keepalived2.1 安装相关包和keepalived2.2配…

英语兔语法笔记(1)动词分类+动词时态

B站英语兔的语法课,强推!和学校里面的不同,通俗易懂,看过之后真的醍醐灌顶~ 英语兔语法网课https://www.bilibili.com/video/BV1XY411J7aG?p1&vd_source1d1be06bfa4daa398bc518a66de92cf8 一.动词分类 大致看一下就好&…

高阶数据结构图下篇

目录: 图的基本概念二深度优先遍历(DFS)广度优先遍历(BFS) kruskal(克鲁斯卡尔算法)Prim(普里姆算法)Dijkstra(迪杰斯特拉算法)Bellman-ford(贝尔曼-福特算法) flyod-war…

【Python百练——第1练】使用Python求100以内的所有偶数

作者:Insist-- 个人主页:insist--个人主页 作者简介:梦想从未散场,传奇永不落幕,持续更新优质网络知识、Python知识、Linux知识以及各种小技巧,愿你我共同在CSDN进步 欢迎点赞👍收藏&#x1f4c…

Python基础入门例程20-NP20 增加派对名单(一)(列表)

本专栏: Python365基础入门例程 作者:heda3 最近的博文: 1、Python基础入门例程19-NP19 列表的长度(列表)-CSDN博客 2、Python基础入门例程18-NP18 生成数字列表(列表)-CSDN博客 3、Pyth…

element的tabs组件使用问题解决

1.去除el-tabs组件自带的键盘切换功能 今天在使用element的tabs组件时&#xff0c;发现这个tab组件自带了按键盘左右方向&#xff0c;切换tab的功能&#xff0c;可以通过使用keydown.native.capture.stop去除该事件 <el-tabs v-model"editableTabsValue"type&qu…

vue2 系列:自定义 v-model

1. input 中的 v-model <!-- 表单双向绑定 --> <input :value"username" input"username $event.target.value" /> <!-- 等于 --> <input v-model"username" /> 2. 自定义组件 v-model <!-- 组件双向绑定 -->…

[Java/力扣100]判断两棵二叉树是否相同

我希望通过这道题&#xff0c;能进一步了解递归思想和“树是递归定义的”这句话 分析 我们的目的是写一个方法来检验两棵树是否相同 什么叫“两棵树相同”&#xff1f;——相同的位置存在相同的结点 有三种情况&#xff1a;1、两棵树一颗为空一颗不为空——不相同&#xff…

vue3中vue和@vue/runtime-core的区别

1. 区别 引用vue/runtime-core的api&#xff0c;在生产环境下数据不是响应式的&#xff0c;在开发环境是响应式的。所以会出现本地调试正常&#xff0c;打包部署后异常的情况。 2. 正确写法 import { defineComponent, Ref, ref } from vue;3. 错误写法 import { defineCom…

Docker网络

目录 1.原生网络 2.自定义网络 3.joined容器 4.端口映射 1.原生网络 docker network ls默认使用桥接模式&#xff0c;桥接到docker0上 docker run -d --name demo nginx yum install -y bridge-utils brctl show host模式&#xff0c;容器和宿主机共享同一网络栈&#xf…

人工智能与航天技术的融合:未来发展的新趋势

人工智能与航天技术的融合&#xff1a;未来发展的新趋势 随着科技的飞速发展&#xff0c;人工智能和航天技术已经成为人类探索未知世界的重要工具。本文将探讨这两个领域的结合点&#xff0c;以及未来的发展趋势和应用前景。通过了解这些技术&#xff0c;读者将更好地理解人工…

私有云:【10】VCenter安装win10

私有云&#xff1a;【10】VCenter安装win10 1、ESXI挂载win10镜像2、VCenter安装win102.1、创建虚拟机2.2、启动虚拟机 此WIN10用来作为以后的远程桌面 1、ESXI挂载win10镜像 2、VCenter安装win10 2.1、创建虚拟机 创建虚拟机 设置名称下一步 选择计算机资源 选择NFS存储 设置…

Android Glide判断图像资源是否缓存onlyRetrieveFromCache,使用缓存数据,Kotlin

Android Glide判断图像资源是否缓存onlyRetrieveFromCache&#xff0c;使用缓存数据&#xff0c;Kotlin import android.graphics.Bitmap import android.os.Bundle import android.util.Log import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity…

6.卷积神经网络

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 知识框架No.1 卷积层一、从全连接到卷积二、卷积层三、代码四、QA No.2 卷积层里的填充和步幅一、填充和步幅二、D2L代码注意点三、QA No.3 卷积层里的多输入和多输出通道一、多输入和多输出通道二、D2L代码注意点三、QA No.4 池化层…

华媒舍:日韩媒体发稿推广中8个关键因素帮助你实现突破

在当今经济全球化的时代背景下&#xff0c;日韩地域媒体影响力日益提高。对于需要在这一地区开展发稿推广的人来讲&#xff0c;掌握适度的思路和流程是十分重要的。下面我们就为大家介绍8个关键因素&#xff0c;以帮助你在日韩地域媒体发稿推广中实现突破。 1.科学研究行业在逐…

C++之C++11引入enum class与传统enum关键字总结(二百五十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

基于 Appium 的 Android UI 自动化测试!

自动化测试是研发人员进行质量保障的重要一环&#xff0c;良好的自动化测试机制能够让开发者及早发现编码中的逻辑缺陷&#xff0c;将风险前置。日常研发中&#xff0c;由于快速迭代的原因&#xff0c;我们经常需要在各个业务线上进行主流程回归测试&#xff0c;目前这种测试大…

Spring-底层架构核心概念

Spring底层核心组件 BeanDefinition BeanDefinition表示Bean定义&#xff0c;有很多属性用来描述Bean的特点&#xff1a; class&#xff0c;表示Bean类型 scope&#xff0c;表示Bean作用域&#xff0c;单例或原型等 lazyInit&#xff1a;表示Bean是否是懒加载 initMethod…

深度学习(4)---生成式对抗网络(GAN)

文章目录 一、原理讲述1.1 概念讲解1.2 生成模型和判别模型 二、训练过程2.1 训练原理2.2 损失函数 三、应用 一、原理讲述 1.1 概念讲解 1. 生成式对抗网络&#xff08;Generative Adversarial Network&#xff0c;GAN&#xff09;是一种深度学习模型&#xff0c;是近年来复杂…

私有云:【6】VCenter安装SqlServer

私有云&#xff1a;【6】VCenter安装SqlServer 1、VCenter安装SqlServer1.1、通过模板创建虚拟机1.2、安装sqlserver服务 2、搭建sqlserver群集2.1、安装群集功能2.2、在ad域服务器创建共享文件夹&#xff0c;供集群选举使用 3、创建故障转移群集【只需安装一台即可】3.1、创建…