Зроби сам
Жоден мініфікатор не може правильно стиснути неправильний код.
У цьому прикладі я просто хочу показати, наскільки працює мініфікатор.
Що слід зробити перед тим, як пом'якшити
Щодо jQuery ... я не використовую jQuery.jQuery для старих браузерів, він був зроблений з міркувань сумісності. Перевірте caniuse.com, майже все працює на кожному браузері (також ie10 зараз стандартизовано), я думаю, зараз це просто тут, щоб сповільнити веб-додаток ... якщо вам подобається, $()вам слід створити власну просту функцію. І навіщо турбуватися стискати свій код, якщо клієнтам потрібно щоразу завантажувати скрипт jquery 100kb? Наскільки великий ваш нестиснений код? 5-6кб ..? Не кажучи про тони плагінів, які ви додаєте, щоб зробити це простіше.
Оригінальний код
Коли ви пишете функцію, у вас є ідея, починайте писати речі, а іноді у вас виникає щось на зразок наступного коду. Код працює. Зараз більшість людей припиняють думати і додають це до мініфікатора та публікують його.
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)
- використовуйте a, b, c ... для своїх темп
- використовувати старий синтаксис (
while, for... ні forEach)
- використовувати аргументи функції як заповнювача (у деяких випадках)
- видалити непотрібне
"{}","()",";",spaces,newlines
- Використовуйте мініфікатор
Тепер, якщо мініфікатор може стиснути код, ви робите це неправильно.
Жоден мініфікатор не може правильно стиснути неправильний код.
Зроби сам
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
Перетворити число в рядок або в viceversa
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, які показують ефективність скорочення та bitwsie, якщо ви шукаєте улюблений пошук.
Я міг би їхати по годинах .. але я думаю, що цього зараз достатньо.
якщо у вас є якісь питання, просто задайте.
І пам’ятайте
Жоден мініфікатор не може правильно стиснути неправильний код.