Tuyển tập các tip và trick khi sử dụng javascript

1) Điều khiển quá trình xử lý request với ajax

Trong tháng vừa rồi mình có nhận một task về việc tính tiến trình % upload 1 file có kích thước lớn lên server. Trong lúc đọc và tìm hiểu các cách để làm việc này mình mới nhận ra có khá nhiều developer không biết, và họ thường cắm thẳng thư viện để dùng hoặc làm fake tiến trình này. Đáng buồn là cũng có vô số thư viện cũng fake quá trình này. Tuy nhiên sau đó mình cũng tìm được một số thư viện có tính toán thật và vì sau khi custom được thư viện còn dư ra khá nhiều thời gian nên mình đã code tay và cũng có được chút hiểu biết này để nói, việc này rất có ích vì trong tiến trình upload download còn có vô số các tham số hay để bạn có thể làm một điều j đó thú vị với nó hơn là chỉ để cho mỗi việc tính tiến trình % upload. Trong javascript thuần, có 1 tham số gọi là onReadyStatement dùng để xử lí tiến trình này. Còn đối với JQ đó là tham số xhr, nó return về 1 function return $ajaxSetting và trước khi return nó bạn có thể custom bất cứ thứ j thuộc về setting của nó. example:

//example code
$.ajax({
    url: this.action,
    data: data,
    type: "POST",
    contentType: false,
    processData: false,
    xhr: function(){
      var xhr = $.ajaxSettings.xhr() ;
      xhr.upload.addEventListener("progress", function(e){
        var percent = Math.floor(e.loaded / e.total * 90);
        applyCssLoading(percent);

      }, false);
      return xhr;
    },
    success: function(res) {
      clearInterval(intervalUploadProgress);
      resultUpload(res);
    },
    beforeSend: toggleClass(true)
  });

2) tránh sử dụng switch case trong js

Trong ruby on rails, để tránh sử dụng switch ta dùng hàm apply truyền vào 1 symbol, để gọi ra nội dung hàm. Liệu trong Javascript co thể làm được như thế. Có chứ, không những javascript mà còn cả php cũng có thể làm như vậy example:

var result = rand(0, 3);
switch (result) {
    case 0:
        a();
        break;
    case 1:
        b()
        break;
    case 2:
        c();
        break;
    case 3:
        d();
        break;
}

var do = {
    0: a(),
    1: b(),
    2: c(),
    3: d()
}
do[result]();

3) chút lầm tưởng về number type

câu nói gắn liền với javasript là: tất cả mọi thứ trong javascript đều là object. Nhưng có j đó không đúng: xem ví dụ sau:

2.toString() // syntax error
2 .toString() // "2"
or
(2).toString() // "2"

lí do là vì dấu . đó bị trình biên dịch js hiểu đó là dấu . trong kiểu float. OK, tất cả mọi thứ trong javascript đều là object.

4) Closure trong javascript

về bản chất của closure đó là hàm return trong hàm. và đây cũng là cách mà các thư viện js được đóng gói và viết ra vd:

function Counter(start) {
    var count = start;
    return {
        increment: function() {
            count++;
        },

        get: function() {
            return count;
        }
    }
}

var foo = Counter(4);
foo.increment();
foo.get(); // 5

Như trong ví dụ trên biến count được đóng gói và chỉ có thể thay đổi dựa vào hàm increment, và không thể truy cập từ bên ngoài