【腾讯云的1001种玩法】利用腾讯云搭建实用小工具

原创

世玉

修改于 2017-06-19 19:12:35

4.2K0

腾讯公司一直以来产品就深受我的喜爱，自QQ以来，到微信支付再到LOL，所以这次选择腾讯云服务器作为我的研究对象，一来是亲切感，二来是相信腾讯的技术实力。

作为一个java程序猿，一直以来都是在于时间做赛跑，很多时间花费在软件启动的等待上面，这对于我来说是一种浪费。我个人以为，如果只是做一个简单的demo片段，或者测试某一段代码，就得去开启某些占用内存的IDE，并且花费数秒甚至1分钟去等待软件启动这很不明智，所以我打算打造一个个人常用工具集，当然这对于我来说是有用的，而对于其它人来说，同样也是有用的。

工具1：HTML代码演示工具

逛过W3School的人都知道，W3school上面有一个可以测试HTML代码的工具，非常好用，而且轻巧，而且好用而且轻巧，重要的事我一般说2遍。那么我为什么还要再造轮子？原因很简单，一个是想知道它的运行原理，之前没认真研究过，所以我想知道它是怎么运作的，这也是我的求知欲作祟，二来是因为W3school的服务器这一年来明显的感觉不行了，以前代码提交以后可以立即响应，而现在代码提交了等待的时间可以跟我打开IDE有的拼了，这里所以还是要赞一下腾讯云服务器，响应速度快。还有第三个原因，他们现在全都是谷歌以及百度的广告在旁边....

然后就是环境搭建演示了

我的后端使用的tomcat+java+mysql的技术，前端使用的H5技术，环境部署见百度，传送门。

这个工具由于基本不与后端做数据交互，所以就别问我后端是怎么写的了，因为说了也没用，我们就看前端吧~

演示地址

此工具使用的是HTML5技术，利用ActiveXObject 创建而成，由于js的安全性考虑，只可以本地使用这个插件，所以各位看客可以下载到本地使用，直接右键查看源代码即可。

代码解析：

<meta name="viewport" content="width=device-width, initial-scale=1"  />
<!--响应式页面-->
<!--[if  lt IE 9]>
<script  src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

上面这一段是响应式页面设置的meta，使得这个页面可以在手机或者pad上面也可以正常浏览

这里是核心js部分，我将在代码中注释出关键点

<script>
function submitTryit(){
	var fso = new ActiveXObject("Scripting.FileSystemObject"); //这里创建ActiveXObject 对象，此对象只适用于IE模式
	var Html_src=document.location; //这里获取浏览器地址栏地址

	document.getElementById("HTML_src").value=Html_src;	//暂存数据
	Html_src=document.getElementById("HTML_src").value; //取值
	Html_src2=Html_src.substring(0,Html_src.lastIndexOf("/")+1)+"ceshi.html"; //操作字符串
	var file=Html_src2.substring(8); //去掉协议头
	
	if(fso.FileExists(file)){
		fso.DeleteFolder (file);
		var f1 = fso.CreateTextFile(file, true);
		if(fso.FileExists(file)){
			console.log("文件创建成功");
		}
	}else{
		var f1 = fso.CreateTextFile(file, true);
		if(fso.FileExists(file)){
			console.log("文件创建成功");
		}
	}	
	var content=document.getElementById("TestCode").textContent;
	document.getElementById("i").src=file;
	f1.WriteLine(content);
	console.log("文件写入成功");
	f1.Close();
	//location.reload();	//自动刷新会丢失代码
	var totalzifushu=content.length;
	console.log("字符数:"+content.length);
	document.getElementById("zitotal").value=totalzifushu;
}
</script>

前面的代码没有上面亮点，值得一提的是这一段代码：

document.getElementById("HTML_src").value=Html_src;	//暂存数据
Html_src=document.getElementById("HTML_src").value; //取值
Html_src2=Html_src.substring(0,Html_src.lastIndexOf("/")+1)+"ceshi.html"; //操作字符串
var file=Html_src2.substring(8); //去掉协议头

这里是讲地址栏的地址进行一次字符串的截取操作，然后拼接生成的那个页面，组成新的地址，以便于在iframe中使用。

document.getElementById("HTML_src").value=Html_src;	//暂存数据
Html_src=document.getElementById("HTML_src").value; //取值

这里是在那个隐藏的input那里做一个数据的暂存然后取值，由于js的可以操作DOM文档独特性，有时候这一招十分管用。

if(fso.FileExists(file)){
		fso.DeleteFolder (file);
		var f1 = fso.CreateTextFile(file, true);
		if(fso.FileExists(file)){
			console.log("文件创建成功");
		}
	}else{
		var f1 = fso.CreateTextFile(file, true);
		if(fso.FileExists(file)){
			console.log("文件创建成功");
		}
	}

这里的代码则是对文件做一个判断，是否已经存在文件了，如果不存在，则创建，如果已存在，删除旧文件然后创建新文件

var content=document.getElementById("TestCode").textContent;
document.getElementById("i").src=file;
f1.WriteLine(content);
console.log("文件写入成功");

这里则是讲那个文本区域里面的值写入到创建的文件中，js里面我没有查到有流的说法，这估计也是安全性考虑吧。

这里创建的文件将会在iframe当中被引用，所以在右侧即可看到那个新生成的HTML文件，不过由于刷新的问题不好处理，所以我只得让其手动刷新，当然此工具还提供了一个小工具，那就是字符数个数的读取，比如您有一大片文档需要统计字数（事实上这样的事情时常发生），您可以直接粘贴到文本域里面，它将会自动给你统计出来。也算是在W3School的工具上面重写并拓展了其功能吧。

CSS部分也就是利用的CSS3的媒体查询，来匹配移动设备，这不是我所想讲的，如有兴趣，可以直接向我提问，或者百度吧。

结论:

此工具也是我上班时候闲暇时间写的，本是为了方便自己，以及一个同事的，所以当时并没有考虑到将其置于服务器上，由于忽略了ActiveXObject组建不可以跨域的问题，所以各位看客没办法在服务器段执行代码，如果有时间，我会考虑使用java代码重写这个小工具，以便于服务器端也可以方便使用，这个工具当然优点也是有的，比如在断网的情况下呢？如果您刚好下载了这个工具，您就可以方便的在手机或者pad或者PC上面做代码测试了，您多半不会在手机安装HTML的IDE不是么？

相关推荐

ide