ES6——模块化

 模块化

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

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

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

 <script type="module">
     import * as app from "./app.js";
 </script>

1.1 模块化的好处

  • 防止命名冲突

  • 代码复用

  • 高维护性

1.2 ES6模块化语法

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

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

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

1.3 ES6暴露模块数据

1.3.1 分别暴露

  index1.js

 //暴露数据:export
 export let person = '张三';
 
 export function sayHi(){
     console.log("你好我是张三");
 };

  index.html

 <body>
     <script type="module">
         //引入index1模块
         import * as index1 from "./index1.js";
         console.log(index1);
     </script>
 </body>

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

1.3.2 统一暴露

  index2.js

 let person = '张三';
 
 function sing(){
     console.log("我会唱歌");
 };
 //统一暴露
 export {person, sing};//花括号里边是要暴露的数据

  index.html

 <body>
     <script type="module">
         //引入index2模块
         import * as index2 from "./index2.js";
         console.log(index2);
     </script>
 </body>

1.3.3 默认暴露

  index3.js

 //可以暴露任意类型,对象居多
 export default {
     person: '张三',
     coding: function (){
         console.log("我在敲代码");
     }
 }

  index.html

 <body>
     <script type="module">
         //引入index3模块
         import * as index3 from "./index3.js";
         console.log(index3);
     </script>
 </body>

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

 <body>
     <script type="module">
         //引入index3模块
         import * as index3 from "./index3.js";
         index3.default.coding();
     </script>
 </body>

1.4 ES6引入模块数据语法

1.4.1 通用导入方式

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

1.4.2 解构赋值形式

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

 import {要暴露的数据名, 要暴露的数据名} from "模块路径";
 //例
 //分别暴露
 import {person,sayHi} from "./index1.js";
 //起别名(统一暴露),因为和上边分别暴露的person重名了需要起别名
 import {person as ren, sing} from "./index.js";
 console.log(ren,sing);

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

 import {default as 别名} from "模块路径";
 //例(固定写法)
 import {default as index3} from "./index3.js";
 console.log(index3);

1.4.3 简便形式

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

 import 变量名 from "模块路径";
 //例
 import index3 from "./index3.js";

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

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

 <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.在页面上引用
 <script src="../dist/bundle.js"></script>

四、ES6模块化引入NPM包

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

  要想使用npm

  1.安装所需包

npm i jquery

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

import $ from "jquery";
0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • 1、概念:解构赋值可以理解为对赋值运算符的一种扩展。它主要针对数组或者 对象进行模式匹配,然后对模式中的变量进行赋值。 2、特性:采用ES6解构赋值的方式可以代码的可读性更高、代码书写更加...

  • 一、ES6——Promise 1.1 Promise介绍与基本使用   Promise是ES6引入的异步编程的新解决方案。语法上promise是一个构造函数,用来封装异步操作并获取其成功或失败的结果。...

  • 函数参数默认值 //ES6 允许给函数参数赋值初始值 //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则) // funct...

  • ES6 简介(一) 一、 概述 1、 导读 ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chro...

  • ES6新特性 1.ES6是什么? DCMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,2015年6月发布 ES6设计目标:达到JavaScript语言可以用来编写复...

  • 微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整...

  • (1) // ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments // ES5 获取实参的方式 function date(){ ...

  • ES6 简介(二) 五、 函数扩展 1、 函数参数默认值 1.1 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 function log(x, y) { y = ...

  • 转载请注明出处:   Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作...

  • 对象中可以直接写变量 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。 const foo = 'bar'; const obj = {foo}; //key值就是foo,valu...

  • 二、Class类 2.1、Class的基本使用 2.1.1、构造函数 在ES6之前,我们是通过new构造函数来创建的指定对象,为了更好的区分类与函数,ES6推出了类相关的关键字如cla...

  • JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 Java...

  • ECMAScript简介 ECMAScript6.0 ,简称 ES6 。ECMAScript 是一种由 ECMA 国际通过 ECMA-262 标准化的脚本,为 JavaScript 语言的下一代标准,...

  • 一、JS执行机制 JS语言有个特点是单线程,即同一时间只能做一件事。单线程就意味着,所有的任务需要排队,前一个任务结束,才会执行后一个任务,可能造成页面渲染不连贯。 为了解决这个问题,利用多核...

  • 在我们的开发人员工作流程中,我们经常会遇到具有挑战性的问题,这些问题可能只需要几行代码就可以解决。在本文中,我试图编译有用的片段,这些片段可能会在您处理 URL、DOM、事件、日期、用户首选项等时为您...

  • 解构赋值 通过解构赋值,可以快速从对象或者数组中取出属性或者数值。 解构赋值 可以通过定位到数组或者对象的某一个位置,将值直接赋给一个或多个变量。 const arr = ['dasha', 'e...

  • 本文主要介绍24中es6方法,这些方法都挺实用的,本本请记好,时不时翻出来看看。 1.如何隐藏所有指定的元素 1 const hide = (el) => Array.from(el).fo...