显示标签为“Javascript”的博文。显示所有博文
显示标签为“Javascript”的博文。显示所有博文

2009年4月30日星期四

javascript时间显示　时分秒自动走

<script language="JavaScript">

<!--


function dateTime(){

var timer = new Date();

var hours = timer.getHours();

var minutes = timer.getMinutes();

var seconds = timer.getSeconds();


if (minutes<=9) minutes="0"+minutes;

if (seconds<=9) seconds="0"+seconds;

//change font size here to your desire

myclock="<font size='4' face='Arial' color=blue>"+hours+":"+minutes+":"+seconds+"</font>";


times.innerHTML=myclock;


setTimeout("dateTime()",1000);

}

//-->

</script>

<span id="times" ><script language=Javascript> dateTime()</script>

</span>

发帖者 时间： 没有评论:
标签：

2008年12月7日星期日

JS 里用正则表达式替换字符串

方法如下：


//参数中的 g 表示全部匹配,i表示忽略大小写
//str='toaction=t23rue';
//str='toaction=t23rue';
str='toactioN=True';
str=str.replace(/toaction=[\w]+/gi,'toaction=false');
alert(str);

举一个使用的下面一个例子：


function addQueryString()
{
// thickbox query string
var tbString = $_('compStart').alt;

if($_('toaction').checked) tbString = tbString.replace(/toaction=[\w]+/gi,'toaction=true');
else tbString = tbString.replace(/toaction=[\w]+/gi,'toaction=false');

if($_('towinner').checked) tbString = tbString.replace(/towinner=[\w]+/gi,'towinner=true');
else tbString = tbString.replace(/towinner=[\w]+/gi,'towinner=false');

$_('compStart').alt=tbString;
}
发帖者 时间： 没有评论:
标签：

Javascript 获取链接(url)参数的方法

摘要: 有时我们需要在客户端获取链接参数，一个常见的方法是将链接当做字符串，按照链接的格式分解，然后获取对应的参数值。本文给出的就是这个流程的具体实现方法。

当然，我们也可以用正则直接匹配，文章中也给出了一个正则的例子。

用正则匹配的方式：
Javascript:
<script language="JavaScript">
<!--
function getQueryStringRegExp(name)
{
var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");
if (reg.test('http://localhost/test.html?aa=bb&test=cc+dd&ee=ff')) {
return unescape(RegExp.$2.replace(/\+/g, " "));
}
return '';
};
//http://localhost/test.html?aa=bb&test=cc+dd&ee=ff
alert(getQueryStringRegExp('test'));
//-->
</script>

分解链接的方式：
Javascript:
<script type="text/javascript">
<!--
// 说明：Javascript 获取链接(url)参数的方法
// 整理：http://www.CodeBit.cn

function getQueryString(name)
{
// 如果链接没有参数，或者链接中不存在我们要获取的参数，直接返回空
if(location.href.indexOf("?")==-1 || location.href.indexOf(name+'=')==-1)
{
return '';
}

// 获取链接中参数部分
var queryString = location.href.substring(location.href.indexOf("?")+1);

// 分离参数对 ?key=value&key2=value2
var parameters = queryString.split("&");

var pos, paraName, paraValue;
for(var i=0; i<parameters.length; i++)
{
// 获取等号位置
pos = parameters[i].indexOf('=');
if(pos == -1) { continue; }

// 获取name 和 value
paraName = parameters[i].substring(0, pos);
paraValue = parameters[i].substring(pos + 1);

// 如果查询的name等于当前name，就返回当前值，同时，将链接中的+号还原成空格
if(paraName == name)
{
return unescape(paraValue.replace(/\+/g, " "));
}
}
return '';
};

//http://localhost/test.html?aa=bb&test=cc+dd&ee=ff
alert(getQueryString('test'));
//-->
</script>
发帖者 时间： 没有评论:
标签：

jquery 对 checkbox 实现全选效果 (checkbox控制 | button控制)

以下有两种方法：
1. 使用 checkbox 进行控制 全选checkbox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Jquery click all </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox1" name="checkbox1" onClick="clickall(this);" >
<input type="checkbox" id="checkname1" name="checkname[]" value="1"/>1
<input type="checkbox" id="checkname2" name="checkname[]" value="2"/>2


<script type="text/javascript" language="javascript">
function clickall(cb){
if(cb.checked) {
$('input[@name="checkname[]"]').attr('checked',true);
} else {
$('input[@name="checkname[]"]').attr('checked',false);
}
}
</script>
</body>
</html>

2. 使用 Button 进行控制 全选checkbox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Jquery click all </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$("#checkall").click(function() {
$("input[@name='checkname[]']").each(function() {
$(this).attr("checked", true);
});
});
$("#delcheckall").click(function() {
$("input[@name='checkname[]']").each(function() {
$(this).attr("checked", false);
});
});
});
</script>
<input type='checkbox' id='id1' name='checkname[]' value='1' />value1
<input type='checkbox' id='id2' name='checkname[]' value='2' />value2
<input type='checkbox' id='id3' name='checkname[]' value='3' />value3
<input type="button" id="checkall" name="checkall" value="全选" />
<input type="button" id="delcheckall" name="delcheckall" value="取消全选" />
</body>
</html>

发帖者 时间： 没有评论:
标签：

在js中声明变量时，什么时候需要var，什么时候不需要?

在js中声明变量时，什么时候需要var，什么时候不需要???

关键问题：
在function内部，用var是局部变量，不用var是全局变量。
这个问题不搞清楚，就不是风格的好坏了，可能会导致功能错误。
在function外，用不用都是全局变量。

理解“JS变量定义”的概念

首先，那种不用var就直接赋值的做法，javascript认为你第一次赋值的同时也就是做了定义。如果你是初学者，我建议不妨将这种做法看作一种不规范用法，你就当它根本不存在，问题就简单了。

var aString;
是纯粹的变量定义（但只能在函数内部用）

var aString = "100";
是变量定义，并同时赋值。在函数外部必须这么用，如果在函数内部，就等效于：
var aString;
aString = "100";

赋值可以无数次，定义只能一次！就好比一个人的性格可以不断改变，但出生只能有一次！
发帖者 时间： 没有评论:
标签：

2008年11月13日星期四

JavaScript : charAt , jtrim 几种去掉字串左右空格的方法


//-------------
function jtrim(sstr)
{
var astr="";
var dstr="";
var flag=0;
for (i=0;i{if ((sstr.charAt(i)!=' ')||(flag!=0))
{dstr+=sstr.charAt(i);
flag=1;
}
}
flag=0;
for (i=dstr.length-1;i>=0;i--)
{if ((dstr.charAt(i)!=' ')||(flag!=0))
{astr+=dstr.charAt(i);
flag=1;
}
}
dstr="";
for (i=astr.length-1;i>=0;i--) dstr+=astr.charAt(i);
return dstr;
}
发帖者 时间： 没有评论:
标签：

javascript : getAttribute , RegExp 验证代码


<title>表单验证类 Validator v1.05</title>
<style>
body,td{font:normal 12px Verdana;color:#333333}
input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
table{border-collapse:collapse;}
td{padding:3px}
input{height:20;}
textarea{width:80%;height:50px;overflow:auto;}
form{display:inline}
</style>
<table align="center">
<form name="theForm" id="demo" method="get" onSubmit="return Validator.Validate(this,2)">
<tr>
<td>身份证号：</td><td><input name="Card" dataType="IdCard" msg="身份证号错误"></td>
</tr>
<tr>
<td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>
</tr>
<tr>
<td>ID：</td><td><input name="username" dataType="Username" msg="ID名不符合规定"></td>
</tr>
<tr>
<td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>
</tr>
<tr>
<td>主页：</td><td><input name="Homepage" require="false" dataType="Url" msg="非法的Url"></td>
</tr>
<tr>
<td>密码：</td><td><input name="Password" dataType="SafeString" msg="密码不符合安全规则" type="password"></td>
</tr>
<tr>
<td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>
</tr>
<tr>
<td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>
</tr>
<tr>
<td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>
</tr>
<tr>
<td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>
</tr>
<tr>
<td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>
</tr>
<tr>
<td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>
</tr>
<tr>
<td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>
</tr>
<tr>
<td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>
</tr>
<tr>
<td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>
</tr>
<tr>
<td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>
</tr>
<tr>
<td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td>
</tr>
<tr>
<td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>
</tr>
<tr>
<td>操作系统：</td><td><select name="Operation" dataType="Require" msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option></select></td>
</tr>
<tr>
<td>所在省份：</td><td>广东<input name="Province" value="1" type="radio">陕西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" dataType="Group" msg="必须选定一个省份" ></td>
</tr>
<tr>
<td>爱好：</td><td>运动<input name="Favorite" value="1" type="checkbox">上网<input name="Favorite" value="2" type="checkbox">听音乐<input name="Favorite" value="3" type="checkbox">看书<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3" msg="必须选择2~3种爱好"></td>
</tr>
<td>自我介绍：</td><td><textarea name="Description" dataType="Limit" max="10" msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>
</tr>
<td>自传：</td><td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>
</tr>
<tr>
<td>相片上传：</td><td><input name="up" dataType="Filter" msg="非法的文件格式" type="file" accept="jpg, gif, png"></td>
</tr>
<tr>
<td colspan="2"><input name="Submit" type="submit" value="确定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>
</tr>
</form>
</table>
<script>
/*************************************************
Validator v1.05
code by 我佛山人
wfsr@msn.com
*************************************************/
Validator = {
Require : /.+/,
Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
IdCard : "this.IsIdCard(value)",
Currency : /^\d+(\.\d+)?$/,
Number : /^\d+$/,
Zip : /^[1-9]\d{5}$/,
QQ : /^[1-9]\d{4,8}$/,
Integer : /^[-\+]?\d+$/,
Double : /^[-\+]?\d+(\.\d+)?$/,
English : /^[A-Za-z]+$/,
Chinese : /^[\u0391-\uFFE5]+$/,
Username : /^[a-z]\w{3,}$/i,
UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
IsSafe : function(str){return !this.UnSafe.test(str);},
SafeString : "this.IsSafe(value)",
Filter : "this.DoFilter(value, getAttribute('accept'))",
Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))",
LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",
Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
Custom : "this.Exec(value, getAttribute('regexp'))",
Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
ErrorItem : [document.forms[0]],
ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],
Validate : function(theForm, mode){
var obj = theForm || event.srcElement;
var count = obj.elements.length;
this.ErrorMessage.length = 1;
this.ErrorItem.length = 1;
this.ErrorItem[0] = obj;
for(var i=0;i<count;i++){
with(obj.elements[i]){
var _dataType = getAttribute("dataType");
if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue;
this.ClearState(obj.elements[i]);
if(getAttribute("require") == "false" && value == "") continue;
switch(_dataType){
case "IdCard" :
case "Date" :
case "Repeat" :
case "Range" :
case "Compare" :
case "Custom" :
case "Group" :
case "Limit" :
case "LimitB" :
case "SafeString" :
case "Filter" :
if(!eval(this[_dataType])) {
this.AddError(i, getAttribute("msg"));
}
break;
default :
if(!this[_dataType].test(value)){
this.AddError(i, getAttribute("msg"));
}
break;
}
}
}
if(this.ErrorMessage.length > 1){
mode = mode || 1;
var errCount = this.ErrorItem.length;
switch(mode){
case 2 :
for(var i=1;i<errCount;i++)
this.ErrorItem[i].style.color = "red";
case 1 :
alert(this.ErrorMessage.join("\n"));
this.ErrorItem[1].focus();
break;
case 3 :
for(var i=1;i<errCount;i++){
try{
var span = document.createElement("SPAN");
span.id = "__ErrorMessagePanel";
span.style.color = "red";
this.ErrorItem[i].parentNode.appendChild(span);
span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
}
catch(e){alert(e.description);}
}
this.ErrorItem[1].focus();
break;
default :
alert(this.ErrorMessage.join("\n"));
break;
}
return false;
}
return true;
},
limit : function(len,min, max){
min = min || 0;
max = max || Number.MAX_VALUE;
return min <= len && len <= max;
},
LenB : function(str){
return str.replace(/[^\x00-\xff]/g,"**").length;
},
ClearState : function(elem){
with(elem){
if(style.color == "red")
style.color = "";
var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
if(lastNode.id == "__ErrorMessagePanel")
parentNode.removeChild(lastNode);
}
},
AddError : function(index, str){
this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
},
Exec : function(op, reg){
return new RegExp(reg,"g").test(op);
},
compare : function(op1,operator,op2){
switch (operator) {
case "NotEqual":
return (op1 != op2);
case "GreaterThan":
return (op1 > op2);
case "GreaterThanEqual":
return (op1 >= op2);
case "LessThan":
return (op1 < op2);
case "LessThanEqual":
return (op1 <= op2);
default:
return (op1 == op2);
}
},
MustChecked : function(name, min, max){
var groups = document.getElementsByName(name);
var hasChecked = 0;
min = min || 1;
max = max || groups.length;
for(var i=groups.length-1;i>=0;i--)
if(groups[i].checked) hasChecked++;
return min <= hasChecked && hasChecked <= max;
},
DoFilter : function(input, filter){
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input);
},
IsIdCard : function(number){
var date, Ai;
var verify = "10x98765432";
var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
var area = ['','','','','','','','','','','','北京','天津','河北','山西','内蒙古','','','','','','辽宁','吉林','黑龙江','','','','','','','','上海','江苏','浙江','安微','福建','江西','山东','','','','河南','湖北','湖南','广东','广西','海南','','','','重庆','四川','贵州','云南','西藏','','','','','','','陕西','甘肃','青海','宁夏','新疆','','','','','','台湾','','','','','','','','','','香港','澳门','','','','','','','','','国外'];
var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i);
if(re == null) return false;
if(re[1] >= area.length || area[re[1]] == "") return false;
if(re[2].length == 12){
Ai = number.substr(0, 17);
date = [re[9], re[10], re[11]].join("-");
}
else{
Ai = number.substr(0, 6) + "19" + number.substr(6);
date = ["19" + re[4], re[5], re[6]].join("-");
}
if(!this.IsDate(date, "ymd")) return false;
var sum = 0;
for(var i = 0;i<=16;i++){
sum += Ai.charAt(i) * Wi[i];
}
Ai += verify.charAt(sum%11);
return (number.length ==15 || number.length == 18 && number == Ai);
},
IsDate : function(op, formatString){
formatString = formatString || "ymd";
var m, year, month, day;
switch(formatString){
case "ymd" :
m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
if(m == null ) return false;
day = m[6];
month = m[5]*1;
year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
break;
case "dmy" :
m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
if(m == null ) return false;
day = m[1];
month = m[3]*1;
year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
break;
default :
break;
}
if(!parseInt(month)) return false;
month = month==0 ?12:month;
var date = new Date(year, month-1, day);
return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate());
function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
}
}
</script>
发帖者 时间： 没有评论:
标签：

2008年9月7日星期日

Javascript compressed压缩

Javascript压缩工具(Javascript compressed,Js压缩)
====================================================
2007年08月01日 星期三 上午 11:50




怎么压缩Js？为什么要压缩Javascript？ Javascript compressed/crunched

开发Ajax除了自己要写js代码外，同样也免不了要使用其它第三方js库，是否该为JavaScript减肥？

当你提高了用户体验，做出了很绚丽的效果而欣喜的时候，是否想过优化一下JS的效率,比如微软的live，其中的js做了压缩处理。JS的速度分为两种， 下载速度和执行速度。今天就先来说说下载速度。要想js的下载速度快，就需要尽量减小js文件的大小。这里我们可以使用一个工具 ESC(ECMAScript cruncher)来帮我们完成这个工作，不过这个工具只能在Windows下使用。到 http://www.saltstorm.net/depo/esc/introduction.wbm?pod=js 下载 ESC.zip ,解压后看看它的帮助文档。很简单。



ESC Introduction

ESC is an ECMAScript pre-processor written in JScript, enabling an unlimited number of external scripts to be compressed/crunched into supertight, bandwidth-optimized packages. Featuring several compression-techniques such as comment removal, whitespace stripping, newline stripping and variable substitution ESC can reduce the overall size of your code with up to ~45%. Single, multiple scripts and even directories with scripts can be merged together at the compression level you decide. The processed output can later be appended or written to a file, or piped to another application for further processing via STDOUT.



ESC do NOT support crunching of inline scripts. So any attempt passing HTML, ASP, JSP, PHP or other equivalent documents to ESC is done at your own risk.



ESC supports four levels of compression, where a higher level equals higher compression. Beware though that levels >2 requires your code to be syntaxically perfect or ESC will punish you by producing a broken and useless output.



The compression ratio should hit around 25% using the default compression level on a vanilla looking script, but results as high as ~45% can be achieved depending on the script's design / your style of writing code.



ESC's compression engine is intelligent in the meaning that it has language syntax, statement and keyword awareness and it *knows* about native objects and members provided by the most common scripting hosts. This knowledgebase can easily be extended by pluggin in userdefined maps with additional information to further gain control of the crunching procedure. During processing following things are taken into account :



String and RegExpression read-ahead

Jscript Conditional compilation statements and variables

ECMA-262 Core language definitions (ECMAScript)

Intermediate DOM's (level 0) and DOM level 1

MS Jscript specific objects/methods

Netscape/Mozilla/Opera specific objects/methods/properties

MS WSH (Windows Scripting Host) 1+ native objects



压缩级别分为5种，从0到4



Level 0 :: No compression



Level 1 :: Comment removal



Level 2 :: Whitespace removal



Level 3 :: Newline removal



Level 4 :: Variable substitution



在WINDOWS命令行下执行



cscript ESC.wsf -ow menu2.js menu.js将会把menu.js按照js压缩级别2来压缩（默认js压缩级别为2）为menu2.js



cscript ESC.wsf -l 3 -ow menu3.js menu.js将会把menu.js按照js压缩级别3来压缩为menu3.js



需要注意的是，js压缩级别4会把变量名修改，如果你的js中用到了全局变量或者类的话，就不能使用该压缩级别了，否则其它使用你的js的文件可能会无法正常运行。



试了一下，把yui的menu.js压缩了一下，对应的级别和压缩率分别如下：



js压缩级别1:压缩率44.41%



js压缩级别2:压缩率62.82%



js压缩级别1:压缩率64.93%



原来130多K的js文件压缩后也就40多K，看来还是挺有用处的。





另外还有一个小工具 jsmin 也可以压缩，不过没有ESC的level选项，看了一下好像压缩效果类似于ESC的level3.济南大学的一些老师写了个jsmin的图形界面程序 JsMinGUI ,使用起来更加方便。：－）



Dojo项目组也提供了一个工具,shrinksafe可以通过 http://alex.dojotoolkit.org/shrinksafe/ 在线的上传要压缩的文件，处理完毕后可以保存到本地，另外shrinksafe还提供了一个本地运行的版本，需要jre1.4的支持。



Ps:对于一些压缩的代码，在阅读时可以用 JavaScript Code Improver 来进行格式化。看看它主页上的一个例子：

javascript压缩代码示例

原来的代码：

程序代码 程序代码 <script language="JavaScript">var i=0,s="",k=0;function foo(){for(j=0;j<10;j++){for(i=0;i<10;i++){s="string1";k=Math.floor(Math.random()*10);}for(i=20;i>9;i--){s="string2";k=I;}}}</script>



格式化后：

程序代码 程序代码 <script language="JavaScript">

var I = 0, s = "", k = 0;

function foo()

{

for(j = 0; j < 10; j++)

{

for(I = 0; I < 10; i++)

{

s = "string1";

k = Math.floor( Math.random()*10 );

}

for(I = 20; I > 9; i--)

{

s = "string2";

k = I;

}

}

}

</script>





js压缩，巨NB的dHTML特效. 来自：

http://hometown.aol.de/_ht_a/memtronic/MemTronic_CruncherCompressor_v09g.html



JS压缩示例样本： JS压缩示例样本





更多的JS压缩器以及混淆器

http://dean.edwards.name/packer/ 在线Js压缩

A Online JavaScript Compressor/Obfuscator version 2.0.2

Also available as a .NET application

开源下载： http://dean.edwards.name/download/#packer

JS压缩器帮助： http://dean.edwards.name/packer/usage/

http://dean.edwards.name/packer/usage/sample.html



http://hometown.aol.de/_ht_a/memtronic/



JavaScript Compressor/Obfuscator Demo:

http://www.brainjar.com/js/crunch/demo.html



JavaScript Code Improver：

JavaScript Code Improver Download





前面提到的Javascript压缩，都是采用删除注释,删除多余空格,替换字符等方式进行的，还有一种通过服务器的配置来实现Js静态压缩的方法：

关于JavaScript的gzip静态压缩方法

传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意,幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding=gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使 用的GZipFilter使tomcat也提供这种能力



现在的问题是这种动态的压缩会导致服务器CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过gzip.exe压缩好)



一.下面描述在tomcat中的应用



1.将prototype.js通过gzip.exe压缩保存成prototype.gzjs

2.设置header,我编写了一个简单的AddHeadersFilter来将所有以gzjs结尾的文件增加设置header Content-Encoding=gzip

web.xml中的配置

引用内容 引用内容 <filter>

<filter-name>AddHeaderFilter</filter-name>

<filter-class>

badqiu.web.filter.AddHeaderFilter

</filter-class>

<init-param>

<param-name>headers</param-name>

<param-value>Content-Encoding=gzip</param-value>

</init-param>

</filter>



<filter-mapping>

<filter-name>AddHeaderFilter</filter-name>

<url-pattern>*.gzjs</url-pattern>

</filter-mapping>



测试prototype.js是否正常的代码

程序代码 程序代码 <html>

<head>

<!-- type="text/javascript"不可少,有的浏览器缺少这个不能运行 -->

<script src="prototype.gzjs" type="text/javascript"></script>

</head>

<body>

<input id="username" name="username" value="badqiu"/><br />

<input id="email" value="badqiu@gmail.com"/>

<script>

<!-- 测试prototype的方法是否正常-->

alert($F('username'))

</script>

</body>

</html>



在Apache httpd中可以直接通过在httpd.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header



二.相关压缩率数据

1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用gzip压缩为12KB,总压缩率79%

2. 通过js压缩工具压缩过的protytype.js为20KB,使用gzip压缩为10KB,总压缩率为83%

3. 实际项目中的多个js合并成的文件 439KB,直接通过gzip压缩为85KB,总压缩率81%

4. 439KB经过js压缩为165KB,再经过gzip压缩为65KB,总压缩率86%



基本上你都可以忽略js压缩工具的压缩率,直接使用gzip压缩



gzip下载地址 http://www.gzip.org

tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar



其主要是利用服务器自带的动态压缩功能 传输时压缩数据流.



Javascript compressed,Js压缩,javascript压缩,js压缩工具,js压缩合并,js文件压缩
发帖者 时间： 没有评论:
标签：
订阅： 博文 (Atom)