月度归档:2013年06月

集成Google翻译工具

Google的翻译质量还是很高的。要集成翻译工具其实非常简单,明白如下URL即可:
http://translate.google.com/translate?u=http://shipping.vfeelit.com&sl=en&tl=it&hl=it&ie=UTF-8

u         要翻译的URL链接地址
sl        源URL网页的语言
tl        要翻译成那种语言
hl        Google页面语言,一般和tl相同
ie        编码

Google翻译
在具体集成中,只要动态修改u的值即可。

效果参考:Google翻译工具参考

永久链接:http://blog.ifeeline.com/915.html

Javascript JSON字符串生成工具

jQuery中可以把JSON字符串进行解析,但是没有提供把对象或数组变成JSON字符串的工具。有时需要把客户端的数据生成JSON字符串,然后传送到PHP,在PHP中用json_deconde()或json_encode()来处理这种数据,非常方便。

经过搜索,找到了一个工具,下载地址:https://github.com/douglascrockford/JSON-js

这个包里面的json2.js是json.js的替代版本。只需要把json2.js引入即可。

这个文件创建一个全局的叫JSON的对象,它有两个方法stringify 和 parse.( This file creates a global JSON object containing two methods: stringify and parse.),stringify就是把对象或变量变成JSON字符串的方法,parse是解析JSON字符串变成对象或数组的方法。从源代码可知,它还扩展了Javascript内置对象的方法:

    if (typeof Date.prototype.toJSON !== 'function') {

        Date.prototype.toJSON = function () {

            return isFinite(this.valueOf())
                ? this.getUTCFullYear()     + '-' +
                    f(this.getUTCMonth() + 1) + '-' +
                    f(this.getUTCDate())      + 'T' +
                    f(this.getUTCHours())     + ':' +
                    f(this.getUTCMinutes())   + ':' +
                    f(this.getUTCSeconds())   + 'Z'
                : null;
        };

        String.prototype.toJSON      =
            Number.prototype.toJSON  =
            Boolean.prototype.toJSON = function () {
                return this.valueOf();
            };
    }

Date 和 String Number Boolean都可以用toJSON来变成JSON字符串(实际上只有Date的toJSON比较有意义)。自定义对象或数组转换成JSON字符串参考:

var json = ['a','b','c'];
alert(JSON.stringify(json));

就能获取JSON字符串。更加详细的用法可以参考json2.js文件中的注释。

永久链接:http://blog.ifeeline.com/913.html

jQuery插件收藏 – Base64

在客户端进行Base64编码对于数据传送非常有利,比如在HTML中的表单的密码框的数据默认就是使用Base64编码传送的。不过想要自己实现把客户端的数据进行base64进行传送,就需要自己手动转换了。不过在jQuery里,有一款叫Base64的插件,实现了客户端的Base64的编码,下载地址:http://plugins.jquery.com/base64/

jQuery Base64

这个插件代码不多,实际也不复杂。用法参考下载包中的例子:

        var dec = $('#decode'),
            enc = $('#encode');

        // you can set utf8 encoding and decoding via global option
        // possible options:
        // `utf8encode` - utf8 encoding only (default: `false`)
        // `utf8decode` - utf8 decoding only (default: `false`)
        // `raw` - both (default: `true`)
        $.base64.utf8encode = true;

        enc.keyup(function () {
            dec.val($.base64.btoa(this.value));
            // also possible:
            // dec.val( $.base64('encode', this.value) );
            // dec.val( $.base64.encode(this.value) );
        });


        dec.keyup(function () {
            // note: you can pass a third parameter to use the utf8 en- / decode option
            enc.val($.base64.atob(this.value, true));
            // also possible:
            // dec.val( $.base64('decode', this.value) );
            // dec.val( $.base64.decode(this.value) );
        });

$.base64.utf8encode默认是false,可以设置它对utf8进行编码,JS使用的是utf8编码,所以可能需要修改。(对应的有$.base64.utf8decode)。

之后可以直接使用$.base64.btoa()进行编码,使用$.base64.atob()进行解码。这两个名字比较TMD不直观,实际上它们对应$.base64.encode()和$.base64.decode(),直接使用这两个函数即可。这两个函数的第二参数直接是否使用utf8编码,如果使用了全局设置,这个参数可以忽略。

最后,还有超级函数,就叫$.base64(),它有三个参数,第二第三参数跟上面的函数一样,第一个参数指定是编码还是解码(encode 或 decode)。

一般直接使用$.base64.encode()和$.base64.decode()就可以了(记得第二参数直接编码)。

永久链接:http://blog.ifeeline.com/910.html

Firefox插件ReloadEvery自动刷新

写了段自动抓取的脚本(使用Linux的crontab),由于程序考虑不周导致一个资源循环抓取,最终被对方服务器禁止了IP,改良程序后,只能让它在我的电脑上运行了。不过我希望每隔一段实践执行一次,看起来windonws的计划任务也是可以利用的,不过我这次使用Firefox插件ReloadEvery来自动刷新。

安装ReloadEvery,在一个需要定时执行的标签中右击:
Firefox reload_every插件

每隔5分钟刷新一次,跟计划任务媲美~~

永久链接:http://blog.ifeeline.com/907.html

Javascript压缩工具

压缩脚本的工具有很多,有JSMin,或是YUI Compressor,它们都可以用来压缩脚本文件(后者还可以处理CSS)。还可以用Google Closure Compiler。Google Closure Compiler有多种用法,例如网页版,网络API版,还有独立应用程序版。和YUI Compressor不同的是,YUI Compressor是一个压缩器(Compressor),而Google Closure Compiler更是一个编译器(Compiler),也就是说Google Closure Compiler的压缩并不仅仅是去除注释和空白,还可以在保证代码正确性的情况下进一步地改写成更省空间的做法,一个字节算一个字节,例如:

a = new Object    => a = {}
a = new Array     => a = []
if (a) b()        => a && b()
return 2 * 3;     => return 6;

Closure Compiler是一个JavaScript优化器,将Web应用编译成压缩的、高性能的JavaScript代码。编译器去除无效代码,并将剩余代码重写并压缩,使Web应用能够快速在浏览器的JavaScript引擎上执行。

Google Closure Compiler网页版本:http://closure-compiler.appspot.com/home (我这里需要翻墙)
Google Closure Compiler

jquery-1.10.1.js为压缩版本是268K,使用”Whitespace only”得到的结果是139K,使用”Simple”得到的是91.92KB,而使用”Advanced”得到的是83.1K,而jQuery官方提供的jquery-1.10.1.min.js版本是91K。使用Simple方式得到的代码容量和jQuery官网提供的压缩版本非常接近。

“Generally the best way to do it is to use the Google Closure Compiler (used by jQuery) or YUI compressor. jQuery provides a pre-minified version of jQuery for your convenience.

Packing JavaScript using Dean Edwards’ Packer (specifically using the base64 encode) is not recommended, as the client-side decoding has significant overhead that outweighs the file-size benefits.

压缩最好的工具是Google Closure Compiler (jQuery使用) 或者 YUI compressor,Dean Edwards’ Packer不推荐使用。

Dean Edwards’ Packer的在线工具:http://dean.edwards.name/packer/(JS实现):
packer

不过Dean Edwards’ Packer还提供了PHP等的实现版本,可以访问:Dean Edwards’ Packer – PHP版本
php-packer

Packer压缩虽然很小,但是传递到客户端后需要消耗客户端的计算资源来反压缩,相对消耗的资源来说,得到的容量下降比较不划算,如果结合使用gzip压缩,它的优势就完全没有了。不过为了制造一些让人完全看不懂的代码,packer在这方面用得就比较多了。经过packer压缩的代码传递到客户端后,需要自解压成原始代码,这个就是要把压缩的代码放入eval函数中的原因,而想用它来加密JS,基本是徒劳的,JS是解释执行的,再如何加密都必须是JS能解释的代码,你可以把代码进行变量替换等干扰操作,但这个无法阻止别人去分析窥探你代码的逻辑。

一般,经过packer压缩的代码,只要把eval函数里面的代码传递给document.write()函数就能得到未压缩前的代码,实际上eval中的代码是一个自执行函数:
JS自执行函数

这个自执行函数运行后就得到原始代码,这些原始代码放入eval中当做JS执行。当把这个自执行的函数放入document.write()中时,自执行函数依然会自动执行,执行后得到原始代码的字符串,自然把这个结果输出就是未压缩之前的代码了。

既然原理已经很清楚了,那么我们就把这些代码还原,要还原这些代码,异常简单:

jQuery(document).ready(function(){
	$("#unpack").click(function(){
		var text = $("#src").val();
		var res = /^eval\((.*)\)/.exec(text);
		$("#unpacked").val("");
		
		if(res == null){
			alert("不是通过Pack压缩的代码!");
		}else{
			eval("var vv ="+res[1]);
			$("#unpacked").val(vv);
		}
	});
	
	$("#clearpack").click(function(){
		$("#unpacked").val("");
	});
});

Javascript unPack 工具

把自执行函数提取出来,这个时候是字符串,然后拼接字符串(编写js代码,把自执行函数赋值给它),然后用eval函数执行这段代码,这样自执行的函数结果就取出来了。

Unpack工具:Javascript UnPack工具

原创文章,转载务必保留出处。
永久链接: http://blog.ifeeline.com/897.html

Javascript 图片效果放大镜 – magiczoomplus

magiczoomplus是一个收费的Javascript插件,功能非常强大,Javascript经过pack压缩后还有60多k。
magiczoomplus

效果:magiczoomplus

效果定制可以到:http://www.magictoolbox.com/magiczoomplus/wizard/配置。实际上它把参数写入到应用了MagicZoomPlus CSS类容器的ref属性中,比如:

##zoom-position:right; show-loading:false; hint:true; buttons:show; zoom-distance:10; zoom-width:400px; zoom-height:266px;
zoom-position 表示放大镜位置
show-loading 表示是否显示图片正在加载
hint 是否显示提示放大图片图标
zonm-distance 表示放大镜和图片的距离
zoon-width 表示放大镜的宽度
zoom-height 表示放大镜的高度

注意这是一段需要授权的JS代码。当然它的功能做得也很强大,使用上也是傻瓜式的。只要在容器上添加一个叫MagicZoomPlus的CSS类即可。如果要定制效果,需要把参数写入容器的rel属性中。每个和放大镜相关联的容器,只要在容器的rel属性中用zoom-id指出放大镜的容器ID即可,容器的href属性携带的是最大尺寸的图片地址,这个是实际放大时使用的图片,rev属性携带的是中等尺寸的图片,这个也是放大镜容器使用的地址,参考上面的例子。

永久链接:http://blog.ifeeline.com/889.html

jQuery UI Widgets — Slider

jquery-ui-wigets-slider

效果查看:Widgets — Slider

关于这个工具的详细参考,可以看http://api.jqueryui.com/slider/,这里描述的非常详细。


jQuery(document).ready(function(){
$(“#slider-range”).slider({
range:true, //是否启用范围端
min:1, //最小值
max:100, //最大值
step:2, //步骤
animate:true, //启动动画
values: [11,81], //初始值
slide:function(event, ui){ }, //滑动时触发
create:function(event, ui){ }, //创建时触发,常用于初始值关联外部元素时
change: function(event, ui) { } //值改变时触发
});
});

永久链接:http://blog.ifeeline.com/884.html

jQuery UI 插件收藏 – Selectmenu

jQuery UI插件Selectmenu

效果参看: jQuery UI Selectnumu

这个插件实际是模拟一个Select,把原来的进行隐藏,不过它并不影响原来的Select表单特性。这个插件依赖jQuery UI库,从归类上应该归入Widgets组,跟Widgets组的Slider Tabs Tooltip是一个层次的。可以通过修改样式获取不同的效果。

永久链接:http://blog.ifeeline.com/880.html

jQuery插件收藏 – JscrollPane

Jscrollpane效果
参考:JscrollPane效果图

插件官方网页:http://jscrollpane.kelvinluck.com/

官网提供了很多例子的,以下提供一张对比图,对于要自定义外观可以快速参考:
Jscrollpane插件快速参考

它把原来容器的内容用了jspPane容器包含,然后外层再加上一个jspContainer容器,这个容器内有一个叫jspHorizontalBar容器,用来显示滚动条,最外层是原来的容器。对于滚动条,提供了非常细致的控制,能完美模拟需要的滚动条。

原创文件,转载务必保留出处。
永久链接:http://blog.ifeeline.com/873.html