Javascript hướng đối tượng thực tiễn tốt nhất? [đóng cửa]


251

Tôi đang thấy mình đang mã hóa một dự án lớn trong Javascript. Tôi nhớ cái cuối cùng là một cuộc phiêu lưu vì JS hacky có thể nhanh chóng trở nên không thể đọc được và tôi muốn mã này được sạch sẽ.

Chà, tôi đang sử dụng các đối tượng để xây dựng một lib, nhưng có một số cách để định nghĩa mọi thứ trong JS, ngụ ý các hậu quả quan trọng trong phạm vi, quản lý bộ nhớ, không gian tên, v.v.

  • sử dụng varhay không sử dụng ;
  • xác định những thứ trong tập tin, hoặc (function(){...})()theo kiểu jquery;
  • sử dụng this, hoặc không;
  • sử dụng function myname()hoặc myname = function();
  • xác định các phương thức trong cơ thể của đối tượng hoặc sử dụng "nguyên mẫu";
  • Vân vân.

Vậy đâu là những thực tiễn tốt nhất khi mã hóa trong OO trong JS?

Giải thích học tập thực sự mong đợi ở đây. Liên kết đến những cuốn sách được chào đón nồng nhiệt, miễn là chúng đối phó với chất lượng và sự mạnh mẽ.

BIÊN TẬP :

Có một số bài đọc, nhưng tôi vẫn rất quan tâm đến câu trả lời cho các câu hỏi ở trên và bất kỳ thực tiễn tốt nhất.


2
Có lẽ "hướng đối tượng" trong tiêu đề nên được thay thế thành "hiện đại".
viam0Zah

43
Hmmm, 79 upvote, 82 favs, 91 upvote cho câu trả lời ... tuy nhiên điều này đã bị đóng cửa vì không mang tính xây dựng ... tại sao ??
Brett Rossier

1
Tôi đã viết một lớp đơn giản chuyển các tính năng C ++ OOP sang javascript với cú pháp đơn giản và tự nhiên. Xem câu trả lời của tôi ở đây: stackoverflow.com/a/18239463/1115652

14
Loại câu hỏi này luôn luôn được đóng lại. Tôi hiểu lý do cho việc này, nhưng vì chúng là những câu hỏi quan trọng và luôn phổ biến (và vì tôi luôn tìm thấy chúng khi tôi có một câu hỏi tương tự), tôi tự hỏi liệu có ai có thể hướng chúng tôi đến địa điểm thích hợp để hỏi họ không?
KP MacGregor

2
@BrettRossier Sức mạnh nào tốt nếu bạn không sử dụng nó? SO là minh chứng trực tiếp về cách thức hoạt động của một trật tự dân chủ. Chắc chắn một số nhà tâm lý học đang xem xét nó ...

Câu trả lời:


288

Sử dụng `var` hay không

Bạn nên giới thiệu bất kỳ biến nào với varcâu lệnh, nếu không nó sẽ thuộc phạm vi toàn cầu.

Điều đáng nói là trong chế độ nghiêm ngặt ( "use strict";) các bài tập biến không được khai báo sẽ némReferenceError .

Hiện tại JavaScript không có phạm vi khối. Trường Crockford dạy bạn đặt các câu lệnh var ở đầu thân hàm , trong khi Hướng dẫn kiểu của Dojo đọc rằng tất cả các biến phải được khai báo trong phạm vi nhỏ nhất có thể . ( letTuyên bố và định nghĩa được giới thiệu trong JavaScript 1.7 không phải là một phần của tiêu chuẩn ECMAScript.)

Đó là một thực tiễn tốt để liên kết các thuộc tính của các đối tượng được sử dụng thường xuyên với các biến cục bộ vì nó nhanh hơn việc tra cứu toàn bộ chuỗi phạm vi. (Xem Tối ưu hóa JavaScript để có hiệu suất cao và mức tiêu thụ bộ nhớ thấp .)

Xác định những thứ trong tệp hoặc trong một `(function () {...}) ()`

Nếu bạn không cần phải tiếp cận các đối tượng của mình bên ngoài mã của mình, bạn có thể bọc toàn bộ mã của mình trong một biểu thức chức năng - nó được gọi là mẫu mô-đun. Nó có lợi thế về hiệu suất và cũng cho phép mã của bạn được thu nhỏ và che khuất ở mức cao. Bạn cũng có thể đảm bảo nó sẽ không gây ô nhiễm không gian tên toàn cầu. Hàm đóng gói trong JavaScript cũng cho phép bạn thêm hành vi hướng theo khía cạnh. Ben Cherry có một bài viết chuyên sâu về mô hình mô-đun .

Sử dụng 'cái này' hay không

Nếu bạn sử dụng kế thừa giả cổ điển trong JavaScript, bạn khó có thể tránh sử dụng this. Đó là một vấn đề của hương vị mà mô hình thừa kế bạn sử dụng. Đối với các trường hợp khác, hãy xem bài viết của Peter Michaux về các tiện ích JavaScript mà không có "cái này" .

Sử dụng `function myname ()` hoặc `myname = function ();`

function myname()là một khai báo hàm và myname = function();là một biểu thức hàm được gán cho biến myname. Biểu mẫu sau chỉ ra rằng các hàm là các đối tượng hạng nhất và bạn có thể làm bất cứ điều gì với chúng, như với một biến. Sự khác biệt duy nhất giữa chúng là tất cả các khai báo hàm được nâng lên trên cùng của phạm vi, điều này có thể quan trọng trong một số trường hợp nhất định. Nếu không thì chúng bằng nhau. function foo()là một hình thức tốc ký. Thông tin chi tiết về cẩu nâng có thể được tìm thấy trong bài viết về Phạm vi và Tời kéo JavaScript .

Xác định các phương thức trong cơ thể của đối tượng hoặc sử dụng "nguyên mẫu"

Tuỳ bạn. JavaScript có bốn mẫu tạo đối tượng: giả cổ điển, nguyên mẫu, chức năng và các bộ phận ( Crockford, 2008 ). Mỗi người đều có ưu và nhược điểm, hãy xem Crockford trong các cuộc nói chuyện bằng video của mình hoặc nhận cuốn sách Những phần tốt như Anon đã đề xuất .

Khung

Tôi khuyên bạn nên chọn một số khung JavaScript, nghiên cứu các quy ước và kiểu dáng của chúng và tìm các thực tiễn và các mẫu phù hợp nhất với bạn. Chẳng hạn, Bộ công cụ Dojo cung cấp một khung mạnh mẽ để viết mã JavaScript hướng đối tượng, thậm chí hỗ trợ nhiều kế thừa.

Mẫu

Cuối cùng, có một blog dành riêng để khám phá các mẫu và các mẫu chống JavaScript phổ biến . Ngoài ra kiểm tra câu hỏi Có bất kỳ tiêu chuẩn mã hóa cho JavaScript? trong Stack Overflow.


1
"JavaScript có bốn mẫu tạo đối tượng: giả cổ điển, nguyên mẫu, chức năng và các bộ phận" - Tôi thực sự đánh giá cao một bản tóm tắt về ưu và nhược điểm ở đây.
BadHorsie 11/03/2015

2
" letTuyên bố và định nghĩa được giới thiệu trong JavaScript 1.7 không phải là một phần của tiêu chuẩn ECMAScript." Bây giờ nó là một phần của ES6.
Michał Perłakowski

13

Tôi sẽ viết ra một số thứ mà tôi đọc hoặc đưa vào ứng dụng kể từ khi tôi hỏi câu hỏi này. Vì vậy, mọi người đọc nó sẽ không cảm thấy thất vọng, vì hầu hết các câu trả lời là của RTMF được ngụy trang (ngay cả khi tôi phải thừa nhận, những cuốn sách được đề xuất là tốt).

Sử dụng Var

Bất kỳ biến nào được cho là đã được khai báo ở phạm vi cao hơn trong JS. Vì vậy, bất cứ khi nào bạn muốn một biến mới, hãy khai báo nó để tránh những bất ngờ xấu như thao túng một var toàn cầu mà không nhận thấy nó. Do đó, luôn luôn sử dụng từ khóa var.

Trong một đối tượng thực hiện, var biến riêng tư. Nếu bạn muốn chỉ khai báo một biến công khai, hãy sử dụngthis.my_var = my_value để làm như vậy.

Phương pháp khai báo

Trong JS, chúng có rất nhiều cách khai báo các phương thức. Đối với một lập trình viên OO, cách tự nhiên và hiệu quả nhất là sử dụng cú pháp sau:

Bên trong cơ thể đối tượng

this.methodName = function(param) {

/* bla */

};

Có một nhược điểm: các chức năng bên trong sẽ không thể truy cập "cái này" vì phạm vi JS vui nhộn. Douglas Crockford khuyên bạn nên bỏ qua giới hạn này bằng cách sử dụng một biến cục bộ thông thường có tên là "cái đó". Vì vậy, nó trở thành

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

Không dựa vào cuối dòng tự động

JS cố gắng tự động thêm ;vào cuối dòng nếu bạn quên nó. Đừng dựa vào hành vi này, vì bạn sẽ gặp lỗi là một mớ hỗn độn để gỡ lỗi.


8

Trước tiên nên đọc về lập trình dựa trên nguyên mẫu để bạn biết bạn đang đối phó với loại quái thú nào và sau đó xem hướng dẫn về kiểu JavaScript tại trang MDCJavaScript tại MDC . Tôi cũng thấy tốt nhất để buộc chất lượng mã bằng một công cụ, tức là. Lint JavaScript hoặc các biến thể khác.

Thực tiễn tốt nhất với OO nghe có vẻ giống như bạn muốn tìm các mẫu hơn là tập trung vào chất lượng mã, vì vậy hãy xem tìm kiếm của Google: mẫu javascriptmẫu jQuery .


5

Bạn có thể muốn kiểm tra Bí mật của Ninja Ninja của John Resig (jQuery). "Cuốn sách này nhằm mục đích đưa một nhà phát triển JavaScript trung gian và cung cấp cho anh ta kiến ​​thức cần thiết để tạo thư viện JavaScript trên nhiều trình duyệt, từ đầu, trở lên."

Bản nháp có sẵn thông qua nhà xuất bản: http://www.manning.com/resig/

Douglas Crockford cũng có một số bài viết JavaScript hay trên trang chủ của mình: http://www.crockford.com/


5

Tôi thường cảm thấy như anh chàng duy nhất ở đây sử dụng MooTools cho javascript của tôi.

Nó là viết tắt của M y O bject O riented Tools, mootools.

Tôi thực sự thích việc họ tham gia OOP trong javascript. Bạn cũng có thể sử dụng triển khai lớp của họ cùng với jquery, vì vậy bạn không phải bỏ qua jquery (mặc dù mootools cũng làm như vậy).

Dù sao, hãy cho liên kết đầu tiên đọc tốt và xem những gì bạn nghĩ, liên kết thứ hai là các tài liệu mootools.

MooTools & Kế thừa

Lớp học MooTools


Tôi không cố gắng uốn cong một ngôn ngữ để làm cho nó phù hợp với bạn cũ là một điều tốt. Giống như những người này ở C, sử dụng # để thay thế làm cho nó trông giống như fortran, hoặc người nào khác. Tôi nghĩ bạn nên cố gắng học cách ngôn ngữ hoạt động (và cách thực hành tốt nhất của nó, và sử dụng nó theo cách không làm phiền bạn quá nhiều. Nhưng thực sự không thay đổi nó.
e-satis

2
Tôi nghĩ rằng hệ thống đối tượng MooTools khá thanh lịch và thực sự giúp tôi giữ cho mã của mình được tổ chức / đóng gói.
awesomo

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.