JavaScript,简称JS,一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,在HTML网页上使用,用来给HTML网页增加动态功能。

在灰机wiki使用JavaScript

在灰机2.1.X版本中,将只有拥有开发者权限的用户可以修改JavaScript以及使用零件功能管理站点的JavaScript。

在灰机,拥有开发者权限的用户可以在一定条件下自定义站点JavaScript。具体方法包括:

  • 方法一:将站点需要使用的js文件添加到所在站点的Mediawiki:Common.js页面。该页面的脚本会在全站点默认加载,但会被CDN缓存,回源时间最长不超过24h,可以通过?debug=1指令暂时绕过进行调试,详情参考:帮助:Huiji缓存
  • 方法二:通过零件挂载的Gadget:xxx.js页面添加,这里的脚本是按需加载,即只有满足了零件本身的加载逻辑才会生效,与方法一类似,这里的脚本会被CDN缓存。
  • 方法三(需要开发者权限):通过html模板中的<script></script>标签插入一段JavaScript脚本,这里的脚本只会在调用嵌套了html模板的页面加载生效,但不会被CDN缓存,因此无需调试或等待刷新缓存。
    • 注意,如果在template模板中嵌套html模板来装载CSS,如果该模板被多次加载,CSS也会被多次加载,因此最好在嵌入方式仅被加载一次的情况下使用这种方法。
方法 加载方式 会否被CDN缓存 特性
全局加载 MediaWiki默认
按需加载 MediaWiki零件提供
未安装Gadget扩展无法使用
按需加载 不会 灰机wiki提供
非灰机wiki平台无法使用
参考:帮助:站点CSS编辑

需要注意的问题

在修改Javascript的过程中,您需要注意以下问题:

  • 请不要使用JavaScript修改属于灰机wiki的皮肤区域,包括但不限于头部、页脚、侧边栏、广告等。请确保您的编辑符合用户协议的约定。
  • 请不要过度修改JavaScript,以免造成读者阅读困难或网页卡顿。(比如过度使用alert命令。)
  • 修改JavaScript后,测试时应在url后加上?debug=1来绕过服务器缓存。
  • 修改JavaScript后,应尽可能在更多的浏览器上测试(其表现可能完全不同),并且需要照顾手机浏览器。
  • 请不要加载不明外部脚本,他们可能具有侵害性。
  • 请注意代码的可读性,撰写必要的注释和文档。

外部库

为了您的方便,下列外部库已经全局加载,可以直接使用。

  • MediaWiki
    • 如果你要认真的写一段JavaScript, 这个库是必看的。它提供了众多MediaWiki相关API的封装,没有必要重新发明轮子。
  • jQuery
  • Fontawesome 4.7
  • Bootstrap 3.2

可选库

  • OOjs — 一套面向对象的JS库,由Wikimedia设计。另有OOjs-UI,可视化编辑器中使用的UI系统。

模块化

MediaWiki:Common.js中的JavaScript代码将会全局加载。但是当开发者试图编写一套复杂的JavaScript代码时,单页显然是不够的。请参阅帮助:零件学习如何编写高扩展性的前端模块。

  • gadget:xxxx.js中的JavaScript文件可以设置为按需加载
  • gadget:xxxx.js中的JavaScript文件可以通过灰机数据更新器同步,方便在本地配合零件和module模块同时修改上传更新
  • gadget:xxxx.js中的JavaScript文件方便集成、打包、搬运

常用代码

在js中获取指定fileName的图片url

// 计算MD5
window.calcHexMD5 = function(){for(var m=[],l=0;64>l;)m[l]=0|4294967296*Math.abs(Math.sin(++l));return function(c){var e,g,f,a,h=[];c=unescape(encodeURI(c));for(var b=c.length,k=[e=1732584193,g=-271733879,~e,~g],d=0;d<=b;)h[d>>2]|=(c.charCodeAt(d)||128)<<8*(d++%4);h[c=16*(b+8>>6)+14]=8*b;for(d=0;d<c;d+=16){b=k;for(a=0;64>a;)b=[f=b[3],(e=b[1]|0)+((f=b[0]+[e&(g=b[2])|~e&f,f&e|~f&g,e^g^f,g^(e|~f)][b=a>>4]+(m[a]+(h[[a,5*a+1,3*a+5,7*a][b]%16+d]|0)))<<(b=[7,12,17,22,5,9,14,20,4,11,16,23,6,10,15,21][4*b+a++%4])|f>>>32-b),e,g];for(a=4;a;)k[--a]=k[a]+b[a]}for(c="";32>a;)c+=(k[a>>3]>>4*(1^a++&7)&15).toString(16);return c}}();

// 拼图片url
window.getImageUrl = function(filename) {
    var hex = window.calcHexMD5(filename)
    return [
      'https://huiji-public.huijistatic.com/'+mw.config.get('wgHuijiPrefix')+'/uploads',
      hex[0],
      hex[0] + hex[1],
      filename
    ].join('/')
}

使用案例

// fileName = '图片.png'
var url = getImageUrl(fileName)
avatar