赛马娘通用JS库

概述

赛马娘通用JS库旨在集中JS开发中常用的函数、类、变量等

这么做有以下优点

• 提高代码复用性
• 让开发者无需关注通用功能的开发
• 让不了解本WIKI的开发者迅速了解已有的函数封装

你可以做

• 使用Uma.js
• 添加新的收录
• 添加新的收录文档

你不能做

• 在没有明显BUG的情况下大幅修改或优化代码
• 移除非几日内添加的条目
• 添加过长的代码库，类似于Jquery、Vue、highlight.js
• 添加没有任何通用性的代码，类似于与html页面绑定的js代码

引入方法

请所有使用import的JS文件使用{{ES6|}}模板引入，widget请使用<script type="module"></script>

//请在需要使用的js文件中使用下列语句引入
import Uma from "./index.php?title=MediaWiki:Uma.js&action=raw&ctype=text/javascript";

收录方法

添加代码

请在添加后一定要测试，确定能够正常使用

尽量把函数或变量封装在命名空间中，如Uma.parse。如果你觉得函数过于通用，也可以封装在Uma.tools中。

在MediaWiki:Uma.js下通过如下两种方法的一种添加代码

//方法一：直接添加
Uma.mineVar = "I'm a umamusume";
Uma.mineFun = function(mineName) {
    return `I'm a umamusume named ${mineName}`
}
Uma.mineClass = class {
    //懒得写了，一般用类的实例
    //balabala
}
Uma.mineObject = {
    //定义出一个命名空间，类似于Uma.tools Uma.parse 等
    //然后就可以套娃了（
    fun1: function() {
        //fun1 balabala
    }
    fun2: function() {
        //fun2 balabala
    }
}

//方法二：间接添加
//在Uma.js的最开头加上
import mineBigThings from "./index.php?title=MediaWiki:MineBigThings.js&action=raw&ctype=text/javascript";
//......
//balabala
//......
//然后再找个地方登记
Uma.mbt = mineBigThings;

添加收录文档

以下是文档的模板

<!-- 函数模板 -->
==命名空间==
'''命名空间概述'''
===函数A:function(参数1, 参数2) 函数A的简要功能===
*param:参数1 参数1类型 参数1介绍
*param:参数2 参数2类型 参数2介绍
*return 返回类型 返回介绍
===函数B:function(参数1, 参数2) 函数B的简要功能===
*param:参数1 参数1类型 参数1介绍
*param:参数2 参数2类型 参数2介绍
*return 返回类型 返回介绍

<!-- 变量模板 -->
==命名空间==
'''命名空间概述'''
===变量A:变量类型 变量A的简要功能===
===变量B:变量类型 变量B的简要功能===

收录

Uma.tools

Uma.tools可以放入所有页面开发中都可能用到的单例函数

isMobile:function() 判断移动端

• return bool 当前设备是移动设备时，返回true

inBiliApp:function() 判断是否在app中

• return bool 在bilibili app时，返回true

isLogin:function() 判断用户登录状态

• return bool 当前bilibili账号登录时，返回true

getCurPos(el) 获取input或textarea的光标位置

• el htmlElement input或textarea的html对象
• return number 光标位置

setAtCur(el, val) 在input或textarea光标位置插入值

• el htmlElement input或textarea的html对象
• val string 插入的内容
• return undefined

tippy(parent) 在dom改变后，需要重新载入tippy弹窗

• parent string 可选值，tippy任意父节点的名字，用于精确定位，请使用jq的查询格式，如.root #parent
• return undefined

Uma.parse

Uma.parse是WIKI动态解析API的封装，用于解析WIKI文本

wikiParser:function(wikitext, callback) 解析WIKI文本 不推荐

• param:wikitext string 需要解析的wiki文本
• param:callback object 解析完成后的回调函数

//callback格式
{
    "success": function(result) { 
        //成功函数 
        //result是解析得到的html代码
    }, 
    "fail": function(error) {
        //失败函数
    }
}

• return 无需关注

wikiParserPro:function(wikitext) 解析WIKI文本 推荐

• param:wikitext string 需要解析的wiki文本
• return Promise 返回一个Promise对象

//wikiParserPro使用例
//本例使用了ES6语法，你也可以使用ES5老语法
import Uma from "./index.php?title=MediaWiki:Uma.js&action=raw&ctype=text/javascript";
const parse = Uma.parse;
//每次解析都会更新到最新的时间戳
const wikitext = `{{注意|哇！解析成功了！ '''现在的时间戳是${Date.now()}''' }}`;
parse.wikiParserPro(wikitext).then(
    res => {
        //你可以使用其他语句作你想要的处理
        $("#mw-content-text").append(res);
        console.log("parse complete!");
    }, 
    err => {
        $("#mw-content-text").append("解析失败");
        console.log(err);
    }
);

可以看到，不同的时间运行会更新到最新的时间戳，实现动态解析WIKI文本

Uma.api

Uma.api是WIKI API的封装，用于访问WIKI的API

GET:function(param, symbol) GET请求WIKI的api

• param:param object 访问api时提交的参数
• param:symbol symbol 给api指定symbol，已默认指定一个Symbol对象（用于分类，供abort()函数精准终止请求，你通常不需要指定）
• return Promise 返回一个Promise对象

POST:function(param, symbol) POST请求WIKI的api

该函数默认为你请求了csrftoken，因为通常情况下，这是必须的，如果你不需要请求csrftoken，请使用POST_notoken函数

• param:param object 访问api时提交的参数
• param:symbol symbol 给api指定symbol，已默认指定一个Symbol对象（用于分类，供abort()函数精准终止请求，你通常不需要指定）
• return Promise 返回一个Promise对象

POST_notoken:function(param, symbol) POST请求WIKI的api（不请求csrftoken）

• param:param object 访问api时提交的参数
• param:symbol symbol 给api指定symbol，已默认指定一个Symbol对象（用于分类，供abort()函数精准终止请求，你通常不需要指定）
• return Promise 返回一个Promise对象

abort:function(symbol) 终止指定symbol的所有请求

• param:symbol symbol 给api指定symbol，已默认指定一个Symbol对象（用于分类，供abort()函数精准终止请求，你通常不需要指定）
• return object 返回一个结果object

//结果object的格式，你通常不需要关注
{
    "num": /*终止请求的数目*/, 
    "symbol": /*终止请求的symbol*/, 
    "queue": /*当前仍在请求的队列*/
}

GET/POST使用例

//GET使用例
//本例使用了ES6语法，你也可以使用ES5老语法
import Uma from "./index.php?title=MediaWiki:Uma.js&action=raw&ctype=text/javascript";
const api = Uma.api;

//取得csrfToken
//这只是一个教程示例，在新的POST函数中，它可以自动为你获取csrfToken
api.GET({action:"query",meta:"tokens",format:"json"}).then(
    res => {
		const token = res.query.tokens.csrftoken;
		if (token === undefined) {
			alert("Getting CSRFtoken: Fail");
		} else {
			alert(`CSRFtoken: ${token}`);
		}
	},
    err => console.log(err)
);

Uma.lang

traditionalize:function(cc) 繁体化

• param:cc string 需要转繁体的字符串
• return string 转换后的字符串

simplize:function(cc) 简体化

• param:cc string 需要转简体的字符串
• return string 转换后的字符串

Uma.base64

此部分为Jquery的base64源码，提供base64的编解码

encode:function(strUni) base64编码

• param:strUni string 需要编码的字符串
• return string 编码后的字符串

decode:function(strUtf) base64解码

• param:strUtf string 需要解码的字符串
• return string 解码后的字符串

Uma.animate

此部分依赖于animate.js插件

showZ:function($el) 以ZoomIn动画显示

• param:$el jquery对象 需要显示的对象
• return undefined

hideZ:function($el) 以ZoomOut动画隐藏

• param:$el jquery对象 需要隐藏的对象
• return undefined

hideHover:function($el) hover隐藏补丁，防止动画过程中用户的小手不干净

• param:$el jquery对象 需要隐藏的hover
• return undefined