一個極為簡單的requirejs實現(xiàn)方法
require和 sea的源碼分析,我之前的博客有寫過, 今天我想分享的是一個很簡單的核心代碼(不帶注釋和空行大概60行), 沒有容錯判斷。
require.js
require函數(shù)實現(xiàn)用一句話概括:
依次加載require的模塊,然后監(jiān)測script的onload事件,判斷所有模塊加載成功,執(zhí)行require的callback, 如果只帶一個參數(shù)且不是數(shù)組,就是加載成功后return 模塊。
//標記已經(jīng)加載成功的個數(shù) var REQ_TOTAL = 0; //模塊導出 window.exports = {}; //記錄各個模塊的順序 var exp_arr = []; //判斷是否數(shù)組 function isArray(param) { return param instanceof Array; } //require 真正實現(xiàn) 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實現(xiàn)
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實現(xiàn)方法全部內(nèi)容了,希望大家多多支持腳本之家~
- 在Html中使用Requirejs進行模塊化開發(fā)實例詳解
- 基于RequireJS和JQuery的模塊化編程日常問題解析
- 使用requirejs模塊化開發(fā)多頁面一個入口js的使用方式
- 基于RequireJS和JQuery的模塊化編程——常見問題全面解析
- JavaScript模塊化之使用requireJS按需加載
- 一篇文章掌握RequireJS常用知識
- SeaJS 與 RequireJS 的差異對比
- RequireJS多頁面應(yīng)用實例分析
- 在JavaScript應(yīng)用中使用RequireJS來實現(xiàn)延遲加載
- angularJS+requireJS實現(xiàn)controller及directive的按需加載示例
- requireJS模塊化實現(xiàn)返回頂部功能的方法詳解
相關(guān)文章
TypeScript中Array(數(shù)組)聲明與簡單使用方法
這篇文章主要給大家介紹了關(guān)于TypeScript中Array(數(shù)組)聲明與簡單使用的相關(guān)資料,TypeScript Array(數(shù)組)數(shù)組對象是使用單獨的變量名來存儲一系列的值,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12學習JavaScript設(shè)計模式之狀態(tài)模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的狀態(tài)模式,對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下2016-01-01