JQuery有两个可供下载的版本,一个是Production(生产版)(19KB,已压缩和压缩),另一个是Development(开发版)(120KB,未压缩的代码)。
现在紧凑的19kb版本,如果您下载它,将会看到仍然是javascript可执行代码。他们如何压缩它?我又该如何“缩小”我的代码?
DIY缩小
没有任何压缩程序可以正确压缩错误代码。
在此示例中,我只想显示一个缩小器的功能。
缩小之前应该做什么
关于jQuery ...我不使用jQuery.jQuery是用于旧浏览器的,它是出于兼容性原因而制作的..检查caniuse.com,几乎所有功能都可以在每个浏览器上使用(也就是ie10已标准化),我认为现在是只是在这里会降低你的Web应用程序的速度…如果你愿意的$()话,你应该创建自己的简单函数。如果客户需要每个人都下载100kb jQuery脚本,为什么还要麻烦压缩代码?你的未压缩代码有多大?5-6kb ..?更不用说添加大量插件以使其变得更容易了。
原始码
当你编写一个函数时,你会有所想法,开始写东西,有时甚至会遇到类似以下代码的代码,这些代码可以正常工作了,现在大多数人停止思考并将其添加到缩小器中并发布它。
function myFunction(myNumber){ var myArray = new Array(myNumber); var myObject = new Object(); var myArray2 = new Array(); for(var myCounter = 0 ; myCounter < myArray.length ; myCounter++){ myArray2.push(myCounter); var myString = myCounter.toString() myObject[ myString ] = ( myCounter + 1 ).toString(); } var myContainer = new Array(); myContainer[0] = myArray2; myContainer[1] = myObject; return myContainer; }
这是最小的代码(我添加了新行)
使用(http://javascript-minifier.com/)缩小
function myFunction(r){ for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){ e.push(a); var o=a.toString(); t[o]=(a+1).toString() } var i=new Array; return i[0]=e,i[1]=t,i }
但是所有这些vars,ifs,循环和定义是否必要?
大多数时候不!
可选(提高性能和缩短代码)
现在,如果压缩程序可以压缩代码,则你做错了。
自己动手做
function myFunction(a,b,c){ for(b=[],c={};a--;)b[a]=a,c[a]=a+1+''; return[b,c] }
它与上面的代码完全相同。
性能
http://jsperf.com/diyminify
你始终需要考虑自己的需求:
在你说“没有人会像下面的代码那样编写代码”之前,请先检查此处的前10个问题…
这是我每十分钟看到的一些常见示例。
想要可重用的条件
if(condition=='true'){ var isTrue=true; }else{ var isTrue=false; } //same as var isTrue=!!condition
Alert yes only if it exists
if(condition==true){ var isTrue=true; }else{ var isTrue=false; } if(isTrue){ alert('yes'); } //same as !condition||alert('yes') //if the condition is not true alert yes
Alert yes or no
if(condition==true){ var isTrue=true; }else{ var isTrue=false; } if(isTrue){ alert('yes'); }else{ alert('no'); } //same as alert(condition?'yes':'no') //if the condition is true alert yes else no
将数字转换为字符串,反之亦然
var a=10; var b=a.toString(); var c=parseFloat(b) //same as var a=10,b,c; b=a+''; c=b*1 //shorter var a=10; a+='';//String a*=1;//Number
Round a number
var a=10.3899845 var b=Math.round(a); //same as var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Floor a number
var a=10.3899845 var b=Math.floor(a); //same as var b=a|0;//numbers up to 10 decimal digits (32bit)
switch case
switch(n) { case 1: alert('1'); break; case 2: alert('2'); break; default: alert('3'); } //same as var a=[1,2]; alert(a[n-1]||3); //same as var a={'1':1,'2':2}; alert(a[n]||3); //shorter alert([1,2][n-1]||3); //or alert([1,2][--n]||3);
try catch
if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){ console.log(a[b][c][d][e]); } //this is probably the onle time you should use try catch var x; try{x=a.b.c.d.e}catch(e){} !x||conole.log(x);
more if
if(a==1||a==3||a==5||a==8||a==9){ console.log('yes') }else{ console.log('no'); } console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no');
numbers
1000000000000 //same as 1e12 var oneDayInMS=1000*60*60*24; //same as var oneDayInMS=864e5; var a=10; a=1+a; a=a*2; //same as a=++a*2;
记住