Естественно, в ход идут все самые изощренные способы и техники уменьшения размера исходника. У них есть вики-страничка с советами, которую я и решил перевести.
Сразу оговорюсь, что читаемость обработанного таким образом кода стремится к нулю, так что использовать эти трюки стоит только в случаях, когда размер действительно превыше всего. Например, при участии в конкурсе JS1k.
Итак.
Arguments
Используйте однобуквенные позиционные аргументы в алфавитном порядке
Поскольку аргументы функции должны быть как можно более короткими, и скорее всего будут использованы по несколько раз во время выполнения, проще рассматривать их с точки зрения позиции и именовать в алфавитном порядке, вместо того, чтобы пытаться давать им сколько-либо осмысленные имена.
function(t,d,v,i,f){...} // до
function(a,b,c,d,e){...} // после
Проверяйте наличие аргументов вместо длины
Можно использовать
in для проверки наличия аргумента.arguments.length>1||(cb=alert) // до
1 in arguments||(cb=alert) // после
Переменные
Используйте «лишние» аргументы вместо var
Можно сэкономить несколько байт указав лишний аргумент в функции, вместо объявления переменной с помощью
var:function(a){var b=1;...} // до
function(a,b){b=1;...} // после
Используйте переменные по несколько раз
setTimeout(function(){for(var i=10;i--;)... }, a) // до
setTimeout(function(){for(a=10;a--;)... }, a) // после
Используйте присваивание там, где это возможно
Поскольку оператор присваивания возвращает присваиваемое значение, можно использовать присваивание и проверку одновременно:
a=this.localStorage;if(a){...} // до
if(a=this.localStorage){...} // после
Используйте массив чтобы поменять местами переменные
Массив можно использовать как временное хранилище, чтобы не объявлять лишнюю переменную.
var a=1,b=2,c;c=a;a=b;b=c // до
var a=1,b=2;a=[b,b=a][0] // после
Используйте приведение типов при сложении
Приведение типов в JS работает весьма странно и является одним из самых распространенных источником багов. Тем не менее, его можно использовать разными интересными способами для уменьшения размеров кода.
Наример, в реализации pubsub Джед Шмидт декрементировал переменную с отрицательным числом, а затем прибавлял ее к строке, получая что-то вида
"somestring-123".После этого в другом месте использовал
.split('-') для получения исходной строки.Циклы
Опускайте тело цикла
Зачастую можно реализовать всю логику внутри условий и сэкономить на теле цикла.
Хороший пример этого подхода можно посмотреть в функции timeAgo.
Используйте for вместо while
for и while обычно занимают одинаково количество байт, но for позволяет получить больший контроль и больше возможностей для присваивания.while(i--){...} // до
for(;i--;){...} // после
i=10;while(i--){...} // до
for(i=10;i--;){...} // после
Используйте быструю итерацию по «правдивым» массивам
Если у вас есть массив, все члены которого заведомо приводятся к true, можно использовать более короткую запись цикла:
for(a=[1,2,3,4,5],l=a.length,i=0;i<l;i++){b=a[i];...} // до
for(a=[1,2,3,4,5],i=0;b=a[i++];){...} // после
Используйте for..in с присваиванием для получения ключей объектов
a=[];for(b in window)a.push(window[b]) // до
a=[];i=0;for(a[i++]in window); // после
Операторы
Выучите приоритет операторов
Эти знания могут помочь неплохо сэкономить на скобках.
Начать можно с изучения этой статьи на сайте Mozilla.
Используйте ~ c indexOf
hasAnF="This sentence has an f.".indexOf("f")>=0 // до
hasAnF=~"This sentence has an f.".indexOf("f") // после
Используйте запятую для последовательного выполнения операторов вместо блока
with(document){open();write("hello");close()} // до
with(document)open(),write("hello"),close() // после
Используйте более короткие способы записи undefined
Вместо
undefined можно использовать []._ или void 0.Есть варианты
""._, 1.._ и [][0], но они намного медленнее.Удаляйте необязательные пробелы перед операторами
Иногда пробелы после операторов можно безболезненно удалить.
typeof [] // до
typeof[] // после
Числа
Используйте ~~ или 0| вместо Math.floor
rand10=Math.floor(Math.random()*10) // до
rand10=0|Math.random()*10 // после
Используйте экспоненциальный формат для больших круглых чисел
million=1000000 // до
million=1e6 // после
Используйте побитовые сдвиги для больших бинарных чисел
color=0x100000 // до
color=1<<20 // после
Используйте 1/0 вместо Infinity
Это короче. Кроме того, делить на нуль всегда весело.
[Infinity,-Infinity] // до
[1/0,-1/0] // после
Используйте «ложность» нуля
Вместо сравнивания чисел иногда короче свести значение к нулю и проверить его истинность.
a==1||console.log("not one") // до
~-a&&console.log("not one") // после
Используйте ~ чтобы изменить любое значение на единицу
В сочетании с унарным минусом это дает возможность, например, инкрементировать любую, даже еще не определенную переменную.
// i = undefined
i=i||0;i++ // до
i=-~i // после
Строки
Разбивайте строки с помощью нуля
Можно сэкономить два байта при разбиении строк методом
split, если в качестве разделителя использовать нуль:'alpha,bravo,charlie'.split(',') // до
'alpha0bravo0charlie'.split(0) // после
Используйте браузерный метод link
Строки в браузерах имеют не очень известный метод
link, который создает html-ссылку.html="<a href='"+url+"'>"+text+"</a>" // до
html=text.link(url) // после
Используйте методы replace и exec для итерации по строкам
Эти методы позволяют передавать функцию в качестве второго аргумента. Этим можно воспользоваться для удобной итерации по строке.
Примеры использования: templates и UUID.
Используйте массивы для создания простых строк
for(a="",i=32;i--;)a+=0 // до
a=Array(33).join(0) // после
Регулярные выражения
Используйте
{n} для укорачивания рeгулярных выражений. Например /\d{3}/ вместо /\d\d\d/. И наоборот /\d\d/ вместо /\d{2}/.Можно использовать
eval вместо конструктора регулярки:r=new RegExp("{"+p+"}","g") // до
r=eval("/{"+p+"}/g") // после
Boolean
Используйте
! с цифрами для создания true и false.[true,false] // до
[!0,!1] // после
Функции
Используйте именованные функции для рекурсии вместо циклов
Зачастую это получается короче, поскольку позволяет протаскивать значения через стек, без лишних переменных.
В качестве примера функция walk.
Используйте именованные функции для хранения состояния
Если надо хранить состояние между вызовами функции, функцию можно использовать как объект и хранить данные в ее свойствах:
function(i){return function(){console.log("called "+(++i)+" times")}}(0) // до
(function a(){console.log("called "+(a.i=-~a.i)+" times")}) // после
0,function a(){console.log("called "+(a.i=-~a.i)+" times")} // еще вариант
Опускайте скобки при вызове конструктора без аргументов
now = +new Date() // до
now = +new Date // после
Опускайте ключевое слово new там, где это возможно
Некоторым конструкторам вовсе не обязательно ключевое слово
new.r=new Regexp(".",g) // до
r=Regexp(".",g) // после
l=new Function("x","console.log(x)") // до
l=Function("x","console.log(x)") // после
Оператор return
Когда надо вернуть что-то отличное от переменной, ставить пробел после
return не обязательно.return ['foo',42,'bar']; // до
return['foo',42,'bar']; // после
return {x:42,y:417}; // до
return{x:42,y:417}; // после
return .01; // до
return.01; // после
Пока все.
Вообще, рекомендую ознакомиться с плодами их творчества. В попытках уместить сложные вещи в 140 байт ребята иногда просто творят чудеса. Я думаю, даже опытный программист найдет для себя что-то новое и интересное в их коде.
комментарии (121)