Câu hỏi thực hành tốt nhất về javascript hướng đối tượng: Tôi nên định cấu hình đối tượng của mình như thế nào sau đây

Question

Tôi đã quyết định tôi cần cải thiện kỹ năng lập trình javascript cũng như kỹ năng OO của mình. Tôi hiện đang đọc qua một số cuốn sách, nhưng đôi khi rất khó để có được một nắm bắt về lý thuyết mà không nhìn thấy một số ví dụ thực tế đầu tiên. Vì vậy, tôi có câu hỏi lý thuyết về "thực tiễn tốt nhất" cho trường hợp sau ...

Tôi muốn tạo tập lệnh OO hiển thị danh sách các bản ghi tìm kiếm được truy xuất từ ​​máy chủ. Tôi cũng muốn có thể chỉnh sửa từng bản ghi thẻ tìm kiếm tại chỗ.

Hiện nay tôi đang làm điều này procedurally với một chút giúp đỡ từ các thư viện jQuery:

Tôi chấp nhận một danh sách JSON-mã hóa các hồ sơ searchtag từ máy chủ. Nó trông giống như thế này:

[ 
    { "searchTagName" : "tagOne", "searchTagID" : "1" }, 
    { "searchTagName" : "tagTwo", "searchTagID" : "2" }, 
    { "searchTagName" : "tagThree", "searchTagID" : "3" }, 
    etc... 
] 

tôi đổ JSON trực tiếp vào jTemplates để tạo ra html thích hợp, như vậy:

$("#searchTagList") 
    .setTemplateElement("template_searchTagList") 
    .processTemplate(searchTagData); 

Cuối cùng tôi muốn nó có thể sửa đổi mỗi searchtag với một Edit- phương pháp tại chỗ, vì vậy tôi đính kèm phương pháp chỉnh sửa tại chỗ cho mỗi phần tử html:

$(".searchTag").editInPlace(); 

Điều này hoạt động rất tốt về mặt thủ tục. Và có lẽ điều thông minh nhất là để lại đủ một mình. :) Nhưng, vì lợi ích của đối số, cách tốt nhất để viết một cái gì đó như thế này từ một quan điểm OO là gì.

Tôi có nên có một đối tượng "searchTagList" có phương pháp cho từng bước được thảo luận ở trên không?

var searchTagList = 
{ 
    searchTagData: JSONdata, 
    renderList: function() { /*send to jTemplates */ } 
    bindEdit: function() { /* attach edit-in-place */ } 
} 

Hoặc điều đó có đúng không? (Có vẻ như tất cả những gì tôi đang làm là gói các hàm thủ tục của tôi trong một đối tượng.) Tôi có nên phân tích cú pháp dữ liệu JSON thành các cá thể của mỗi thẻ tìm kiếm không, sau đó gắn các phương thức riêng lẻ vào mỗi thẻ tìm kiếm? (Điều này có vẻ như rất nhiều chi phí, vì không đạt được.)

Xin lỗi trước nếu có vẻ như tôi đang chọn lông. Nhưng tôi thực sự muốn có được thứ này ngay trong đầu mình.

Cảm ơn,

Travis

Answer 1

Trên thực tế, ví dụ jQuery bạn được đăng không procedual, chúng OO. Cụ thể là họ là một thực hiện các đối tượng có thể thay đổi được từ trường Lập trình chất lỏng của thiết kế OO.

Procedual sẽ là một cái gì đó như:

var el = cssQuery("#searchTagList"); 
var templateObject = makeTemplate(el,"template_searchTagList"); 
processTemplate(templateObject,searchTagData); 

chức năng sẽ là một cái gì đó như:

processTemplate(
    makeTemplate(
     cssQuery("#searchTagList"), 
     "template_searchTagList" 
    ), 
    searchTagData 
); 

jQuery đã làm một công việc khá tốt của objectifying API DOM. Bạn có thể sử dụng nó như một nguồn cảm hứng cho thư viện OO DOM của riêng bạn. Một số khác mà tôi khuyên bạn nên xem xét là YUI3 (YUI2 là rất thủ tục).

Cụ thể, mô hình chung của jQuery và YUI3 là:

nodeListConstructor(query_string).nodeMethods(); 

đâu họ xác định một đối tượng nút OO giống như quấn quanh DOM HTMLElements và sau đó một OO đối tượng phong cách NodeList để cho phép bạn các nút xử lý hàng loạt . Điều này trong quan điểm khiêm tốn của tôi là một mẫu thiết kế tốt.

Answer 2

Bạn có thể sử dụng mẫu Mô-đun Javascript để có hiệu lực tốt tại đây.

Theo mô hình mà định nghĩa searchTagList của bạn sẽ thay đổi để:

var searchTagList = function() { 
    searchTagData: JSONdata; 
    return { 
    renderList: function() { /*send to jTemplates */ }, 
    bindEdit: function() { /* attach edit-in-place */ } 
    }; 
}(); 

Hai chức năng renderList và bindEdit vẫn sẽ có thể truy cập searchTagData nhưng sẽ vẫn không thể tiếp cận để mã mô-đun searchTagList bên ngoài.

Quan sát rằng hàm ẩn danh thực thi ngay lập tức và trả về một đối tượng chứa hai phương thức công khai (renderList và bindEdit) tạo thành một closure trên searchTagData thành viên riêng tư.

Bạn có thể đọc thêm về mẫu Mô-đun here.