模块化

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

一、浏览器使用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. 【前端必会】单页应用-你的新朋友wepack

    背景 我们开发的功能可能是简单的,但是实现功能的代码行数却可能成千上万 出于易于维护.安全.服用,我们会根据我们的经验设计我们的代码,拆解成多个独立的功能模块(代码片段.更多的文件) JS的模块规范有 ...

  2. C语言指针笔记01

    int num = 90; 定义一个整型变量num int* ptr = &num; 定义一个整型指针变量ptr,指针变量ptr的类型取决于他所需要指向的变量,如这里,ptr要指向int类型变 ...

  3. 驱动开发：内核取ntoskrnl模块基地址

    模块是程序加载时被动态装载的,模块在装载后其存在于内存中同样存在一个内存基址,当我们需要操作这个模块时,通常第一步就是要得到该模块的内存基址,模块分为用户模块和内核模块,这里的用户模块指的是应用层进程 ...

  4. 2022-08-12-esp32把玩记-②_用Micropython点ssd1306_oled屏幕

    layout: post cid: 8 title: esp32把玩记-② 用Micropython点ssd1306 oled屏幕 slug: 8 date: 2022/08/12 15:12:39 ...

  5. jsp页面重定向后地址栏controller名重复而导致报404错误

    今天做ssm项目时遇到了这种错误 看看代码: 无关代码省略... 22 <body> 23 <div id="container"> 24 <ifra ...

  6. 通过QQ抓IP查询地址

    使用工具: Wireshark 可以直接搜索官网获取,个人用的免费的,也可以直接在kali中也是可以直接用的.这里就不介绍怎么安装了,网上很多. 步入正题: 通过wireshark进行抓包查地址,需要 ...

  7. coding上创建项目、创建代码仓库、将IDEA中的代码提交到coding上的代码仓库、Git的下载、IDEA上配置git

    文章目录 一.Git的安装以及子啊IDEA上配置Git(下载好的可以跳过) 二.怎样让IDEA和Git建立关系 三.在coding上创建项目 四.在coding上创建代码仓库 五.Git工作理论 六. ...

  8. go-zero docker-compose 搭建课件服务（七）：prometheus+grafana服务监控

    0.转载 go-zero docker-compose 搭建课件服务(七):prometheus+grafana服务监控 0.1源码地址 https://github.com/liuyuede123/ ...

  9. 【JavaWeb】学习笔记——Servlet、Filter、Listenter

    Servlet Servlet 简介 Servlet 是 Java提供的一门动态web资源开发技术 Servlet 是JavaEE 规范之一,其实就是一个接口,将来我们需要定义Servlet类实现Se ...

  10. nordic——nrf52系列SWD设置回读保护

    在开发时可能需要回读保护功能,在产品出厂后这个功能可以让你的代码更加安全,无法用SEGGER或者其余方式读取你的代码HEX文件,也就是禁用SWD下载接口.但是SWD锁住了,还想使用(从新下载代码)也是 ...