Giải pháp để giảm thiểu các thuộc tính đối tượng?

Question

Trong ứng dụng JavaScript của tôi, tôi chỉ sử dụng một vài đối tượng cho mục đích nội bộ (người dùng không cần truy cập chúng). ví dụ:

var images={ 
    blank:"blank.gif", 
    plus:"plus.gif", 
    minus:"minus.gif" 
} 

Khi tôi sử dụng công cụ khai thác như Uglify.js, tên thuộc tính (trống, cộng, trừ) được giữ nguyên. Có cách nào để giảm thiểu chúng?

Những gì tôi đã xem xét cho đến nay:

• sử dụng Google Closure minifier trong chế độ nâng cao, nhưng điều này nghiền nát mã của tôi
• thay thế thuộc tính đối tượng với các biến số (ví dụ: var imagesBlank = "blank.gif") nhưng nó làm cho mã ít đọc được

Có cách nào tốt hơn không?

Answer 1

Vâng, trong trường hợp này, bạn chỉ có thể thay thế tất cả các tham chiếu đến images.blank bằng "blank.gif", tương tự với plus và minus. Trong khi đó có nghĩa là nhiều công việc nếu bạn, vì một lý do nào đó, quyết định thay đổi tất cả các tên tập tin của bạn, không có gì tìm kiếm toàn cầu và thay thế không thể sửa chữa được. Không cần đối tượng images.

Answer 2

Sử dụng đối tượng cho phép sử dụng biến làm thuộc tính. Gói nó trong một đóng cửa làm cho những biến xứng đáng khai thác.

//Wrap in closure 
(function() { 

    //Property Variables 
    var blank = 0; 
    var plus = 1; 
    var minus = 2; 

    //Define Object 
    var image = []; 
    image[blank] = "blank.gif"; 
    image[plus] = "plus.gif"; 
    image[minus] = "minus.gif"; 

    //Accessors - must be within closure 
    image[blank]; //blank.gif 
    image[plus]; //plus.gif 
    image[minus]; //minus.gif 

})(); 

Để truy cập vào các giá trị trên, các hằng số phải được sử dụng trong việc đóng cửa.

Nếu sử dụng Closure Compiler của Google, sử dụng var image = []; sẽ hiệu quả hơn trong khai báo mảng kể từ khi giá trị tài sản được đánh số từ số không, ví dụ: 0, 1, 2.

Nếu không, var image = {}; cũng hoạt động tốt.

Answer 3

Nếu bạn tiền tố duy nhất vào thuộc tính nội bộ của mình, bạn có thể thử --mangle-props regex trên https://github.com/mishoo/UglifyJS2.

Đây là cách sử dụng trong gulpfile của tôi, yêu cầu gulp-uglify.

var uglifyOpts = { 
    // Mangles the private "p1_" prefixed properties in an object 
    mangleProperties: { 
     regex: /^p1_/ 
    } 
};