一個極為簡單的requirejs實現(xiàn)方法
require和 sea的源碼分析,我之前的博客有寫過, 今天我想分享的是一個很簡單的核心代碼(不帶注釋和空行大概60行), 沒有容錯判斷。
require.js
require函數(shù)實現(xiàn)用一句話概括:
依次加載require的模塊,然后監(jiān)測script的onload事件,判斷所有模塊加載成功,執(zhí)行require的callback, 如果只帶一個參數(shù)且不是數(shù)組,就是加載成功后return 模塊。
//標(biāo)記已經(jīng)加載成功的個數(shù)
var REQ_TOTAL = 0;
//模塊導(dǎo)出
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標(biāo)簽
function createScript(src, index) {
var $script = document.createElement('script');
$script.setAttribute('src', src);
$script.setAttribute('index', index);
return $script;
}
然后寫了2個導(dǎo)出模塊的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進(jìn)行模塊化開發(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)文章
徹底搞懂JavaScript中的apply和call方法(必看)
下面小編就為大家?guī)硪黄獜氐赘愣甁avaScript中的apply和call方法(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
js實現(xiàn)canvas保存圖片為png格式并下載到本地的方法
本篇文章主要介紹了js實現(xiàn)canvas保存圖片為png格式并下載到本地的方法,非常具有實用價值,需要的朋友可以參考下2017-08-08
Javascript實現(xiàn)鼠標(biāo)框選操作 不是點擊選取
這篇文章主要介紹了Javascript實現(xiàn)鼠標(biāo)框選操作,不是點擊選取,利用鼠標(biāo)進(jìn)行框選,感興趣的小伙伴們可以參考一下2016-04-04
setTimeout與setInterval在不同瀏覽器下的差異
setTimeout與setInterval是window對象的兩個非常神奇方法,用于實現(xiàn)定時或延時調(diào)用一個函數(shù)或一段代碼2010-01-01

