JS模块化

什么是模块化？

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起，块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

一个模块的组成

• 私有的数据--->内部的变量
• 私有的行为(操作数据)--->内部的函数
• 向外暴露n个行为

模块化

描述一种特别的编码项目JS的方式: 以模块为单元一个一个编写的
模块化的项目: JS编码时是按照模块一个一个编码的

模块进化历程

1. 全局function模式

module1.js

//数据
let data = 'module1'
function foo() {
    console.log('foo() module1')
}
function bar() {
    console.log('bar() module1')
}

module2.js

let data2 = 'module2'

function foo() {   //与另一个模块中的函数冲突了
  console.log(`foo() ${data2}`)
}

index.html

2.namespace模式

module1.js

    let myModule = {
      data: 'module1',
      foo() {
        console.log(`foo() ${this.data}`)
      },
      bar() {
        console.log(`bar() ${this.data}`)
      }
    }

module2.js

let myModule2 = {
      data: 'module2',
      foo() {
        console.log(`foo() ${this.data}`)
      },
      bar() {
        console.log(`bar() ${this.data}`)
      }
    }

index.html

3.IIFE模式

module.js

(function (window, $) {
      //数据
      let data = 'module'
    
      //操作数据的函数
      function foo() { //用于暴露有函数
        console.log(`foo() ${data}`)
        $('body').css('background', 'red')
      }
    
      function bar() {//用于暴露有函数
        console.log(`bar() ${data}`)
        otherFun() //内部调用
      }
    
      function otherFun() { //内部私有的函数
        console.log('otherFun()')
      }
    
      //暴露行为
      window.myModule = {foo, bar}
    })(window, jQuery)

index.html