DIY न्यूनतम
कोई भी मिनिफायर ठीक से एक खराब कोड को कंप्रेस नहीं कर सकता है।
इस उदाहरण में मैं सिर्फ यह दिखाना चाहता हूं कि एक मिनिफायर कितना काम करता है।
आपको मिनिमाइज करने से पहले क्या करना चाहिए
और jQuery के बारे में ... मैं पुराने ब्राउज़रों के लिए jQuery.jQuery का उपयोग नहीं करता, यह संगतता कारणों के लिए बनाया गया था .. caniuse.com की जाँच करें, लगभग हर ब्राउज़र पर सब कुछ काम करता है (यानी 10 अब मानकीकृत है), मुझे लगता है कि अब यह है बस यहाँ अपने वेब अनुप्रयोग को धीमा करने के लिए ... यदि आप की तरह $()आप अपने खुद के सरल समारोह बनाना चाहिए। और अपने ग्राहकों को 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
}
लेकिन क्या वे सभी संस्करण, आईएफ, लूप और परिभाषाएं आवश्यक हैं?
ज्यादातर समय NO !
- अनावश्यक निकालें यदि, लूप, var
- अपने मूल कोड की एक प्रति अपने पास रखें
- मिनीफ़ायर का प्रयोग करें
वैकल्पिक (प्रदर्शन और छोटा कोड बढ़ाता है)
- आशुलिपि ऑपरेटरों का उपयोग करें
- बिटवाइज़ ऑपरेटरों का उपयोग करें (उपयोग न करें
Math)
- अपने अस्थायी var के लिए a, b, c ... का उपयोग करें
- पुराने सिंटैक्स का उपयोग करें (
while, for... नहीं forEach)
- प्लेसहोल्डर के रूप में फ़ंक्शन तर्कों का उपयोग करें (कुछ मामलों में)
- अकारण हटा दें
"{}","()",";",spaces,newlines
- मिनीफ़ायर का प्रयोग करें
अब अगर कोई मिनिफ़ायर आपके कोड को गलत कर रहा है तो उसे कंप्रेस कर सकता है।
कोई भी मिनिफायर ठीक से एक खराब कोड को कंप्रेस नहीं कर सकता है।
DIY
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
यदि यह मौजूद है तो ही अलर्ट करें
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धीमी गति से इस https://stackoverflow.com/a/30335438/2450730 पढ़ा है
संख्या
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.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
कई jsperf साइटें भी हैं जो शॉर्टहैंड और बिट्सी के प्रदर्शन को दिखाती हैं यदि आप अपने पसंदीदा खोजकर्ता के साथ खोज करते हैं।
मैं एक घंटे के लिए जा सकते हैं .. लेकिन मुझे लगता है कि यह अभी के लिए पर्याप्त है।
यदि आपके पास कुछ प्रश्न हैं तो बस पूछें।
और याद रखें
कोई भी मिनिफायर ठीक से एक खराब कोड को कंप्रेस नहीं कर सकता है।