模块化

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

一、浏览器使用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. 记录一次Bitbucket鉴权的坑

    目录 发生了什么 什么原因 如何解决 总结 发生了什么 今天首次在Fedora上使用git,因为没有小王八(TortoiseGit)帮助,其过程异常焦灼-- 反正经过一系列折腾,我在本地新建了一个项目 ...

  2. 对list集合中元素按照某个属性进行排序

    test 为集合中的元素类型(其中包含i属性) Collections.sort(list,(test o1, test o2) -> { if (o1.getI() != o2.getI()) ...

  3. 【Wine使用经验分享】Wine字体显示问题处理

    字体不显示/字体为□ 首先尝试下载simsun字体到/usr/share/fonts (simsun.ttf simsun.ttc) 在新版本wine上,差不多就能解决问题. 如果还不行,就从网上下载 ...

  4. [CG从零开始] 3. 安装 pyassimp 库加载模型文件

    assimp 是一个开源的模型加载库,支持非常多的格式,还有许多语言的 binding,这里我们选用 assimp 的 python 的 binding 来加载模型文件.不过社区主要是在维护 assi ...

  5. 作用域通信对象：session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后，跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

  6. C语言两个升序递增链表逆序合并为一个降序递减链表，并去除重复元素

    #include"stdafx.h" #include<stdlib.h> #define LEN sizeof(struct student) struct stud ...

  7. SQL--临时表的使用

    临时表的创建 临时表分为:本地临时表和全局临时表 通俗区分: 本地临时表:只能在当前查询页面使用,新开的查询是不能使用它的     #temp 全局临时表:不管开多少查询页面都可以使用  ##temp ...

  8. 重新整理 .net core 实践篇 ———— linux上排查问题实用工具 [外篇]

    前言 介绍下面几个工具: Lldb createdump dotnet-dump dotnet-gcdump dotnet-symbol Procdump 该文的前置篇为: https://www.c ...

  9. 有依赖的背包问题（Acwing 10）

    1 # include<iostream> 2 # include<cstring> 3 # include<algorithm> 4 using namespac ...

  10. nginx性能监控

    nginx自带监控模块,需要在nginx编译安装时加入监控模块. 1. 编译安装时加入监控模块 ngin编译安装时,加入编译参数为:--with-http_stub_status_module.如下所 ...