当前位置:网站首页>Modular specifications
Modular specifications
2022-07-31 08:33:00 【Aviator_huahua】
模块化规范
模块化概述
Modularization refers to dividing a complex program,按照一定的规则(规范)Split into several chunks(文件),并组合在一起.块的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信.
简单来说,is a complex program,按照功能(or other rules)划分成不同的模块.Implement the function of the current module in each module,Implemented procedural externals are not concerned,You only need to expose the interface that implements the function to the outside world.
为什么要模块化
- 降低程序复杂度
- 降低程序耦合度
- 便于部署(Can be imported by module,Unused modules can not be imported or deployed)
模块化优点
- 避免命名冲突(减少命名空间污染)
- 更好的分离,按需加载
- 更高的复用性
- 高可维护性
模块化面临的问题
- 请求多
- 依赖模糊
- 难以维护
模块化演变
全局function模式
//module1.js let msg='hello' function f1(){ console.log('module1.f1',msg) } //index.js <script src="./module1.js"></script>
namespace命名空间模式
let module2={ msg:'hello', f1(){ console.log('module2.f1',this.msg) } }
IIFE模式
(function (window) { let msg = 'hello' function f1() { console.log('module3', msg); } window.module3 = { f1, msg } })(window)
模块化规范
1、CommonJS
说明
- Every file can be treated as a module
- 在服务端 The loading of modules is run-time synchronous loading
- 在浏览器端 模块需要提前编译打包处理
基本语法
暴露模块
方法一:module.exports = value 方法二:exports.xxx = value Essentially exposedexports对象
引入模块
require('...') 第三方模块:xxx为模块名 自定义模块:xxx为模块文件路径
使用
// module1.js
let msg = 'module1'
module.exports = {
msg,
f1() {
console.log('module1 print', this.msg);//It will be lost when it is deconstructed and called directlythis
}
}
// module2.js
module.exports=function f2(){
console.log('module2 print');
}
// module3.js
exports.foo=function(){
console.log('module3-foo print');
}
exports.bar=function(){
console.log('module3-bar print');
}
// app.js
let module1 = require('./modules/module1')
let f2 = require('./modules/module2')
let {
foo:f3, //重命名
bar
} = require('./modules/module3')
console.log('=======01=========');
console.log('01-module1 require:', module1.msg);
module1.f1();
console.log('=======02=========');
f2();
console.log('=======03=========');
f3();
bar();
2、AMD
说明
- 专门用于浏览器端,模块的加载是异步的
- 依赖于require.js,需要安装依赖,It can be used after configuration
基本语法
暴露模块
// 定义没有依赖的模块 define(function(){ return 模块 }) // 定义有依赖的模块 define(['module1','module2'],function(m1,m2){ return 模块 })
引入模块
require(['module1','module2'],function(m1,m2){ 使用m1/m2 })
使用
// dataService.js 定义没有依赖的模块
define(function(){
let name = 'dataService.js';
function getName(){
return name
}
// 暴露模块
return {getName};
})
// alerter.js 定义有依赖的模块
define(['dataService'], function(dataService){
let msg = 'alerter.js;
function showMsg(){
console.log(msg, dataService.getName());
}
return {showMsg};
})
// main.js Import the module and configure the path
(function (){
// 配置
requirejs.config({
// baseUrl: 'js/lib', //基本路径
paths: { // 配置路径,默认会添加js文件后缀,Don't add it yourself
dataService: './modules/dataService',
alerter: './modules/alerter'
}
})
requirejs(['alerter'], function(alerter){
alerter.showMsg();
})
})()
3、CMD
说明
- 专门用于浏览器端,模块的加载是异步的
- 模块使用时才会加载执行
- 依赖Sea.js
基本语法
暴露模块
// 定义没有依赖的模块 define(function(require,exports,module){ exports.xxx=value module.exports=value }) // 定义有依赖的模块 define(function(require,exports,module){ // 引入依赖模块(同步) var module2=require('./module2') // 引入依赖模块(异步) require.async('./module3',function(m3){ }) // 暴露模块 exports.xxx=value })
引入模块
define(function(require){ var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show() })
4、ES6
说明
- 依赖模块需要编译打包处理
基本语法
暴露模块
// 分别暴露 export function foo(){ console.log('foo') } export function bar(){ console.log('bar') } export let arr = [1,2,3] // 统一暴露 function fun(){ console.log('fun') } function fun2(){ console.log('fun2') } let arr = [1,2,3] export {fun, fun2, arr} // 默认暴露 Any type of data can be exposed,暴露什么数据,接收到的就是什么数据 export default () => { console.log('default') } 或 export default [1,2,3] 或 let arr = [1,2,3] export default { foo(){ console.log('foo') }, arr }
引入模块
import xxx from '...'
使用
// module1.js
export function f1(){
console.log('f1')
}
// module2.js
export let a = 1
// module3.js
let arr = [1,2,3]
function f3(){
console.log('f3')
}
export {arr, f3}
// module4.js
export default function f4(){
console.log('f4')
}
// index.js
import {f1} from './js/module1'
import {a} from './js/module2'
import {arr, f3} from './js/module3'
import f4 from './js/module4'
边栏推荐
- Vscode: Project-tree plugin
- MySQL中InnoDB的多版本并发控制(MVCC)的实现
- PowerCLi 通过自建PXE Server一键esxi7下批量部署常规New-VM
- Vscode:Project-tree插件
- 《如何戒掉坏习惯》读书笔记
- TypeError The view function did not return a valid response. The function either returned None 的解决
- Golang-based swagger super intimate and super detailed usage guide [there are many pits]
- [MySQL exercises] Chapter 2 Basic operations of databases and data tables
- 【MySQL功法】第3话 · MySQL中常见的数据类型
- 基于golang的swagger超贴心、超详细使用指南【有很多坑】
猜你喜欢
随机推荐
日志导致线程Block的这些坑,你不得不防
如何升级nodejs版本
使用PageHelper实现分页查询(详细)
C# 正则表达式汇总
SSM整合案例分析(详解)
全国中职网络安全B模块之国赛题远程代码执行渗透测试 PHPstudy的后门漏洞分析
Failure scenarios of @Transactional annotations
【插值与拟合】
蚂蚁核心科技产品亮相数字中国建设峰会 持续助力企业数字化转型
ZCMU--1862: zbj的狼人杀
R语言 第一部分
Unreal基础概念
[MySQL exercises] Chapter 2 Basic operations of databases and data tables
【黄啊码】MySQL入门—3、我用select ,老板直接赶我坐火车回家去,买的还是站票
35-Jenkins-共享库应用
【Unity】编辑器扩展-03-拓展Inspector视图
个人报错问题 持续总结
7/28-7/29 Expectation + thinking + suffix array + ST table
科目三:前方路口直行
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(下) -- 搜索历史