一個(gè)極為簡(jiǎn)單的requirejs實(shí)現(xiàn)方法
require和 sea的源碼分析,我之前的博客有寫(xiě)過(guò), 今天我想分享的是一個(gè)很簡(jiǎn)單的核心代碼(不帶注釋和空行大概60行), 沒(méi)有容錯(cuò)判斷。
require.js
require函數(shù)實(shí)現(xiàn)用一句話概括:
依次加載require的模塊,然后監(jiān)測(cè)script的onload事件,判斷所有模塊加載成功,執(zhí)行require的callback, 如果只帶一個(gè)參數(shù)且不是數(shù)組,就是加載成功后return 模塊。
//標(biāo)記已經(jīng)加載成功的個(gè)數(shù)
var REQ_TOTAL = 0;
//模塊導(dǎo)出
window.exports = {};
//記錄各個(gè)模塊的順序
var exp_arr = [];
//判斷是否數(shù)組
function isArray(param) {
return param instanceof Array;
}
//require 真正實(shí)現(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;
//模塊逐個(gè)加載
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) {
//檢測(cè)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)建一個(gè)script標(biāo)簽
function createScript(src, index) {
var $script = document.createElement('script');
$script.setAttribute('src', src);
$script.setAttribute('index', index);
return $script;
}
然后寫(xiě)了2個(gè)導(dǎo)出模塊的js文件, 只寫(xiě)了最簡(jiǎn)單的exports實(shí)現(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);
}
}
然后測(cè)試demo很簡(jiǎn)單
//測(cè)試demo
require(['../res/define.js', '../res/define2.js'], function(def, def2) {
def.define.sayHello();
def2.define.info();
});
以上就是小編為大家?guī)?lái)的一個(gè)極為簡(jiǎn)單的requirejs實(shí)現(xiàn)方法全部?jī)?nèi)容了,希望大家多多支持腳本之家~
- 在Html中使用Requirejs進(jìn)行模塊化開(kāi)發(fā)實(shí)例詳解
- 基于RequireJS和JQuery的模塊化編程日常問(wèn)題解析
- 使用requirejs模塊化開(kāi)發(fā)多頁(yè)面一個(gè)入口js的使用方式
- 基于RequireJS和JQuery的模塊化編程——常見(jiàn)問(wèn)題全面解析
- JavaScript模塊化之使用requireJS按需加載
- 一篇文章掌握RequireJS常用知識(shí)
- SeaJS 與 RequireJS 的差異對(duì)比
- RequireJS多頁(yè)面應(yīng)用實(shí)例分析
- 在JavaScript應(yīng)用中使用RequireJS來(lái)實(shí)現(xiàn)延遲加載
- angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例
- requireJS模塊化實(shí)現(xiàn)返回頂部功能的方法詳解
相關(guān)文章
JS實(shí)現(xiàn)可視化音頻效果的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可視化音頻效果的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
徹底搞懂JavaScript中的apply和call方法(必看)
下面小編就為大家?guī)?lái)一篇徹底搞懂JavaScript中的apply和call方法(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
js實(shí)現(xiàn)canvas保存圖片為png格式并下載到本地的方法
本篇文章主要介紹了js實(shí)現(xiàn)canvas保存圖片為png格式并下載到本地的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-08-08
Javascript實(shí)現(xiàn)鼠標(biāo)框選操作 不是點(diǎn)擊選取
這篇文章主要介紹了Javascript實(shí)現(xiàn)鼠標(biāo)框選操作,不是點(diǎn)擊選取,利用鼠標(biāo)進(jìn)行框選,感興趣的小伙伴們可以參考一下2016-04-04
setTimeout與setInterval在不同瀏覽器下的差異
setTimeout與setInterval是window對(duì)象的兩個(gè)非常神奇方法,用于實(shí)現(xiàn)定時(shí)或延時(shí)調(diào)用一個(gè)函數(shù)或一段代碼2010-01-01

