如何“最小化” JavaScript代码

  • Z时代
  • 2024-01-10
  • 分类：问答

JQuery有两个可供下载的版本，一个是Production（生产版）（19KB，已压缩和压缩），另一个是Development（开发版）（120KB，未压缩的代码）。

现在紧凑的19kb版本，如果您下载它，将会看到仍然是javascript可执行代码。他们如何压缩它？我又该如何“缩小”我的代码？

回答：

没有任何压缩程序可以正确压缩错误代码。

在此示例中，我只想显示一个缩小器的功能。

缩小之前应该做什么

关于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，循环和定义是否必要？

大多数时候不！

  1. 删除不必要的，循环，无功

  2. 保留原始代码的副本

  3. 使用缩小器

可选（提高性能和缩短代码）

  1. 使用速记运算符

  2. 使用按位运算符（不要使用Math）

  3. 使用a，b，c …作为你的临时变量

  4. 使用旧语法（while，for… not forEach）

  5. 使用函数参数作为占位符（在某些情况下）

  6. 删除不必要的 “{}”,”()”,”;”,spaces,newlines

  7. 使用缩小器

现在，如果压缩程序可以压缩代码，则你做错了。

没有任何压缩程序可以正确压缩错误代码。

自己动手做

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;

记住

没有任何压缩程序可以正确压缩错误代码。

以上是 如何“最小化” JavaScript代码 的全部内容， 来源链接： utcz.com/qa/422820.html

回到顶部