DIV CSS 佈局教程網

require和 sea的源碼分析，我之前的博客有寫過， 今天我想分享的是一個很簡單的核心代碼（不帶注釋和空行大概60行）， 沒有容錯判斷。

require.js

require函數實現用一句話概括：

依次加載require的模塊，然後監測script的onload事件，判斷所有模塊加載成功，執行require的callback， 如果只帶一個參數且不是數組，就是加載成功後return 模塊。

//標記已經加載成功的個數
var REQ_TOTAL = 0;
//模塊導出
window.exports = {};
//記錄各個模塊的順序
var exp_arr = [];

//判斷是否數組
function isArray(param) {
  return param instanceof Array;
}

//require 真正實現
function require(arr, callback) {

  var req_list;

  if(isArray(arr)) {
    req_list = arr;
  } else {
    req_list = [arr];
  }
  var req_len = req_list.length;

  //模塊逐個加載
  for(var i=0;i<req_len;i++) {
    var req_item = req_list[i];

    var $script = createScript(req_item, i);

    var $node = document.querySelector('head');

    (function($script) {
      //檢測script 的onload事件
      $script.onload = function() {
        REQ_TOTAL++;

        var script_index = $script.getAttribute('index');

        exp_arr[script_index] = exports;

        window.exports = {};

        //所有鏈接加載成功後，執行callback
        if(REQ_TOTAL == req_len) {
          callback && callback.apply(exports, exp_arr);

       
        }

      }

      $node.appendChild($script);
    })($script);

  }

}

//創建一個script標簽
function createScript(src, index) {
  var $script = document.createElement('script');

  $script.setAttribute('src', src);
  $script.setAttribute('index', index);

  return $script;
}

 然後寫了2個導出模塊的js文件， 只寫了最簡單的exports實現

define.js

exports.define = {
  topic: 'my export',
  desc: 'this is other way to define ',
  sayHello: function() {
    console.log('topic ' + this.topic + this.desc);
  }
}

define2.js

exports.define = {
  name: 'xm',
  age: 22,
  info: function() {
    console.log('topic ' + this.name + this.age);
  }
}

然後測試demo很簡單

//測試demo
 require(['../res/define.js', '../res/define2.js'], function(def, def2) {
   def.define.sayHello();
 
   def2.define.info();
 });

以上就是小編為大家帶來的一個極為簡單的requirejs實現方法全部內容了，希望大家多多支持~