require和 sea的源碼分析，我之前的博客有寫過， 今天我想分享的是一個很簡單的核心代碼（不帶注釋和空行大概60行）， 沒有容錯判斷。
require.js
require函數實現用一句話概括：
依次加載require的模塊，然后監(jiān)測script的onload事件，判斷所有模塊加載成功，執(zhí)行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 = {}; //所有鏈接加載成功后，執(zhí)行callback if(REQ_TOTAL == req_len) { callback && callback.apply(exports, exp_arr); } } $node.appendChild($script); })($script); }}//創(chuàng)建一個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(); });以上就是小編為大家?guī)淼囊粋€極為簡單的requirejs實現方法全部內容了，希望大家多多支持武林網~
新聞熱點
疑難解答
