一個極為簡單的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多頁面應用實例分析
- 在JavaScript應用中使用RequireJS來實現(xiàn)延遲加載
- angularJS+requireJS實現(xiàn)controller及directive的按需加載示例
- requireJS模塊化實現(xiàn)返回頂部功能的方法詳解
相關文章
TypeScript中Array(數(shù)組)聲明與簡單使用方法
這篇文章主要給大家介紹了關于TypeScript中Array(數(shù)組)聲明與簡單使用的相關資料,TypeScript Array(數(shù)組)數(shù)組對象是使用單獨的變量名來存儲一系列的值,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12

