模板:ResourceLoader

前言

注意

本ResourceLoader为赛马娘wiki魔改版，支持模板:ES6与模板:React丨作者：素子ちゃん_official

• 使用mw.loader.load载入js脚本、css样式表或js模块。
• Js脚本仅限于MediaWiki命名空间下的页面。

使用方法

在需要的的页面写入

{{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"

Common.js代码添加

警告

请在Common.js添加相应的魔改ResourceLoader代码

/* 参见[[模板: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" + mw.config.values.wgScriptPath + "/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" + mw.config.values.wgScriptPath + "/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" + mw.config.values.wgScriptPath + "/index.php?title=MediaWiki:React.development.min.js&action=raw&ctype=text/javascript", function () {
                    $.getScript("//wiki.biligame.com" + mw.config.values.wgScriptPath + "/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" + mw.config.values.wgScriptPath + "/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" + mw.config.values.wgScriptPath + "/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);
}