谈谈对前端模块化的理解是面试时经常会被问到的问题,我以面试者的口吻来写了如何分步骤回答这道问题。

第一步:模块化是什么?

将一个复杂程序安装一定的规则封装成几个块儿,并组合在一起。块的内部,数据和函数实现是私有的,只像外部暴露出来一些接口与外部的其他模块通信。

第二步:模块化的发展

全局function模式

把不同功能封装成不同的全局函数,污染全局命名空间,容易引起命名冲突或数据不安全,而且模块成员之间看不出直接关系。

namespace模式(命名空间)

简单对象封装,减少了全局变量,解决命名冲突,但是数据不安全,外部可以直接修改模块内部的数据。

IIFE模式:匿名函数自调用(闭包)

  数据是私有的,外部只能通过暴露的方法操作,将数据和行为封装到一个函数内部,通过给window添加属性来向外暴露接口,但是如何解决模块依赖呢?

    (function(window) {
            let data = "hello world"

            function sayHi() {
                    console.log(data)
            }
            window.myModule = { sayHi }
    })(window)

myModule.sayHi()