前端模块化-Day43

前端模块化：

发展史：

① 全局函数模式：将不同的函数功能封装成不同的全局函数。（调用时会导致修改覆盖）

// 全局函数模式:将不同的功能封装成不同的全局函数

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'