JQuery有两个版本供下载,一个是Production(19KB,Minified和Gzipped),另一个是Development(120KB,Uncompressed Code).
现在是紧凑的19kb版本,如果你下载它,你会看到仍然是一个javascript可执行代码.他们是如何紧凑的呢？我怎么能像这样'缩小'我的代码呢？
coc*_*cco 46
DIY缩小
没有minifier可以正确压缩坏代码.
在这个例子中,我只是想表明一个缩小器做了多少.
你缩小之前应该做些什么
关于jQuery ...我不使用jQuery.jQuery是针对旧版浏览器,它是出于兼容性原因而制作的.检查caniuse.com,几乎所有浏览器都能正常工作(现在也就是ie10标准化了),我想现在是只是这里放慢你的web应用程序...如果你喜欢$()你应该创建自己的简单功能.如果你的客户需要每天下载100kb jquery脚本,为什么还要压缩你的代码？你的未压缩代码有多大？5-6kb ..？不要谈论你添加的大量插件,以使其更容易.
原始代码
当你写一个函数你有一个想法,开始写东西,有时你最终得到类似下面的代码.代码工作.现在大多数人停止思考并将其添加到minifier并发布它.
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
}
但是所有这些变量,ifs,循环和定义是否必要？
大部分时间都没有!
可选(提高性能和缩短代码)
Math)while,for...不forEach)"{}","()",";",spaces,newlines现在,如果一个minifier可以压缩代码你做错了.
没有minifier可以正确压缩坏代码.
DIY
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
它与上面的代码完全相同.
性能
你总是需要思考你需要的东西:
在您说"没有人会像下面的代码一样编写代码"之前,请查看此处的前10个问题...
以下是我每十分钟看一些常见的例子.
想要一个可重复使用的条件
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
仅在存在时发出警报
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
警告是或否
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
围绕一个数字
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
放一个号码
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
开关盒
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);
试着抓
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);
更多如果
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');
但是indexOf慢读这个/sf/answers/2123480691/
数字
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;
我发现一些关于按位/速记的好文章/网站:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
如果您使用自己喜欢的搜索引擎搜索,还有许多jsperf网站显示速记和bitwsie的性能.
我可以花一个小时......但我觉得现在已经足够了.
如果你有一些问题,请问.
记住
没有minifier可以正确压缩坏代码.
如果您使用 VSCode 编辑器，则有很多可用的插件/扩展。
例如，它MinifyAll是一个非常好的例子 - 与许多扩展兼容。
安装它并重新加载 VSCode。然后单击您的文件，打开命令面板（Ctrl+Shift+p），键入 ant 缩小此文档（Ctrl+alt+m），还有其他可用选项，例如保留原始文档等！简单的！