Bộ chỉnh sửa có thể thực hiện việc này không? (.... và đó có phải là một ý tưởng hay không?)

Question

Tôi có một ứng dụng JavaScript tạo ra một số lượng đáng kể các phần tử DOM. Điều đó có nghĩa là tôi thường sử dụng document.createElement("tagname") trong tập lệnh của mình.

Tôi đang nghĩ về việc sử dụng chức năng đơn giản này:

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

tôi sẽ tiếp tục viết mã của tôi trong JavaScript (hoặc có thể CoffeScript), và sử dụng phương pháp document.createElement đầy đủ trong mã cho dễ đọc. Nhưng tôi hy vọng rằng khi tôi "biên dịch" hoặc rút gọn mã, tất cả các cá thể của document.createElement sẽ được thay thế bằng hàm c.

Tôi sẽ làm tương tự cho các phương pháp khác: document.getElementById, v.v. Tôi hy vọng rằng tôi có thể rút ngắn mã của mình từ 10 đến 20% bằng kỹ thuật này.

Có các trình biên dịch hoặc trình biên dịch nào có thể thực hiện việc này không? Và nó có ý nghĩa ở nơi đầu tiên?

Answer 1

Tôi không nghĩ rằng nó sẽ giúp bạn đạt được điều đó nhiều. Tệp js không nén có thể hơi nhỏ hơn một chút, nhưng nén nên xử lý với chuỗi lặp đi lặp lại như vậy. Vì vậy, tôi mong đợi đạt được trên một nén (http gzip nén) tập tin javascript là khá nhỏ.

Answer 2

Hầu hết các bộ khai thác sẽ không xác định lại chức năng thư viện DOM với các phiên bản ngắn hơn. Tuy nhiên, bạn thấy mẫu này được thực hiện bằng tay trong nhiều thư viện để giảm và/hoặc đơn giản hóa mã. Vì vậy, không có gì sai khi làm điều này cho mình. Chỉ cần chắc chắn rằng bạn làm điều đó bên trong đóng cửa ....

Hãy nhìn vào các tùy chọn cho uglifier và xem những gì nó có thể làm cho bạn ví dụ:

{ 
    :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 
    } 
} 

Answer 3

Nó không có ý nghĩa, nhưng một minifier mà thực hiện điều này tự động phải được thông minh về một vài điều:

1. Liệu các phần của mã đó là yếu tố ra thành một chức năng lặp lại mới đủ thời gian để làm điều này tái cấu trúc kinh tế hơn?
2. Tách hiệu suất tiềm năng từ mã gói bên trong các chức năng bổ sung: Đặc biệt khi mã được sử dụng rất thường xuyên trong một kịch bản thời gian quan trọng (một trình thông báo có thể nói điều này, một trình chỉnh sửa có thể không thể). Có lẽ người khai thác có thể đặt giới hạn số lượng thay thế trong các cuộc gọi hàm lồng nhau sâu, v.v.

Có lẽ bạn nên làm điều này một cách thủ công.

Answer 4

Nó hoàn toàn phụ thuộc vào bộ khai thác. Hầu hết không làm điều này. Ví dụ mã:

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

Trên Google Closure Compiler chế độ nâng cao:

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

On YUI Compressor:

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

On jscompress.com:

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

Tôi tưởng tượng rằng các trình biên dịch miễn cưỡng với các phương thức DOM bí danh trong trường hợp các hiệu ứng phụ lạ, và các chuỗi lặp lại trong js sẽ được nén bằng gzip.

Answer 5

Tôi chỉ gọi hàm create(e) thay vì c(e). Bằng cách đó, bạn có được những điều tốt nhất của cả hai thế giới, khả năng đọc và bạn không phải gõ quá nhiều.