栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何“最小化” JavaScript代码

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何“最小化” 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,循环和定义是否必要?

大多数时候不!

  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 asvar 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 asalert(condition?'yes':'no')//if the condition is true alert yes else no

将数字转换为字符串,反之亦然

var a=10;var b=a.toString();var c=parseFloat(b)//same asvar a=10,b,c;b=a+'';c=b*1//shortervar a=10;a+='';//Stringa*=1;//Number

Round a number

var a=10.3899845var b=Math.round(a);//same asvar b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)

Floor a number

var a=10.3899845var b=Math.floor(a);//same asvar 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 asvar a=[1,2];alert(a[n-1]||3);//same asvar a={'1':1,'2':2};alert(a[n]||3);//shorteralert([1,2][n-1]||3);//oralert([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 catchvar 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 as1e12var oneDayInMS=1000*60*60*24;//same asvar oneDayInMS=864e5;var a=10;a=1+a;a=a*2;//same asa=++a*2;

记住

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/373532.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号