前端架構師入門之commonjs 實現知多少

1.首先,使用和定義模塊

定義
module.exports = function (){
    // todos
}

使用
var myfunction = require('./xxx')
複製代碼

2.CMD 模塊化的實現

• 首先nodejs 全局定義了module
• require()方法的具體實現是nodejs中的"Module"來具體實現的(這個Module只是個定義,和node全局module無關)
• require簡單實現邏輯

function require(path){
    // 解析路徑讀取文件
   var fileStr = fs.readFile(path);
    // 加入到閉包中
    var codeStr = "(function(module,exports){ +fileStr+ }) "    
    // 使用vm 獲得可執行的fn
    var fn = vm.runInThisContext(codeStr)
    // 運行fn,讓當前文件的module.exports  掛上相關的數據,此處是方法
    fn.call(module,module,module.exports);  // 獲得module.export = function (){//todos}
    // 導出module.exports就ok
    return module.exports
}
複製代碼

注意事項,裏面只是簡化版,理解流程
具體還須要加入.json||.js 判斷,加入讀取文件緩存等

3.commonjs 模塊化更加精細實現

let path = require('path')
let fs = require('fs')
let vm = require('vm')
function Module(filename) {
  this.loaded = false
  this.filename = filename // 文件的絕對路徑
  this.exports = {} // 模塊對應的導出結果
}
Module._extensions = ['.js', '.json']

Module._resolveFilename = function(p) {
  p = path.join(__dirname, p) // c://xx/a
  if (!/\.\w+$/.test(p)) {
    // 嘗試添加擴展名
    for (let i = 0; i < Module._extensions.length; i++) {
      let filePath = p + Module._extensions[i] // 拼出一個路徑
      // 判斷文件是否存在
      try {
        fs.accessSync(filePath)
        return filePath
      } catch (e) {
        if (i >= Module._extensions.length) {
          throw new Error('module not Found')
        }
      }
    }
  } else {
    return p
  }
}
Module._cache = {}
// 若是後綴是.js
Module._extensions['.json'] = function(module) {
  let content = fs.readFileSync(module.filename, 'utf8')
  module.exports = JSON.parse(content)
}

Module.wrapper = ['(function (exports,require,module){', '\r\n})']
Module.wrap = function(content) {
  return Module.wrapper[0] + content + Module.wrapper[1]
}
// 若是後綴是.js
Module._extensions['.js'] = function(module) {
  let content = fs.readFileSync(module.filename, 'utf8')
  let script = Module.wrap(content)
  let fn = vm.runInThisContext(script)
  fn.call(module.exports, module.exports, req, module)
}
Module.prototype.load = function() {
  // 加載模塊自己 js按照js加載 json按照json加載
  let extname = path.extname(this.filename)
  Module._extensions[extname](this)
}
function req(path) {
  // 本身實現的require方法 能夠加載模塊
  // 先要根據路徑 變出一個絕對路徑
  let filename = Module._resolveFilename(path)
  // 文件路徑 (絕對路徑) 惟一
  if (Module._cache[filename]) {
    // 若是加載過直接把加載的結果返回便可
    // 有緩存把exports屬性導出便可
    return Module._cache[filename].exports
  }
  // 經過這個文件名建立一個模塊
  let module = new Module(filename)
  module.load() // 讓這個模塊進行加載 根據不一樣的後綴加載不一樣的內容
  Module._cache[filename] = module // 進行模塊的緩存
  // 返回最後的結果
  return module.exports
}

複製代碼

你們加油