模板:ResourceLoader
- 本模板转载自：方舟指令WIKI
- 区别于直接增加代码至common.js页面的全局加载的做法，ResourceLoader加载JS可控制页面JS数量，提升加载效率并预防JS冲突。
- 使用mw.loader.load载入js脚本、css样式表或js模块。
- Js脚本仅限于MediaWiki命名空间下的页面。
{{ResourceLoader|你的js/css/js模块}}
参数列表：
#1 页面名称或模块名称。 isModule 当值为"true"时，载入js模块或小工具，并忽略后面的参数。 MIME "text/javascript" 或 "text/css"
模板:教程标题
本ResourceLoader为赛马娘wiki魔改版，支持模板:ES6与模板:React丨作者：素子ちゃん_official
{{ResourceLoader|你的js/css/js模块}}
参数列表：
#1 页面名称或模块名称。 isModule 当值为"true"时，载入js模块或小工具，并忽略后面的参数。 isModuleES6 当值为"true"时，载入ES6模块，并忽略后面的参数。 isModuleReact 当值为"[true,true]"时，载入React并载入JSX模块，并忽略后面的参数。 当值为"[false,true]"时，不载入React，载入JSX模块，并忽略后面的参数。 MIME "text/javascript" 或 "text/css"
模板:提示 <syntaxhighlight lang="javascript" line> /* 参见模板:ResourceLoader*/ /* 将相关代码用改为DOM加载完成后运行，解决部分情况 模板:ResourceLoader加载不完全的问题 -- 芙兰朵露琪露诺 2021/8/11*/
function templateResourceLoader() {
$('.resourceLoader').each(function() {
var $x = $(this);
var text = $.trim($x.text());
if (!text) return;
//加载模块 if ($x.data('isModule') == true) return mw.loader.load(text);
//自动补充MediaWiki命名空间 var ns = text.match('^.*?:'); if (!ns) text = 'MediaWiki:' + text;
//加载CSS样式表 var mime = ($x.data('mime') || "text/javascript").toLowerCase(); if (mime == "text/css") { if (text.slice(-4).toLowerCase() !== '.css') text = text + '.css'; //if ($x.data('debug') !== true) text = text + '&debug=false'; return mw.loader.load("//wiki.biligame.com/umamusume/index.php?title="+text+"&action=raw&ctype=text/css", "text/css"); }
//加载JS脚本 if (ns && ns[0].toLowerCase() !== 'mediawiki:') { return console.log('ResourceLoader: 不允许加载MediaWiki以外的js脚本'); } if (text.slice(-3).toLowerCase() !== '.js') text = text + '.js'; //加载ES6模块 if ($x.data('isModuleEs6') == true) return loadModuleES6("//wiki.biligame.com/umamusume/index.php?title="+text+"&action=raw&ctype=text/javascript", function() { console.log("ResourceLoader: 加载ES6模块 => " + text); }); //加载React模块 if ($x.data('isModuleReact')) { if ($x.data('isModuleReact')[0]) { $.getScript("//wiki.biligame.com/umamusume/index.php?title=MediaWiki:React.development.min.js&action=raw&ctype=text/javascript", function() { $.getScript("//wiki.biligame.com/umamusume/index.php?title=MediaWiki:React-dom.development.min.js&action=raw&ctype=text/javascript", function() { console.log("ReactENV => React/ReactDOM Loaded! React is Available For This Page!"); console.log("%c React开发提示 %c 请务必在JS编辑界面右下角使用React同步器同步编译你的JSX代码，否则它将不起任何作用", "color: #fff; padding: 5px 0; background: blue;", "padding: 5px 5px 5px 0; background: #e5e5ff; color:blue"); $('.resourceLoader').each(function() { var $xr = $(this); var textr = $.trim($xr.text()); if (!textr) return; //自动为React模块补充MediaWiki命名空间与-babel后缀 var nsr = textr.match('^.*?:'); if (!nsr) textr = 'MediaWiki:' + textr.slice(0, -3); textr += '-babel.js'; if ($xr.data('isModuleReact') && $xr.data('isModuleReact')[1]) { loadModuleES6("//wiki.biligame.com/umamusume/index.php?title="+textr+"&action=raw&ctype=text/javascript", function() { console.log("ResourceLoader: 加载React模块 => " + textr); }); } }); }); }); return; } } //加载普通脚本 console.log('ResourceLoader: 加载JS => ' + text); //if ($x.data('debug') !== true) text = text + '&debug=false'; return mw.loader.load("//wiki.biligame.com/umamusume/index.php?title="+text+"&action=raw&ctype=text/javascript", "text/javascript"); }); }
if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', templateResourceLoader); } else { templateResourceLoader(); }
//加载ES6模块 function loadModuleES6(src, callback) { var script = document.createElement('script'), head = document.getElementsByTagName('head')[0]; script.type = 'module'; script.charset = 'UTF-8'; script.src = src; if (script.addEventListener) { script.addEventListener('load', function () { callback(); }, false); } else if (script.attachEvent) { script.attachEvent('onreadystatechange', function () { var target = window.event.srcElement; if (target.readyState == 'loaded') { callback(); } }); } head.appendChild(script); } </syntaxhighlight>
