前端模块化：
发展史：
① 全局函数模式：将不同的函数功能封装成不同的全局函数。（调用时会导致修改覆盖）
// 全局函数模式:将不同的功能封装成不同的全局函数
let msg = 'module1'
function foo() {
console.log('foo()', msg);
}
function bar() {
console.log('bar()', msg);
}
② namespace模式：立即执行函数（调用依然可以进行覆盖）
// namespace模式:简单对象封装
let obj = {
msg: 'module2',
foo() {
console.log('foo()', this.msg);
}
}
③ IIFE模式：匿名函数自调用（闭包）
// IIFE模式:匿名函数自调用(闭包)
(function (window) {
let msg = 'module3'
function foo() {
console.log('foo()', msg)
}
// 给window添加属性将window暴露出来
window.module3 = {
foo: foo
}
})(window)
------------------------------
<script>
// 通过暴露给window的属性来调用方法
window.module3.foo()
</script>
④ IIFE模式增强：引入依赖
// IIFE模式增强---引入依赖
(function (window, $) {
let msg = 'module4'
function foo() {
console.log('foo()', msg);
}
window.module4 = foo
$('body').css('background', 'blue')
// 依赖注入
})(window, jQuery)
------------------------------------
<script>
window.module4()
</script>
模块化规范：
CommonJS：每个文件都可当作一个模块。
- 在服务器端：模块的加载是运行时同步加载的。
- 在浏览器端：模块需要提前编译打包处理。
基本语法：
① 暴露模块：module.exports = value 或 exports.xxx = value
② 引入模块：require(xxx) ：第三方模块，xxx为模块名。自定义模块，xxx为文件路径。
实现：
服务器端：Node.js
浏览器端：browserify进行打包处理（即CommonJS浏览器端的打包工具）
使用browserify：进行全局和局部安装npm命令。
进行打包处理：browserify js/src/app.js -d js/dist/bundle.js
AMD：专门用于浏览器端，模块的加载是异步的。使用require.js库
基本语法：define关键字定义模块，return 暴露模块
① 暴露模块：定义暴露模块
1.没有依赖的模块：define(function()){ return 模块 })
// 定义没有依赖的模块
define(function () {
let name = 'dataService.js'
function getName() {
return name
}
// 暴露模块
return { getName }
})
2.具有依赖的模块：define(['module1'，'module2']，function(m1，m2) { return 模块 })
// 定义有依赖的模块
define(['dataService', 'jquery'], function (dataService, $) {
let msg = 'alerter.js'
function showMeg() {
console.log(msg, dataService.getName());
}
$('body').css('background', 'pink')
// 暴露模块
return { showMeg }
});
② 引入模块：requirejs(['module']，function(module)) { } 显式声明，依赖注入
需要配置属性：即requirejs.config({baseUrl：基本属性，paths：{导入的模块名：模块路径}})
(function () {
requirejs.config({
baseUrl: 'js/',
// 基本路径
paths: {
dataService: './modules/dataService',
alerter:'./modules/alerter',
jquery:'./libs/jquery.min'
}
// 配置路径
// 最终寻找路径为: 基本路径 + 配置路径
})
requirejs(['alerter'], function (alerter) {
alerter.showMeg()
})
})()
<!-- 引入require.js并指定主文件的入口 --> <script data-main="js/main.js" src="./js/libs/require.js"</script>
CMD：专门用于浏览器端，模块的加载是异步的。使用sea.js库，模块的加载是异步的。
基本语法：define定义，exports暴露。
① 定义暴露模块：
1.定义没有依赖的模块：
define(function(require，exports，value){
exports.xxx = value
module.exports = value
})
2.定义有依赖的模块：
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()
})
ES6 Modules：依赖模块需要打包处理。（Babel将es6转化为es5，browserify打包js文件）
语法：进行之前需要配置好Babel和Browserify
1. npm init -y
2. npm i --save-dev @babel/core @babel/cli @babel/preset-env
3. 新建一个.babelrc文件 在里面写入以下代码
{"presets": 【"@babel/preset-env"】}
4. 写相关的模块代码
5.将es6转化为es5: babel js/src -d js/build
暴露模块：export
① 统一暴露：即普通暴露
// 统一暴露
function fun() {
console.log('module2');
}
function fun2() {
console.log('module2');
}
// 暴露整个对象
export { fun, fun2 }
② 分别暴露：即普通暴露
// 暴露模块 分别暴露
export function foo() {
console.log('foo() module1');
}
export function bar() {
console.log('bar() module1');
}
③ 默认暴露：export default
// 默认暴露 可以暴露任意数据类型 暴露数据就是接收的数据
// export default value
// 通过对象方式 暴露多个数据
export default {
name: 'lwh',
foo() {
console.log('默认暴露的箭头函数');
}
}
引入模块：import 对于普通暴露，必须使用对象解构赋值的方式进行引用。
默认模块则直接定义引入即可。
// 引入其他模块
// 语法：import xxx from ‘路径’
// 常规的暴露必须使用解构赋值的方式引用
import { foo, bar } from './module1'
import { fun, fun2 } from './module2'
标签：function,console,模块化,前端,暴露,js,模块,foo,Day43 From： https://www.cnblogs.com/LWHCoding/p/16750541.html