模块化

　　模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

一、浏览器使用ES6模块化方式一

　　使用script标签，将type属性设置为module，然后在script中书写代码。

1 <script type="module">

2     import * as app from "./app.js";

3 </script>

1.1 模块化的好处

  • 防止命名冲突

  • 代码复用

  • 高维护性

1.2 ES6模块化语法

　　模块化功能只要有两个命令构成：export和import。

  • export命令用于规定模块的对外接口

  • import命令用于输入其他模块提供的功能

1.3 ES6暴露模块数据

1.3.1 分别暴露

　　index1.js

1 //暴露数据：export

2 export let person = '张三';

3

4 export function sayHi(){

5     console.log("你好我是张三");

6 };

　　index.html

1 <body>

2     <script type="module">

3         //引入index1模块

4         import * as index1 from "./index1.js";

5         console.log(index1);

6     </script>

7 </body>

　　注：这样的写法在本地会出现跨域问题，通过IP去访问，相当于是通过本地的服务器去访问就不会了，不要通过file协议去访问。也可使用Live Server之类的小型服务器来打开就可以避免以上问题。

1.3.2 统一暴露

　　index2.js

1 let person = '张三';

2

3 function sing(){

4     console.log("我会唱歌");

5 };

6 //统一暴露

7 export {person, sing};//花括号里边是要暴露的数据

　　index.html

1 <body>

2     <script type="module">

3         //引入index2模块

4         import * as index2 from "./index2.js";

5         console.log(index2);

6     </script>

7 </body>

1.3.3 默认暴露

　　index3.js

1 //可以暴露任意类型，对象居多

2 export default {

3     person: '张三',

4     coding: function (){

5         console.log("我在敲代码");

6     }

7 }

　　index.html

1 <body>

2     <script type="module">

3         //引入index3模块

4         import * as index3 from "./index3.js";

5         console.log(index3);

6     </script>

7 </body>

　　对于这样一个结构，我们如果想要使用里边的属性或者方法就需要再多加一个default。

1 <body>

2     <script type="module">

3         //引入index3模块

4         import * as index3 from "./index3.js";

5         index3.default.coding();

6     </script>

7 </body>

1.4 ES6引入模块数据语法

1.4.1 通用导入方式

import * as 变量名 from "模块路径";

1.4.2 解构赋值形式

　　如果有相同的数据名，我们可以给其中一个添加一个别名。

1 import {要暴露的数据名, 要暴露的数据名} from "模块路径";

2 //例

3 //分别暴露

4 import {person,sayHi} from "./index1.js";

5 //起别名（统一暴露），因为和上边分别暴露的person重名了需要起别名

6 import {person as ren, sing} from "./index.js";

7 console.log(ren,sing);

　　解构赋值对于默认暴露，不能直接使用default必须给它起一个别名。

1 import {default as 别名} from "模块路径";

2 //例（固定写法）

3 import {default as index3} from "./index3.js";

4 console.log(index3);

1.4.3 简便形式

　　注意：简便形式只能针对默认暴露。

1 import 变量名 from "模块路径";

2 //例

3 import index3 from "./index3.js";

二、浏览器使用ES6模块化方式二

　　使用一个script中的src属性引一个入口文件，然后设置type属性为module。

1 <script src="./app.js" type="module"></script>

三、babel对ES6模块化代码转换

　　前边提到的两种使用模块化的方式都存在兼容性的问题，并且ES6模块化还不能直接对npm安装的一些模块进行导入。因此我们在项目当中不会这么引入，而是使用babel做一个转化。

　　babel是一个JavaScript编译器，它能够将比较新的ES6语法转换成浏览器能够识别的ES5语法。

3.1 安装工具

  • babel-cli：babel的命令行工具

  • babel-preset-env：预设包，能够将最新的ECMAscript特性进行转换

  • browserify（webpack）：一个打包工具

　　1.初始化
npm init --yes
　　2.安装

　　-D：开发依赖

npm i babel-cli babel-preset-env browserify -D
　　3.对代码进行转化(局部安装)

　　第一个参数是原文件的目录

　　-d：将转换完的结果存在哪

　　--presets=babel-preset-env：传的参数，可以直接建一个文件

npx babel ES6/23-ES6模块化/js -d dist/js --presets=babel-preset-env

　　全局安装可以直接使用babel。

　　4.打包

　　第一个参数是原文件的目录

　　-o：输出

npx browserify dist/js/app.js -o dist/bundle.js
　　5.在页面上引用
1 <script src="../dist/bundle.js"></script>

四、ES6模块化引入NPM包

　　需求：使用jQuery对文件进行背景色修改。

　　要想使用npm包

　　1.安装所需包

npm i jquery

　　2.import 变量名 from "要导入的模块名";

import $ from "jquery";

ES6——模块化的更多相关文章

  1. ES6模块化

    关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...

  2. ES6模块化与常用功能

    目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...

  3. CommonJS、AMD、CMD和ES6模块化区别

    本文参考自:https://www.cnblogs.com/chenguangliang/p/5856701.html 1.CommonJS NodeJS是CommonJS规范的实现,webpack ...

  4. javascript ES6模块化

    一.将模块导出去 /* *将模块导出去 *a.js文件 */ const a=12; export default a; /* *将模块导出去 *b.js文件 */ const a=5; export ...

  5. ES6 模块化与 CommonJS 模块化

    ES6 模块化 import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口. export 可以有多个,export default 仅有一个 a.js 模块a文件 导出多个方 ...

  6. ES6 模块化(Module)export和import详解 export default

    ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...

  7. ES6模块化使用遇到的问题

    前言 最近在学习ES6模块化时,遇到了一些问题,通过查询相关资料得以解决,本篇随笔详细记录了解决方法. 具体内容 以下定义一个模块common.js 在test.html中引入上述定义的模块 运行上述 ...

  8. ES6模块化深入 debug

    引子: 2020.2.24.最近刚写完一个vue项目.项目用到ES6的模块化 想到之前写node项目用到过commonjs模块化 就想着把所有用到过的模块化技术 总结学习一下 在看阮一峰老师的 es6 ...

  9. 07 . 前端工程化(ES6模块化和webpack打包)

    模块化规范 传统开发模式主要问题 /* 1. 命名冲突 2. 文件依赖 */ 通过模块化解决上述问题 /* 模块化就是把单独的一个功能封装在一个模块(文件)中,模块之间相互隔离, 但是可以通过特定的接 ...

  10. js 模块化的一些理解和es6模块化学习

    模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理  5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...

随机推荐

  1. MySQL学习(1)---MySQL概述

    什么是数据库 概述 数据库(Database)是长期存储在计算机内有组织.大量.共享的数据集合.它可以供各种用户共享,具有最小冗余度和较高的数据独立性.数据库管理系统DBMS(Database Man ...

  2. Css3中自适应布局单位vh、vw

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  3. Linux Subsystem For Android 11!适用于Debian GNU/Linux的Android子系统，完美兼容ARM安卓软件！

    本文将讲述如何在Debian Stable 系统安装一个Android 11子系统,并且这个子系统带有Houdini可以兼容专为移动设备开发的ARM软件.在root权限下,编辑/etc/apt/sou ...

  4. C#-3 深入理解类

    一 类的概述(类是逻辑相关的数据和函数的封装,通常代表真实世界中或概念上的事物) 类是一种能存储数据并执行代码的数据结构,包含数据成员和函数成员. 数据成员存储类或类的实例相关的数据: 函数成员执行代 ...

  5. ASP.NET Core ：中间件系列（三）：中间件限流

    中间件 微软官网定义: 中间件 中间件意思就是处理请求和响应的软件: 1.选择是否将请求传递到管道中的下一个组件. 2.可在管道中的下一个组件前后执行工作. 对中间件类 必须 包括以下 具有类型为 R ...

  6. java.lang.ClassNotFoundException: org.springframework.web.filter.CharacterEncodingFilter 增样将jar包导入

    2021-9-30-17:28 遇到的一个bug.以前遇到过,这次又遇到.就离谱,结果还忘记怎样解决了.这捣鼓一下,那捣鼓一下,又给搞好了.为了记录这次bug,又试图还原bug. 1.解决办法file ...

  7. Codeforces Round #829 (Div. 1/Div. 2) 1753 A B C D 题解

    Div1A / 2C. Make Nonzero Sum 令最后每个\(a_i\)的系数为\(c_i\)(\(c_i=1/-1\)),发现只要满足\(c_1=1\)(下标从1开始),且c中没有两个-1 ...

  8. 抛砖系列之redis监控命令

    前言 redis是一款非常流行的kv数据库,以高性能著称,其高吞吐.低延迟等特性让广大开发者趋之若鹜,每每看到别人发出的redis故障报告都让我产生一种居安思危,以史为鉴的危机感,恰逢今年十一西安烟雨 ...

  9. python导包

    我们将完成特定功能的代码块放在一个.py结尾的文件中,这个文件被称为模块.在这个模块中可能包含变量,函数,类等等内容. 当我们从外部需要用到这个模块时,就需要将这个模块导入到我们当前环境.导入方式有以 ...

  10. OpenCV图像处理与视频分析详解

    1.OpenCV4环境搭建 VS2017新建一个控制台项目 配置包含目录 配置库目录 配置链接器 配置环境变量 重新启动VS2017 2.第一个图像显示程序 main.cpp #include< ...