浅谈前端js面试--开发环境-模块化--requirejs

• 不使用模块化
  • util.js getFormatDate函数 最底层的函数
  • a-util.js aGetFormatDate 使用依赖getFormatDate （业务层的底层）
  • a.js aGetFormatDate （a业务）一层一层的引用

代码如下：

// util.js
function getFormatDate(date,type){
    // type === 1 返回 2017-06-15
    // type === 2 返回 2017年06月15日格式
    // ...
}
// a-util.js 
function aGetFormatDate(date){
    //要求返回 2017年6月15日 格式
    return getFormatDate(date,2)
}
// a.js
var dt = new Date()
console.log(aGetFormatDate(dt))

使用

依赖关系根本不清楚，如果顺序错了，会报错。

• 使用模块化（设计一种理想状态，不一定能实现）

//util.js
export {
  getFormatDate:function(date,type){
    // type === 1 返回 2017-06-15
    // type === 2 返回 2017年06月15日格式
    // ...
  }
}

// a-util.js
var getFormatDate = require('util.js')
export {
  aGetFormatDate: function(date){
    //要求返回 2017年6月15日 格式
        return getFormatDate(date,2)
  }
}

//a.js
var aGetFormatDate=require('a-util.js')
var dt=new Date()
console.log(aGetFormatDate(dt))
// 直接'',其他的根据依赖关系自动引用
//那两个函数,没必要做成全局变量，不会嗲来污染和覆盖

AMD

• require.js requirejs.org/
• 全局define函数
• 全局require函数
• 依赖js会自动、异步加载

使用require.js
//util.js
define(
        function() {
            getFormatDate: function(date, type) {
                // type === 1 返回 2017-06-15
                // type === 2 返回 2017年06月15日格式
                // ...
            }
        }
    )
// a-util.js
define(
        [. / util.js],
        function(util) {
            return {
                aGetFormatDate: function(date) {
                    //要求返回 2017年6月15日 格式
                    return getFormatDate(date, 2)
                }
            }
        }
    )
// a.js
define(
        [. / a - util.js],
        function(autil) {
            return {
                printDate: function(date) {
                    console.log(aUtil.aGetFormatDate(date))
                }
            }
        }
    )
// main.js
require(
    ['./a.js'],
    function(a) {
        var date = new Date()
        a.printDate(date);
    }
)

使用

AMD示例
AMD示例