易栈网-膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表分类:Javascript

种玉堂：让代码越变越美

Submitted by gouki on 2009, March 16, 11:24 PM

本文很长，来自于博客园，并不是说文章内容很有深意，但是因为作者在介绍的时候的step by step，也能让人体会到了代码复用并非全部是用在服务端的OO，对于客户端其实也能够做到OO。

原文网址：http://www.cnblogs.com/KenBlove/archive/2009/03/16/1413746.html

内容摘抄：（太多了，仅摘抄部份原话）

大家都知道，客户端检测不单可以让用户获得更好的体验，而且可以通过校验数据大大减少客户端和服务器端的往返次数，减少服务器负担。在这里，小弟打算回顾一下自己在客户端检测方面的学习历程和采用方法，如果大家有什么更好的方法或者建议，欢迎提出来共享！共同进步！

第一阶段是：续项强写
每个人都基本会经过这个阶段，就是对检测内容每个都手工校验。

第二阶段：集中消灭
相信不少初学者现在还是处于这个阶段，这阶段的同学们已经被第一阶段折磨怕了。很快就想出了集中消灭相同类型检测的方法。就是写检测函数

第三阶段：链式的威力
看着一大堆if else总是心里觉得不舒服，对吧？一串串的又不是羊肉串，虽然不能吃，也要消灭它们！这时候，是Javascript的prototype出场的时候了。通过扩展prototype，可以获得简洁优雅的代码

第四阶段：自定义属性

第五阶段：可配置

作者最后还附上了源码，建议全文查看

Tags: 客户端, 代码优化

Javascript | 评论:0 | 阅读:15417

基于JQUERY制作的仿GOOGLE自动完成插件

Submitted by gouki on 2009, March 15, 8:48 PM

本例子来自博客园，其实关于Autocompleted的例子，用jquery的话，是很多很多，但那都是国外的，难得有国内的例子，看到了就复制回来一份，呵呵

原文：http://www.cnblogs.com/cntlis/archive/2009/03/14/1412144.html

数据采用JSON，格式为{keylist:[{'keyname':关键字1,'keyextend':扩展文字(譬如说结果数目)},{'keyname':关键字2,'keyextend':扩展文字(譬如说结果数目)}]}

JS代码（当成JS代码插入的时候，高亮会超时，所以，用HTML格式了一下）

/**//*
* jQuery AutoComplete
*
* Author: cntlis
* http://blog.csdn.net/cntlis
*
* Licensed like jQuery, see http://docs.jquery.com/License
*
* 作者：cntlis
* QQ：8112857
*/
$.fn.AutoComplete = function(url,option){
var me= this;
var strKey= $(me).val();
var strKeyBak= "";
var isShow = false;
var doption={
iwidth: '0px', //下拉框的宽度
iLengthLower: 1, //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索
iLengthUpper: 50,
strPara: "Keyword", //变量名称
zIndex: 1, //提示框的Z-INDEX值
hasscroll: 0, //是否出现滚动条0无1有
hasclose: 1, //是否拥有关闭窗口
desfun:function(){}
};
$.extend(doption,option);
var iLengthLower= doption.iLengthLower;
var iLengthUpper= doption.iLengthUpper;
var strPara= doption.strPara;
if ($("#autocomplete").length<1){$("body").append("<div id='autocomplete' class='autocompletefloor'></div>");}
$("#autocomplete").hide();
$(me).keyup(function(e){keysearch(e.keyCode);});
$(me).keydown(function(e){LineSelect(e.keyCode);});
$(me).bind("blur",function(){
strKeyBak= $("#autocomplete ul .selected .keyname").text(); //为click事件增加处理
if (strKeyBak.length>0 && strKeyBak!=$(me).val()){
$(me).val(strKeyBak);
doption.desfun();
};
floorHide();
});
var encode=function(v){//如果包含中文就escape,避免重复escape)
return escape(v).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
}
function floorHide(){
$("#autocomplete").hide().html("");
strKey= "";
isShow = false;
}
function floorShow(){
var p= $(me).offset();
var w= (doption.iwidth == "0px") ? $(me).width()+2 : doption.iwidth;
$("#autocomplete").css({
'z-index:':doption.zIndex,
width:w,
top:parseInt(p.top+$(me).outerHeight())+"px",
left:parseInt(p.left)+"px"
}).show();
strKey= "";
isShow = true;
}
function keysearch(code){
var strKeyNow=$(me).val();
if(code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return; //TAB/回车、ESC、向上、向下
if((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper){
$.ajax({
type: "Get",
dataType: "json",
url: url,
data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "",
success: function(json){
jsonjson=json.keylist;
if (json.length>0){
//获取搜索数据
var strContent= "<ul>";
$.each(json, function(i, n){
if(n.keyname.length>0){ //如果
//alert(n.keyname);
strContent+= '<li class="keyinfo"><span class="keyname">'+n.keyname+'</span>';
try{
if (n.keyextend.length>0){strContent+='<span class="keyextend">'+n.keyextend+'</span>';}
}catch(E){};
strContent+= '</li>';
};
});
if (doption.hasclose==1){
strContent+= '<li class="close"><span>关闭</span></li>';
}
strContent+='</ul>';
$("#autocomplete").html(strContent);
$("#autocomplete .keyinfo").mouseover(function(){$("#autocomplete .selected").removeClass("selected");$(this).removeClass("unselected").addClass("selected");}).mouseout(function(){$(this).removeClass("selected").addClass("unselected");}).click(function(){if(strKeyBak.length()>0){$(me).val(strKeyBak);}});
floorShow();
}else{
//没有搜索数据
floorHide();
return;
}
}
});
strKey=$(me).val();
}
if(strKey.length == 0 || strKey.length <= iLengthLower || strKey.length >= iLengthUpper) floorHide();
}
function LineSelect(code){
if(code == 27){floorHide();};//回车键、ESC键
if(code == 13){floorHide();doption.desfun();};
if(!isShow) return;
ObjSelected=$("#autocomplete ul .selected");
if (ObjSelected.length>0){ //如果已经有选定
//alert('dasfdas');
if(code == 38){ //向上键
if(ObjSelected.prev().text() != ""){ //如果不是第一个数据
ObjSelected.removeClass("selected").addClass("unselected").prev().removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}else{
ObjSelected.removeClass("selected").addClass("unselected");
$("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}
}else if (code == 40){ //向下键
if(ObjSelected.next().text() != ""){ //如果不是第一个数据
ObjSelected.removeClass("selected").addClass("unselected").next().removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}else{
ObjSelected.removeClass("selected").addClass("unselected");
$("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}
}
}else if(code == 38){
$("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete .keyinfo:last .keyname").text());
}else if(code == 40){
$("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete .keyinfo:first .keyname").text());
}
}
}

CSS代码

#autocomplete{}{ border: 1px solid #000; position: absolute; }
/**//*每行的格式*/
#autocomplete li{}{ display: block; text-align: left; height: 20px; line-height: 20px; background-color: #fff; cursor: default; padding: 0 5px; clear: both; }
/**//*鼠标选中时的格式*/
#autocomplete .selected{}{ background-color: #565da9; color: #fff; overflow: hidden; }
/**//*鼠标离开时代格式*/
#autocomplete .unselected{}{ background-color: #fff; color: #666; }
/**//*关键字信息*/
#autocomplete .keyname{}{ display: block; float: left; }
/**//*关键字扩展信息*/
#autocomplete .keyextend{}{ display: block; float: right; color: green; }
#autocomplete .unselected .keyextend{}{ color: green; }
#autocomplete .selected .keyextend{}{ color: #fff; }
/**//*关闭*/
#autocomplete .close{}{ text-align: right; }
#autocomplete .close span{}{ color: blue; cursor: pointer; text-decoration: underline; }

调用范例

$("#Keyword").AutoComplete("search.asp");

是不是很简单的？只是search.asp返回的数据要是上面所提供的格式，对于PHP来说就太方便了，只要生成相应的数组，然后json_encode一下就全出来了，呵呵

Tags: jquery, autocompleted

Javascript | 评论:4 | 阅读:25340

jQuery UI 1.7 发布

Submitted by gouki on 2009, March 12, 10:23 PM

继jQuery 1.3.1发布之后，UI包一直没跟上，3月6日，兼容jQuery 1.3.1的UI包终于发布了。大家可以来这里下载jquery-ui-1.7.custom.zip，svn方式：http://jquery-ui.googlecode.com/svn/tags/1.7/

这次改动主要如下：

和jQuery1.3兼容。
修补和优化以前的UI插件。
崭新的CSS框架。
jQuery UI 1.7建立在一个崭新的强大的css框架上，这个框架不仅仅用于jQuery UI的插件，还可以用于定制插件，任何开发者都能很容易地基于ThemeRoller（jQuery UI 的换肤插件）为插件创建皮肤。更多关于CSS框架
新版的ThemeRoller(V2)。
健全的演示和文档。
完全离线的帮助文档。
重构了download builder，即使javascript被禁用，这个插件仍然能运作。
皮肤打包。
点击这里可以立即下载所有皮肤: jquery-ui-themes-1.7.zip，svn: http://jquery-ui.googlecode.com/svn/tags/1.7/themes/
为jQuery UI新建了一个网站http://www.jqueryui.com/。
这个网站和主站分开，专注于UI研发。

－－－－－－－－－－－－－－－－－

出处：http://kaima.cnblogs.com
作者：kai.ma

Tags: jquery, ui

Javascript | 评论:0 | 阅读:21213

ZendStudio.Net:某网站AJAX的加密压缩传输算法的一点研究

Submitted by gouki on 2009, March 2, 3:59 PM

题前话：
其实以前也看到过类似的东西，但是我没有想到进用gzip之类的加密，看来，即使是见过的东西，也有不熟悉的。看到作者这样仔细的分析相类似的资料，当然要备份一点。
原文：http://www.zendstudio.net/js-zip-inflate/
AJAX还是比较强大的！（显然，这是一句废话），最近在研究一个网站的AJAX应用中发现其中的“拓展视野”部分频频被挖掘出来（也由此可见，平时本人的视野有多么的狭窄了），首先是全站的JS全部使用packed进行了压缩，呃！也不知道这种称法是否正确，就是用 eval(function(p,a,c,k,e,d){})的那种世界各地都很流行的压缩方法吧，在实际的观察中，一个压缩后仅为6K，在我将其转化为 “肉眼能看清楚的代码”之后，足足有20K，可见其效果还是相当明显的；此外，用HttpWatch弄到了传输数据后，居然是加密的。。。形如下面这段：

XML/HTML代码

q1YqT81MzyhRsqpWys3MU7Iy0FHKTaxQsjLWUUrLL8pNBMooqeoZpSnV6igVFGUmp2KoVDIzMrIwNdAzMFBC1pOiVFsLAA==

任何一个有些许密码学经验的同志都容易很看出来，这是base64编码(我实在不喜欢称这个为“加密”)，没错，和各位看官一样，我很快就用php自带的base64_decode函数对其进行了解密，如果您觉得问题到此为止，那就错了！这时我才稍稍感到了有些震撼，解密出来的数据：

呃！一堆乱码，其实应该是二进制数据，加密了（后来知道是压缩了），可是用户是看不懂这些的，客户端是肯定要进行解密的！用什么？AJAX的当然用JS解密了，挖解密函数啊，挖解密函数，看到了如下的精彩代码：

JavaScript代码

var filterList=eval('('+utf8to16(zip_depress(base64decode(g_pgFilterList)))+')');

utf8to16()和base64decode()都好理解，也再一次证明加密的最后是用base64编码输出的，关键就是这个zip_depress()，zip解压？
是的，千真万确，用JS实现了zip的解压算法！！！到这里我深深的感到了震撼，原来，我知道的真的太少了啊！虽然之前知晓有md5.js，知道JS在运算方面是没有问题的。不会是这家伙自己写的压缩算法吧？经过搜索，我找到了这个算法（Zip inflate）的原版，原来该网站的制作人员修改了函数名，难怪我直接google不到呢？

什么是inflate算法？—

inflate是GZip, PNG等广泛使用的解压算法,linux也使用inflate对内核进行解压.inflate的解压算法使用的第3种快速解压法的一个子集,它不考虑 LONG_CODE,同时把SAME_LENGTH合并到MEDIUM_CODE。而对于规则的SAME_LENGTH编码，比如length和 distance编码，inflate则使用额外的base和extra表示。这是因为在构造一般的查找表时，虽然对于SAME_LENGTH前缀可以不构造副表，但我们需要另外一个表格来保存符号的顺序，而这个表格的空间可能更大。但对于length和distance编码，他们的顺序是递增的，所以无需额外的表格来保存符号的顺序。



inflate使用root表示上述的b,查找表的数据结构为code.主表和副同时保存在inflate_state结构中的大数组codes[ENOUGH]中.表的构造函数位于inftrees.c文件的inflate_table中.

令人感到欣喜若狂的是，PHP竟然已经提供的现成函数来解压和压缩inflate,它们是gzinflate()和gzdeflate()，哈哈哈！我不禁仰天狂笑的一番，用gzinflate()成功的将上文数据解密，内容是这样的：

JavaScript代码

{"weight":{"min":0,"max":3,"format":"%.2f"},"price":{"min":0,"max":"622850.00","format":"%d"}}

标准的JSON数据啦，不错！这就为以后的AJAX的传输上多了一个选择，虽然还不确定这种方法能否节省流量（因为base64算法会将原始数据“稍稍” 增大），但客户端有了解压算法，服务端的php压缩函数又是现成的，大不了在base64这个环节上大概需要改进下，我想对于大流量的数据应该还是有确切效果的。嗯，我很满意。
————————
看完以上的内容，嗯，我也很满意，呵呵

Javascript | 评论:0 | 阅读:16456