2011-11-29 3 views
8

Mam aplikację JavaScript, która generuje znaczną ilość elementów DOM. Oznacza to, że często używam document.createElement("tagname") w moim skrypcie.Czy minifender może to zrobić? (.... i czy to jest dobry pomysł?)

myślę o użyciu tej prostej funkcji:

function c(e) {return document.createElement(e);} 

chciałbym zachować pisania mojego kodu w JavaScript (lub może coffeescript) i korzystać z pełnej metody document.createElement w kodzie dla czytelności. Ale spodziewam się, że kiedy "skompiluję" lub zminimalizuję kod, wszystkie instancje document.createElement zostaną zastąpione funkcją c.

Zrobiłbym to samo dla innych metod: document.getElementById, itp. Mam nadzieję, że dzięki tej technice mogę skrócić mój kod o 10 do 20%.

Czy są dostępne minifiery lub kompilatory? I czy to ma sens przede wszystkim?

+0

Jakie korzyści masz nadzieję? –

+1

Jeśli nic więcej, zawsze możesz zrobić to samodzielnie jako krok "wstępnej". Nie powinno być zbyt trudne do napisania scenariusza. – cdeszaq

+4

Czy zgrywasz pliki? Założę się, że na dłuższą metę nie będzie to miało większego znaczenia. – RightSaidFred

Odpowiedz

3

I nie sądzę, że tyle cię zyskasz. Nieskompresowany plik js może być trochę mniejszy, ale kompresja powinna zajmować się takim powtarzalnym ciągiem. Tak więc spodziewam się, że wzmocnienie skompresowanego pliku javascript (gzip http) jest raczej niewielkie.

+0

Wierzę, że rozmiar gzip z funkcjami aliasowymi będzie w rzeczywistości większy, ponieważ same aliasy liczą się do dodatkowych bajtów ... –

0

Większość minifiertów nie zredefiniuje funkcji biblioteki DOM za pomocą krótszych wersji. Jednak ten wzór jest wykonywany ręcznie w wielu bibliotekach w celu zmniejszenia i/lub uproszczenia kodu. Więc nie ma nic złego w robieniu tego samemu. Tylko upewnij się, że robisz to wewnątrz zamknięcia ....

Spójrz na opcji dla uglifier i zobaczyć, co on może zrobić dla ciebie na przykład:

{ 
    :mangle => true, # Mangle variables names 
    :toplevel => false, # Mangle top-level variable names 
    :except => [], # Variable names to be excluded from mangling 
    :max_line_length => 32 * 1024, # Maximum line length 
    :squeeze => true, # Squeeze code resulting in smaller, but less-readable code 
    :seqs => true, # Reduce consecutive statements in blocks into single statement 
    :dead_code => true, # Remove dead code (e.g. after return) 
    :lift_vars => false, # Lift all var declarations at the start of the scope 
    :unsafe => false, # Optimizations known to be unsafe in some situations 
    :copyright => true, # Show copyright message 
    :ascii_only => false, # Encode non-ASCII characters as Unicode code points 
    :inline_script => false, # Escape </script 
    :quote_keys => false, # Quote keys in object literals 
    :beautify => false, # Ouput indented code 
    :beautify_options => { 
    :indent_level => 4, 
    :indent_start => 0, 
    :space_colon => false 
    } 
} 
0

To ma sens, ale minifier że robi to automatycznie musi być mądry o kilku rzeczach:

  1. Czy część kodu, który jest uwzględniony się do nowej funkcji powtarzania wystarczająco dużo razy, aby ten refaktoryzacja bardziej ekonomiczna?
  2. Potencjalne działanie w wyniku zawijania kodu wewnątrz dodatkowych funkcji: Zwłaszcza, gdy jest to kod, który jest często używany w scenariuszu krytycznym czasowo (profiler może to stwierdzić, prawdopodobnie minifier nie może). Być może minifier może ustawić limit liczby zamienników w głęboko zagnieżdżonych wywołaniach funkcji itp.

Prawdopodobnie lepiej zrobić to ręcznie.

+0

Czy jest wydajność, jeśli po prostu zmieniam nazwę, jak sugeruje Eric: c = document.createElement? – Christophe

+0

Niestety, Eric poprawił swój komentarz. – Christophe

0

To całkowicie zależy od minifier. Większość nie rób tego. Na przykład kod:

window['a'] = document.createElement('div'); 
window['b'] = document.createElement('div'); 
window['c'] = document.createElement('div'); 

W trybie zaawansowanym Google Closure Compiler:

window.a=document.createElement("div");window.b=document.createElement("div");window.c=document.createElement("div"); 

Na YUI Compressor:

window.a=document.createElement("div");window.b=document.createElement("div");window.c=document.createElement("div"); 

Na jscompress.com:

window["a"]=document.createElement("div");window["b"]=document.createElement("div");window["c"]=document.createElement("div") 

sobie wyobrazić, że kompilatory niechętnie metod alias DOM w przypadku dziwnych efektów ubocznych, a także powtarzające się ciągi w js będzie się dobrze skompresowane przez gzip tak.

1

Po prostu nazywam funkcję create(e) zamiast c(e). W ten sposób uzyskasz to, co najlepsze z obu światów, czytelność i nie musisz pisać tak wiele.