DIY Minification
Không có trình thu nhỏ nào có thể nén đúng một mã xấu.
Trong ví dụ này, tôi chỉ muốn hiển thị mức độ hoạt động của một bộ thu nhỏ.
Bạn nên làm gì trước khi thu nhỏ
Và liên quan đến jQuery ... tôi không sử dụng jQuery. JQuery là cho các trình duyệt cũ, nó được tạo ra vì lý do tương thích .. hãy kiểm tra caniuse.com, hầu hết mọi thứ hoạt động trên mọi trình duyệt (cũng tức là 10 đã được chuẩn hóa), tôi nghĩ bây giờ là chỉ ở đây để làm chậm ứng dụng web của bạn ... nếu bạn thích, $()bạn nên tạo một chức năng đơn giản của riêng mình Và tại sao phải nén mã của bạn nếu khách hàng của bạn cần tải xuống tập lệnh jquery 100kb mọi thứ? Mã không nén của bạn lớn như thế nào? 5-6kb ..? Không phải nói về hàng tấn plugin bạn thêm vào để làm cho nó dễ dàng hơn.
Mã gốc
Khi bạn viết một hàm, bạn có ý tưởng, hãy bắt đầu viết nội dung và đôi khi bạn kết thúc với một đoạn mã như sau. Đoạn mã hoạt động. Bây giờ hầu hết mọi người ngừng suy nghĩ và thêm nó vào một trình thu nhỏ và xuất bản nó.
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;
}
Đây là mã được rút gọn (tôi đã thêm các dòng mới)
Giảm thiểu bằng cách sử dụng ( 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
}
Nhưng tất cả các vars, ifs, loop & định nghĩa đó có cần thiết không?
Hầu hết thời gian KHÔNG !
- Loại bỏ if, loop, var không cần thiết
- Giữ một bản sao mã gốc của bạn
- Sử dụng bộ thu nhỏ
TÙY CHỌN (tăng hiệu suất và mã ngắn hơn)
- sử dụng toán tử tốc ký
- sử dụng toán tử bitwise (không sử dụng
Math)
- sử dụng a, b, c ... cho các vars tạm thời của bạn
- sử dụng cú pháp cũ (
while, for... không phải forEach)
- sử dụng các đối số của hàm làm trình giữ chỗ (trong một số trường hợp)
- loại bỏ không cần thiết
"{}","()",";",spaces,newlines
- Sử dụng bộ thu nhỏ
Bây giờ nếu một trình thu nhỏ có thể nén mã của bạn làm sai.
Không có trình thu nhỏ nào có thể nén đúng một mã xấu.
DIY
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
Nó thực hiện chính xác những điều tương tự như các mã ở trên.
Hiệu suất
http://jsperf.com/diyminify
Bạn luôn cần nghĩ những gì bạn cần:
Trước khi bạn nói "Không ai muốn viết mã như câu dưới đây", hãy kiểm tra 10 câu hỏi đầu tiên tại đây ...
Dưới đây là một số ví dụ phổ biến mà tôi thấy cứ sau mười phút.
Muốn có điều kiện tái sử dụng
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
Chỉ cảnh báo có nếu nó tồn tại
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
Cảnh báo có hoặc không
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
Chuyển đổi một số thành một chuỗi hoặc phó bản
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
Làm tròn một số
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Số tầng
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
chuyển trường hợp
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);
cố gắng bắt
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);
nhiều hơn nếu
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');
nhưng indexOfđọc chậm https://stackoverflow.com/a/30335438/2450730
con số
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;
Một số bài viết / trang web hay mà tôi tìm thấy về bitwise / tốc ký:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
Ngoài ra còn có nhiều trang web jsperf hiển thị hiệu suất của tốc ký & bitwsie nếu bạn tìm kiếm bằng searchhengine yêu thích của mình.
Tôi có thể đi một trong nhiều giờ .. nhưng tôi nghĩ bây giờ là đủ.
nếu bạn có một số câu hỏi chỉ cần hỏi.
Và hãy nhớ
Không có trình thu nhỏ nào có thể nén đúng một mã xấu.