什么是模块化?

模块化可以更加清晰的将文件与文件之间的引用关系更好的配合.当文件与文件之间有很多引用关系时,我们不必要知道底层的文件A与文件B如何引用,只需要引入最上层的文件,剩下的都自动引用了.如果不使用模块化,在文件引用时,这个函数必须是全局变量,那样则会造成全局的污染

AMD

• requirejs.js
• 全局define函数
• 全局requier函数
• JS会自动异步加载

Demo

使用AMD要在html中引入require.js,其中data-main是入口

<script src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js" data-main="./main.js"></script>

util.js
它不依赖任何模块,也就不需要引入依赖了

define(function(){
    var util = {
        getFormatDate:function(date,type){
            if (type === 1) {
                return '2017-06-20'
            }
            if (type === 2) {
                return '2017年6月20日'
            }
        }
    }
    return util
})

a-util.js

define(['./util.js'],function(util){
  var aUtil = {
    aGetFormatDate: function(date){
      return util.getFormatDate(date,2)
    }
  }
  return aUtil
})

a.js

define(['./a-util.js'],function(aUitl){
  var a = {
    printDate:function(date){
      console.log(aUitl.aGetFormatDate(date))
    }
  }
  return a
})

main.js
最后,main.js作为一个入口,不需要定义任何东西了.所以使用require()

require(['./a.js'],function(a){
  var date = new Date()
  a.printDate(date)
})

CommonJS

nodejs模块化规范,现在被大量的应用于前端
前端开发依赖的插件和库,都可以从npm中获取
构建工具的高度自动化,使得使用npm的成本非常低
CommonJS不会异步加载JS,而是同步一次性加载出来

Demo

module.exports = {
  print:function(){
    console.log(123)
  }
}

var aUtil = require('./a-util.js')
aUtil.print()