JS - 13 - 模块化

视频：https://www.bilibili.com/video/av79663759

文章目录

# why ？
# 开发模块管理引擎
- ## （手写）简单的模块管理
# 使用：export / import ... from ...
# 模块的延时加载
# 默认是严格模式
# 模块的作用域
# 模块的（预解析）的必要性
# 具名导出、导入
# 批量导入与建议
# 别名
# 默认导出 default
# 规范 - 推荐
# 模块合并导出
# 按需动态加载 - import()、Promise 对象
- ## Promise 对象
- ## 按需加载【实现】

# why ？

不同功能封装成独立的文件
只开放部分功能性接口

代码复用
避免命名冲突
解耦（可管理）

# 开发模块管理引擎

市场上的模块管理引擎：
AMD require.js
CMD sea.js
COMMONJS NODE.js
UMD

## （手写）简单的模块管理

moduleList - 容器、管理模块
define - 定义模块
@param {String[]} modules 依赖模块

    let module = (function() { const moduleList = {} ; // 容器/*** @description 模块管理* @param {String} name 名字* @param {String[]} modules 依赖的模块* @param {Function} action 执行的方法* @return 开放接口*/function define(name, modules, action) { // 初始化modules.forEach((m,i)=> {modules[i] = moduleList[m]});moduleList[name] = action.apply(null,modules) ;// 往容器里面压模块}return {define} ;})();module.define('hd', [], function() { // 导出return {first(arr) {return arr[0] ;},max(arr, key) {return arr.sort((a, b) => b[key]-a[key])[0];}};})module.define('lesson', ['hd'], function(hd) { // 导入let data = [{name:'js', price: 99, click: 4} ,{name:'mysql', price: 222, click: 2} ,{name:'vue.js', price: 300, click: 3} ,]let max = hd.max(data, 'price') ;console.log(max)})

# 使用：export / import … from …

通过以下命令，就实现了模块的 定义、导出、导入

module.js 文件
export 指定导出哪些接口

let title = '后盾热' ;
let url = 'www.baidu.com'
export {title}

.html 文件

import 指定导入哪些接口
from 指定从那里导入（必须指定明确的路径，否则不能识别。只有到了用打包工具的时候，打包工具才能比较智能的识别）

  <script type="module">import {title} from './module.js' ;console.log(title)</script>

注意：
script 标签需要加上 type='module'
<script type="module">
...
</script>

# 模块的延时加载

只要 script 加了 type=‘module’
那么这个标签就是延时加载的

即便脚本放在了body上面，仍然能找到body 内容（看下面）

let a = document.querySelector('button') ;
console.log('module' , a) ;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script type="module">let a = document.querySelector('button') ;console.log('html' , a) ; import {} from "./module.js"
</script>
<body><button>后盾人</button>
</body>
</html>

# 默认是严格模式

模块默认是严格模式 'use strict'

<script type="module">site = 'aa' // 非严格模式下，是不报错的
</script>

# 模块的作用域

非模块标签内的变量是定义在全局的（下图）

模块标签的作用只在模块标签内部（下图）

# 模块的（预解析）的必要性

模块的导入，只有在 第一次 导入的时候才会解析数据。
避免了重复初始化

（下图）

  <script type="module">import {} from "./module.js" ;import {} from "./module.js" ;import {} from "./module.js" ;import {} from "./module.js" ;import {} from "./module.js" ;</script>

module.js

class Common {init() {console.log("初始化")}
}
new Common().init() ;

同样的，如皋导入的模块导入已导入的模块，也不会再次出发编译（绕？就对了）
（下图）

  <script type="module">import {} from "./module.js" ;import {} from "./module1.js" ;</script>

module.js

class Common {init() {console.log("初始化")}
}
new Common().init() ;

module1.js

import {} from "./module.js" ; // 导入 上面模块
console.log('module-1')

（下图）可以看到，module.js 模块只初始化一次

# 具名导出、导入

具名导入（具体名字导入）

直接在属性、方法前加 export 导出

或者在最后具名导出

也是能用的

# 批量导入与建议

  <script type="module">import * as api from "./module.js" ;console.log(api)</script>

let site = 'www.baidu.com' ;
function show() {console.log('show')
}
class Common {init() {console.log("初始化")}
}
new Common().init() ;export {site, show , Common}

建议：
使用具名导入

导入体积小

代码清晰

# 别名

  <script type="module">import {site as s}  from "./module.js" ; // 导入时候别名let site = 'www.bilibili.com' ;console.log(s)</script>

let site = 'www.baidu.com' ;
function show() {console.log('show')
}
class Common {init() {console.log("初始化")}
}
new Common().init() ;export {site, show as s , Common} // 导出时候别名

# 默认导出 default

默认导出，import 就不用加花括号 {...} 了

但是，只能有一个

  <script type="module">import s  from "./module.js" ; // 或者 import {default as s, site } from "./module.js"// 或者 import s , {site} from "./module.js" ;s()</script>

导出可以是（下图）

let site = 'www.baidu.com' ;
function show() {console.log('show')
}
class Common {init() {console.log("初始化")}
}
new Common().init() ;export {site, show as default , Common} // 默认导出 show

也可以是（下图）

let site = 'www.baidu.com' ;
export default function  show() { // 默认导出 showconsole.log('show')
}
class Common {init() {console.log("初始化")}
}
new Common().init() ;export {site, show  , Common}

坑
如果批量导出，用 default 的默认导出需要这样调用（下图）

# 规范 - 推荐

导出名尽量和文件名相关

# 模块合并导出

为了管理方便，弄一个专门的模块作为入口
管理其他模块

m13.2.js

let url = 'www.baidu.com-2'
function show()  {console.log(url) ;
}
class User {}
export {url, show, User as default}

m13.1.js

let url = 'www.baidu.com-1'
function show()  {console.log(url) ;
}
class User {}
export {url, show, User as default}

m13.index.js

import * as m131 from "./m13.1.js"
import * as m132 from "./m13.2.js"
export{ m131, m132}

  <script type="module">import * as api from "./m13.index.js" ;api.m131.show() ;api.m132.show() ;console.log(api.m131.default)console.log(api)</script>

# 按需动态加载 - import()、Promise 对象

之前 import ... from ... 的模式，必须在顶层

否则报错（下图）

## Promise 对象

ES6 标准

import() 函数返回一个 Promise 对象

Promise 对象有个 then 方法，当模块加载完成，进行回调
（如下）

./m13.1.js

let url = 'www.baidu.com-1'
function show()  {console.log(url) ;
}
class User {}
export {url, show, User as default}

使用 import

    import('./m13.1.js').then(module => {console.log(module)})

接收的 module 对象就是模块对象

## 按需加载【实现】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击，后加载</button>
</body><script type="module">document.querySelector('button').addEventListener('click',() => {import('./m13.1.js').then(({url, site}) => {console.log(site,url)});})</script>
</html>

m13.1.js 模块

console.log("按需加载")
let site = 'www.baidu.com'
let url = 'www.bilibili.com'
export {site,url}

JS - 13 - 模块化相关推荐

Node.js模块化开发||Node.js中模块化开发规范
JavaScript开发弊端 a.js b.js JavaScript在使用时存在两大问题,文件依赖和命名冲突. 生活中的模块化开发软件中的模块化开发 app.j user.一个功能就是一个模块,多 ...
node js的模块化的分类
一.node js的模块化的分类: (1)系统模块 (2)自定义模块二.对外输出: 对外输出东西--必须加给exports (1)单个输出: exports.xxx=??; exports.xxx= ...
基于Ext JS的模块化应用框架搭建及开发
Ext JS模块化开发早期基于Ext JS的Web开发方式,是在HTML中引入JS和CSS文件,典型的就是引入 ext-all.js 这样的文件.ext all 包含的内容很多, 有基本的核心组件. ...
【Node学习】—Node.js中模块化开发的规范
[Node学习]-Node.js中模块化开发的规范 Node.js 规定一个JavaScript就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到模块化内部可以使用exports对象进行 ...
腾讯回应 QQ 被工信部通报；由微软老兵领导，Facebook 开发新操作系统；Node.js 13.4.0 发布 | 极客头条...
整理 | 屠敏快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注 ...
支付宝招“找茬”程序员，年薪无上限；谷歌宣布实现“量子霸权”；node.js 13.0.3 发布 | 极客头条...
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）
前言前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...
vue each_Vue.js从零开始——模块化项目（2）
今天更新晚了点,因为刚刚去参加面试回来:不多说废话了,今天主要看的是路由,当然因为 Vue Router 本身已经可以写很多内容了,所以我倾向于把基础内容放在这里,路由单开一部分来详细看看. 1 简单 ...
利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块
以下为封装好的工具类代码,使用方法将在后边介绍. /*** Created by xiaoqiang on 2017/11/09.*/ 'use strict'; import $ from 'jqu ...

JS - 13 - 模块化

文章目录

# why ？

# 开发模块管理引擎

## （手写）简单的模块管理

# 使用：export / import … from …

# 模块的延时加载

# 默认是严格模式

# 模块的作用域

# 模块的（预解析）的必要性

# 具名导出、导入

# 批量导入与建议

# 别名

# 默认导出 default

# 规范 - 推荐

# 模块合并导出

# 按需动态加载 - import()、Promise 对象

## Promise 对象

## 按需加载【实现】

JS - 13 - 模块化相关推荐

最新文章

热门文章

JS - 13 - 模块化

文章目录

# why ？

# 开发模块管理引擎

## （手写） 简单的 模块管理

# 使用：export / import … from …

# 模块的延时加载

# 默认是 严格模式

# 模块的 作用域

# 模块的（预解析）的必要性

# 具名导出、导入

# 批量导入与建议

# 别名

# 默认导出 default

# 规范 - 推荐

# 模块合并导出

# 按需动态加载 - import()、Promise 对象

## Promise 对象

## 按需加载 【实现】

JS - 13 - 模块化相关推荐

最新文章

热门文章

## （手写）简单的模块管理

# 默认是严格模式

# 模块的作用域

## 按需加载【实现】