JS:ES6-12 模块化

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

模块化的优点： 1. 防止命名冲突； 2. 代码复用； 3. 高维护性；

ES6 模块化语法：

模块功能主要由两个命令构成：export 和 import； export 命令用于规定模块的对外接口（导出模块）； import 命令用于输入其他模块提供的功能（导入模块）；

1. 导出的三种方法：

// o.js 默认导出export default{
school : "xxx",
change : function(){
console.log("我们可以帮你改变人生！");
}
}// m.js（逐个导出模块）：export let school = "xxx";
export function teach(){
console.log("我们可以教你开发技术！");
}// n.js（统一导出模块）：let school = "xxx";
function findJob(){
console.log("我们可以帮你找到好工作！");
}
export {school,findJob}

2. （引入和使用模块)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模块化</title>
</head>
<body>
<script type="module">
// 通用方式
// 引入m.js模块内容
import * as m from "./js/m.js";
console.log(m);
console.log(m.school);
m.teach();
// 引入n.js模块内容
import * as n from "./js/n.js";
console.log(n);
console.log(n.school);
n.findJob();
// 引入o.js模块内容
import * as o from "./js/o.js";
console.log(o);
// 注意这里调用方法的时候需要加上default
console.log(o.default.school);
o.default.change();
// 解构赋值形式
import {school,teach} from "./js/m.js";
// 重名的可以使用别名
import {school as xuexiao,findJob} from "./js/n.js";
// 导入默认导出的模块，必须使用别名
import {default as one} from "./js/o.js";
// 直接可以使用
console.log(school);
teach();
console.log(xuexiao);
console.log(one);
console.log(one.school);
one.change();
// 简便形式，只支持默认导出
import oh from "./js/o.js";
console.log(oh);
console.log(oh.school);
oh.change();
</script>
</body>
</html>

Babel对ES6模块化代码转换:

Babel 是一个 JavaScript 编译器； Babel 能够将新的ES规范语法转换成ES5的语法；因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；

步骤：

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；

第二步：初始化项目: npm init -y

第三步：安装: npm i babel-cli babel-preset-env browserify

第四步：使用babel转换: npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

第五步：打包: npx browserify dist/js/app.js -o dist/bundle.js

第六步：在使用时引入bundle.js: <script src="./js/bundle.js" type="module"></script>

转换前：


export let school = 'xxx';
export function teach() {
console.log("我们可以教给你开发技能");
}

转换后：

"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.teach = teach;var school = exports.school = 'xxx';
function teach() {
console.log("我们可以教给你开发技能");
}

JS:ES6-12 模块化相关推荐

thymeleaf加载不了js引用_web前端教程之js中的模块化一
web前端教程之js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没 ...
es6在原生代码的用法_关于ES6的模块化
历史上,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言如java.python等都具备这项功能,唯独Javascr ...
引入js_好程序员web前端教程分享js中的模块化一
好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导 ...
npm包管理工具与ES6官方模块化规范
npm介绍 npm有两种含义 : 第一种: 包管理工具node package manager 第二种:npm网站代码托管平台 1.npm 全称node package manager 官方推出的包管 ...
ES6的模块化管理、立即执行函数（IIFE）：在函数声明后面立即调用、函数劫持
1.Node.js简介: (1)Node是什么: A.浏览器内核有两个引擎:渲染引擎(渲染html.css).JavaScript引擎(运行JavaScript代码) B.Node是独立于浏览器的Ja ...
好程序员web前端教程分享js中的模块化一
好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导 ...
深圳Web前端学习：js中的模块化--【千锋】
深圳Web前端学习:js中的模块化–[千锋] 0.前言我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的, ...
Node.js 11.12.0 发布，服务器端的 JavaScript 运行环境
Node.js 11.12.0 发布了.Node.js 是一个基于 Chrome V8 引擎的 JavaScript runtime,使用高效.轻量级的事件驱动.非阻塞 I/O 模型. 新版本更新亮点 ...
JS ES6中export和import详解
1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...
npm WARN cli npm v9.1.2 does not support Node.js v14.12.0. You should probably upgrade to解决方法
[现象] C:\Users\Administrator>npm -v npm WARN cli npm v9.1.2 does not support Node.js v14.12.0. You ...

JS:ES6-12 模块化

JS:ES6-12 模块化相关推荐

最新文章

热门文章