模块化-AMD-CMD

模块化的价值：
主要目的：
解决命名冲突
依赖管理

• 提高代码可读性
• 代码解耦，提高复用性
  模块外部无法修改没有暴露出来的变量，函数
  同行的Javascript模块规范有两种：CommonJS和AMD
  CommonJS规范
• 1.定义模块：根据CommonJS规范，一个单独的文件就是一个模块，每一个模块都是一个单独的作用域，也就是说，该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
• 2.模块输出：模块只有一个出口，module.exports对象，把模块以往输出的内容放入该对象

• 3.加载模块，使用require方法加载，该方法读取一个文件并执行，返回文件内部的module.exports对象

  
  
  

  image.png
  
  

  AMD:异步模块定义

  
  
  

  image.png
  
  
  

  image.png

CommonJS规范

var carousel =require('./carousel')

new carousel('.ct')

var tab = require('./tab')
tab.init()

var lazy = require('./lazy')
lazy.init('',function(){
    
})

AMD规范：相当于将所有模块加载后再去实现，先把需要的模块准备好

require(['carousel','tab','lazy'],function(Carousel,Tab,Lazy){
    new Carousel()
    Tab.init()
    Lazy.init('',function(){

    })
})

requireJS定义了一个函数define，它是全局变量，用来定义模块

image.png

image.png