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

腾讯公司一直以来产品就深受我的喜爱,自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不是么?

相关推荐

【腾讯云的1001种玩法】激发云力量--打造我的云端工具集

【腾讯云的1001种玩法】利用腾讯云搭建个人博客

最佳上云实践机

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿北的知识分享

浅谈csrf攻击以及yii2对其的防范措施

今天北哥就给大家普及下csrf是啥?如果你已经知道了可以直接拉文章到底部点个赞。:smile:

1586
来自专栏FreeBuf

初学者福利:XVWA黑客靶场发布

简介 Xtreme Vulnerable Web Application (XVWA)是一款使用PHP/MySQL编写的靶场,可以帮助初学者快速学习安全姿势。 ...

2555
来自专栏编程微刊

layer弹框在实际项目中的一些应用

1575
来自专栏星流全栈

最新的15 个有趣的前端库(December 2016)

1313
来自专栏点滴积累

网络爬虫之投票

一、前言        在你心中什么是网络爬虫?在网线里钻来钻去的小虫?先看一下百度百科的解释: 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,...

3496
来自专栏编程

前端异常监控系统

来源:子慕大诗人 http://www.cnblogs.com/1wen/p/7942608.html 导火索 有一天一个测试同事的一个移动端页面白屏了,看样子...

3257
来自专栏小特工作室

Navi.Soft31.WebMVC框架(含示例地址)

1概述 1.1应用场景 互联网高速发展,互联网软件也随之越来越多,Web程序越来越被广泛使用.它部署简单,维护方便,深得众多软件公司使用 Bootstrap前端...

2097
来自专栏weixuqin 的专栏

django 实现电子支付功能

  思路:调用第三方支付 API 接口实现支付功能。本来想用支付宝来实现第三方网站的支付功能的,但是在实际操作中发现支付宝没有 Python 接口,网上虽然有他...

812
来自专栏程序人生

手把手教你做个生成静态网页的小工具:podgen

程序人生之图穷匕见的podcast发了四期(三期正式的)后,有几个读者说在微信上听效果不好,又没法暂停(停下后再听又从头开始了),能不能在iTunes 播客里面...

3439
来自专栏前端小作坊

第三方Javascript开发系列之投放代码

本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起:Google Analytics(以下简称GA),是Google提供的...

792

扫码关注云+社区