ExtJS 3: Hai cách tạo lớp tùy chỉnh: sự khác biệt là gì?

Question

Tôi đang cố gắng tìm hiểu ExtJS và JavaScript hướng đối tượng nói chung. Tôi đã thấy mọi người định nghĩa các lớp trong các không gian tên tùy chỉnh theo một vài cách. Sự khác nhau giữa hai phương pháp này là gì?

Phương pháp 1

Ext.ns('myapp.cars'); 
(function(){ 
    var Car = Ext.extend(Object, { 
     //... 
    }) 

    myapp.cars.Car = Car; 
})() 

Phương pháp 2

Ext.ns('myapp.cars'); 
myapp.cars.Car = Ext.extend(Object, { 
     //... 
}); 

Cách 2 là dễ dàng hơn để đọc và đòi hỏi ít mã; có bất kỳ lý do nào Phương pháp 1 tốt hơn không? Cảm ơn!

Answer 1

Về cơ bản giống nhau, ngoại trừ việc bạn có thể sử dụng biến riêng tư trong hàm tự thực hiện của phương thức đầu tiên, trong khi bạn chỉ có thể xác định biến toàn cục trong phương thức thứ hai.

Ví dụ:

Ext.ns('myapp.cars'); 
(function(){ 

    var carInfo = { 
     goodEngine: true 
    }; 

    var Car = Ext.extend(Object, { 
     info: carInfo 
    }); 

    myapp.cars.Car = Car; 
})() 

// carInfo is undefined here, so this will give an error 
alert(carInfo.goodEngine); 

Vì vậy, phương pháp đầu tiên là khá hữu ích nếu bạn làm việc với một Bunge của các biến mà bạn sẽ không sử dụng sau này.

Answer 2

Sau đây là thực tế tương đương:

var Car = Ext.extend(Object, { 
    //... 
}); 

myapp.cars.Car = Car; 

... và:

myapp.cars.Car = Ext.extend(Object, { 
    //... 
}); 

Trong ví dụ đầu tiên bạn muốn được sử dụng một biến tạm thời để giữ một tham chiếu đến đối tượng mới được tạo , sau đó được sao chép sang myapp.cars.Car (tham chiếu được sao chép, không phải đối tượng). Trong ví dụ thứ hai, bạn sẽ gán trực tiếp tham chiếu cho đối tượng cho myapp.cars.Car.

Lý do ví dụ đầu tiên của bạn được đính kèm trong chức năng ẩn danh tự gọi (function(){ })() là giới hạn phạm vi của biến tạm thời đó. Điều đó thường được thực hiện để không gây ô nhiễm không gian tên chung với biến số Car. Nếu có một biến số khác là Car được xác định ở nơi khác, nó sẽ không xung đột với biến này. Ví dụ:

var Car = "My Nice Car"; 

(function(){ 
    var Car = Ext.extend(Object, { 
     //... 
    }); 

    myapp.cars.Car = Car; 
})(); 

alert(Car); // Still "My Nice Car" 
      // No conflict with the `Car` variable in the self invoking function.