模块化

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

一、浏览器使用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. Linux Hardening Guide

    文章转载自:https://madaidans-insecurities.github.io/guides/linux-hardening.html 1. Choosing the right Lin ...

  2. Java对象或String转JSON对象

    Java String转JSON对象 用阿里的fastjson里的一个方法,导入fastjson包JSONObject jsonObject1 =JSONObject.parseObject(Stri ...

  3. 「Tubian」Tubian0.41!支持Windows QQ微信！

    Tubian 0.42已发布:https://www.cnblogs.com/tubentubentu/p/16745926.html Sourceforge.net下载:https://source ...

  4. P7113 [NOIP2020] 排水系统 （拓扑排序）

    (不想打高精,也不想学习其他大佬的神仙写法,打了90分的错解). 本题容易想到用拓扑排序处理,涉及分数的加法,用long long会超时,不过通分时先除后乘卡一下也可以拿90分. 结构体真是个复杂的东 ...

  5. logback在springBoot项目中的使用 springboot中使用日志进行持久化保存日志信息

    文章目录 1.xml文件的编写 2.实现的效果 2.1 日志保存到磁盘 2.2 控制台输出的效果 放置的位置 1.xml文件的编写 logback-spring.xml <?xml versio ...

  6. 如何规范App广告的隐私获取，让用户拥有更多知情权？

    随着互联网的不断普及,越来越多老百姓使用智能设备触达互联网.但用户经常发现自己无意间提到的东西,打开App就收到相关产品的广告推送,甚至有人怀疑手机App是通过麦克风来窃取自己平时聊天信息中的关键词进 ...

  7. JDK中自带的JVM分析工具

    目录 一.业务背景 二.Jdk-Bin目录 三.命令行工具 1.jps命令 2.jinfo命令 3.jstat命令 4.jstack命令 5.jmap命令 四.可视化工具 1.jconsole 2.v ...

  8. 【MySQL】03_数据类型

    MySQL 中的数据类型 类型 类型举例 整数类型 TINYINT.SMALLINT.MEDIUMINT.INT(或INTEGER).BIGINT 浮点类型 FLOAT.DOUBLE 定点数类型 DE ...

  9. LINQ使用小贴士

    LINQ中的排序操作符 OrderBy:按升序对序列的元素进行排序.OrderByDescending:按降序对序列的元素排序.ThenBy:按升序对序列中的元素执行后续排序.ThenByDescen ...

  10. python中while循环

    # 1. print('1.我在学python 输出5遍') print('我在学python'*5) print('我在学python\n'*5) # 只能做单一重复 不能做线性 # 2.while ...