Vue.js——前端模块化雏形和CommonJS——2020.12.9

前端模块化雏形和CommonJS

一丶匿名函数的解决方案

（一）我们可以使用匿名函数来解决方面的重名问题

• 在A.js文件中，我们使用匿名函数

    (function(){
        var flag = true
    })()

（二）但是如果我们希望在main.js文件中，用到flag，应该如何处理呢？

• 显然，另外一个文件中不容易使用，因为flag是一个局部变量

二丶使用模块作为出口

（一）我们可以使用将需要暴露到外面的变量，使用一个模块作为出口
（二）操作步骤

• 在匿名函数内部，定义一个空对象
• 给对象添加各种需要暴露到外面的属性和方法（不需要暴露的直接定义即可）
• 最后将这个对象返回，并且在外面使用一个MoudleA接受

（三）接下来，我们在main.js中怎么使用呢？

• 我们只需要使用属于自己模块的属性和方法即可

（四）这就是模块最基础的封装，事实上模块的封装还有很多高级的话题

• 但是我们这里就是要认识一下为什么需要模块，以及模块的原始雏形
• 幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案

（五）常见的模块化规范：

• CommonJS
• AMD
• CMD
• ES6的Modules

（六）代码详解

var ModuleA = (function(){
    // 1.定义一个对象
    var obj = {}
    // 2.在对象内部添加变量和方法
    obj.flag = true
    obj.myFunc = function(info){
        console.log(info);
    }
    // 3.将对象返回
    return obj
})()

    if (ModuleA.flag){
        console.log('key');
    }
    ModuleA.myFunc('Ting')

    console.log(ModuleA);

三丶CommonJS

（一）模块化的两个核心：导入和导出
（二）CommonJS的导出：

    module.exports = {
        flag : true,
        test(a,b){
            return a,b
        },
        demo(a,b){
            return a*b
        }
    }

（三）CommonJS的导入：

// CommonJS模块
let {test,demo,flag} = require('moduleA');

// 等同于
let _mA = require('moduleA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;

——欲渡黄河冰塞川，将登太行雪满山——

本文地址：https://blog.csdn.net/weixin_43402353/article/details/110942958