用全局变量记录调用深度,直观展现递归过程

一个小小的 JavaScript 框架,用全局变量记录调用的深度,用 console.log() 直观展现递归过程,以利调试或演示。

Abstract: 一个小小的 JavaScript 框架,用全局变量记录调用的深度,用 console.log() 直观展现递归调用的过程,以利调试或演示。


最近写了一个 JavaScript 的扫雷游戏。当玩家点开一个空白格子,一大片空白格子都会打开。为了实现这一特性,我采用了递归算法。

因为本人水平有限,难以一次写对,又因为本人水平有限,只会用 console.log() 进行调试。。所以写了点代码,用 console.log() 直观地展现出递调用的过程。感觉这个小小的框架完全可以复用,于是就发在这里了。。

//全局变量
var depth=0;
function openBox(x,y){
	//递归终止条件
	//if(...) return;
	
	depth++;
	var str='';
	for (var i = 0; i < depth; i++)str += ' ';
	console.log(str + '<' + x + ',' + y);
	
	//主要代码
	//...
	//openBox(a,b)...
	//...
	
	console.log(str + '/' + x + ',' + y);
	depth--;
}

我们将在控制台得到以下直观优美的图形:

(完)

像薛定谔一样查分……附查分脚本简易SDK

鼠标一点,成绩单一览无余,这太残酷了。如何优雅地文明地查到分数?本文实现了一个SDK,可在此基础上写出查分用的UserScript;作为该SDK的示例,给出“薛定谔的查分”脚本。

查分是一件令人痛苦的事情。鼠标一点,全部成绩毫无遮拦地就会展现在你眼前。这太残酷了。为了减轻这种痛苦,前辈们做过很多工作,开过很多脑洞。比如 这里这里,还有这里(均为人人网日志,可能需要登录)。

不管是“刮刮乐”,还是“玻璃心”,其思想都是每次只提供成绩信息的一部分,来使查分者得到更多的心理缓冲。这方面可以考虑的玩法还有很多,比如今天我要介绍的,——像薛定谔一样查分。

如果你安装了这个脚本(下载地址和安装方法见后),当你查成绩的时候,你的分数都会被隐藏起来,变成了“观测”按钮:

当你点击这个按钮,程序会要求你提供一个区间宽度:

然后你就会得到一个区间。宽度是你指定的值。而你的真实分数可能是这个区间内的任何一个数(含端点)。

就像薛定谔关于猫的那个经典的思想实验一样,由于量子随机性(误)和观测条件(误)的共同限制(误),“你无法确切地知道自己的分数”……

你可以随意指定区间宽度,可以观测任意多次。推荐的玩法是,先从很大试起,慢慢缩小区间宽度,直到减小到 0,你就得知了自己的确切成绩。

支持校内,支持校外sslvpn,支持中文成绩单,也支持英文的,支持老门户,支持排名查询页面,一网打尽。

如果你不去修改代码的话……是只适用于清华滴

脚本下载地址:http://200404.sinaapp.com/scripts/SchrodingerGrade.user.js

安装教程:(回头再详细写。。。。你可能需要先安装个插件,比如 Firefox 上的 GreaseMonkey 或者 Chrome 上的 TamperMonkey,然后把这个脚本挂载上去)


//以下内容写给开发者

下面我将要贴 JavaScript 源代码。事实上,它可以被作为一个 SDK 使用。这样是为了避免重复劳动,方便大家发挥创意,共同携手,使查分的过程更加美好~~~~

基于该 SDK 开发查分脚本非常简单,你只需要自己写一个 ReplaceHTML 函数,再修改一下前几行的 meta 信息,就可以拿出去分发了。ReplaceHTML 函数接受的参数是表示成绩的字符串,返回用来替换显示的 HTML。详见注释。后面有更多的示例。

// ==UserScript==
// @name          Schrodinger's Grade
// @author        Zhaoyang - http://200404.sinaapp.com/
// @namespace     200404_Schrodinger_Grade
// @description   薛定谔的查分
// @version       0.1
// @include       *://*.tsinghua.edu.cn*bks_yxkccj*
// @include       *://*.tsinghua.edu.cn*yjs_yxkccj*
// @include       *://*.tsinghua.edu.cn*bks_cjdcx*
// @include       *://*.tsinghua.edu.cn*yjs_cjdcx*
// @include       *://*.tsinghua.edu.cn*cj.cjCj*
// ==/UserScript==


/********************************

ReplaceHTML

gradeStr: string,  such as '80', '***', '合格'
gradeID : integer, a unique ID for each grade, starting from 0

return: a string contaning HTML, to be displayed in place of grade

**********************************/

function ReplaceHTML(gradeStr, gradeID){
	if(gradeStr=='***'||gradeStr=='') return '暂无成绩';
	var x=parseInt(gradeStr);
	var divID="GradeBox"+gradeID;
	var onclickscript;
	if(isNaN(x)){
		onclickscript="javascript:if(confirm('成绩不是数字。是否直接显示?')) \
		document.getElementById('"+divID+"').innerHTML='" + gradeStr + "'"
	}
	else{
		onclickscript="javascript:var range=prompt('请输入区间宽度'); \
		range = parseInt(range); \
		if(range>100)range=100; \
		rand=Math.floor(Math.random() * ( range + 1)); \
		x=" + x +"; \
		a= x-rand; \
		b= x+range-rand; \
		if(b>100){b=100;a=100-range;} \
		if(a<0){a=0;b=range;} \
		document.getElementById('"+divID+"').innerHTML=a+' - '+b;";
	}
	var html="
"; return html; } //查分脚本简易 SDK //您只需要自己实现 ReplaceHTML 函数即可 //By Zhaoyang, 2015.2, http://200404.sinaapp.com/ function main(){ var i,j; var tableGrade; { var tables = document.getElementsByTagName("table"); for (i=0; i

这个 SDK 给出了一系列以通配符表示的需要处理的地址(@include),负责了从页面上寻找成绩的工作——如前所示,它支持校内网直接访问的和 sslvpn 的,支持包括老门户、排名查询在内的所有地方的成绩栏,支持中文也支持英文。

最后再编几个,基于这个 SDK 的简单例子吧。

//这个例子什么都不做
function ReplaceHTML(gradeStr, gradeID){
	return gradeStr;
}
//这个例子显示随机数
function ReplaceHTML(gradeStr, gradeID){
	return Math.floor(Math.random()*(101));
}
//这个例子显示一个按钮,点击后弹出成绩
function ReplaceHTML(gradeStr, gradeID){
	var onclickscript="javascript:alert('" + gradeStr + "');"
	var html="";
	return html;
}
//这个例子改变字号,分越高,字越大。。
function ReplaceHTML(gradeStr, gradeID){
	var size=parseInt(gradeStr)/5;
	if(isNaN(size))size=12;
	var html="

" + gradeStr + "

"; return html; }

为了便于本地调试,我还给各位制作了一个简单的 HTML 页面,请将它下载到本地使用。——使用时在控制台定义你的 ReplaceHTML() 函数,然后调用 main() 即可。

所以说完整的 SDK 含有两个文件,一个 .user.js 和 一个 .html。下载链接:http://200404.sinaapp.com/scripts/GradeSDK.zip

(完)