Praktik terbaik Javascript Berorientasi Objek? [Tutup]

251

Saya menemukan diri saya sedang menyusun proyek besar dalam Javascript. Saya ingat yang terakhir adalah cukup petualangan karena peretasan JS dapat dengan cepat menjadi tidak dapat dibaca dan saya ingin kode ini menjadi bersih.

Yah, saya menggunakan objek untuk membangun lib, tetapi ada beberapa cara untuk mendefinisikan hal-hal di JS, menyiratkan konsekuensi penting dalam ruang lingkup, manajemen memori, ruang nama, dll. EG:

  • menggunakan varatau tidak;
  • mendefinisikan hal-hal dalam file, atau dalam (function(){...})()gaya jquery;
  • menggunakan this, atau tidak;
  • menggunakan function myname()atau myname = function();
  • mendefinisikan metode dalam tubuh objek atau menggunakan "prototipe";
  • dll.

Jadi apa yang benar-benar praktik terbaik saat coding di OO di JS?

Penjelasan akademis sangat diharapkan di sini. Tautan ke buku disambut dengan hangat, asalkan buku tersebut berhubungan dengan kualitas dan kekokohan.

EDIT:

Ada beberapa bacaan, tetapi saya masih sangat tertarik dengan jawaban atas pertanyaan di atas dan praktik terbaik apa pun.

e-satis
sumber
2
Mungkin "berorientasi objek" dalam judul harus diganti menjadi "modern".
viam0Zah
43
Hmmm, 79 upvotes, 82 favs, 91 upvotes pada jawabannya ... namun ini ditutup karena tidak konstruktif ... mengapa ??
Brett Rossier
1
Saya menulis kelas sederhana porting C ++ OOP Fitur untuk javascript dengan sintaks yang sederhana dan alami. Lihat jawaban saya di sini: stackoverflow.com/a/18239463/1115652
14
Jenis pertanyaan ini selalu tertutup. Saya mengerti alasan untuk ini, tetapi karena ini adalah pertanyaan penting, dan selalu populer (dan karena saya selalu menemukan mereka ketika saya memiliki pertanyaan serupa), saya bertanya-tanya apakah ada yang bisa mengarahkan kami ke tempat yang tepat untuk menanyakannya?
KP MacGregor
2
@ BrettRossier Apa gunanya kekuatan jika Anda tidak menggunakannya? SO adalah demonstrasi langsung tentang cara kerja kekuasaan demokratis. Tentunya beberapa psikolog mencari ke dalamnya ...

Jawaban:

288

Menggunakan `var` atau tidak

Anda harus memperkenalkan variabel apa pun dengan varpernyataan, jika tidak maka akan masuk ke ruang lingkup global.

Perlu disebutkan bahwa dalam mode ketat ( "use strict";) tugas variabel yang dideklarasikan melemparReferenceError .

Saat ini JavaScript tidak memiliki cakupan blok. Sekolah Crockford mengajarkan Anda untuk meletakkan pernyataan var di awal function function , sementara Dojo's Style Guide membaca bahwa semua variabel harus dideklarasikan dalam ruang lingkup sekecil mungkin . ( letPernyataan dan definisi yang diperkenalkan dalam JavaScript 1.7 bukan bagian dari standar ECMAScript.)

Ini adalah praktik yang baik untuk mengikat properti objek yang digunakan secara teratur ke variabel lokal karena lebih cepat daripada mencari seluruh rantai lingkup. (Lihat Mengoptimalkan JavaScript untuk kinerja ekstrem dan konsumsi memori rendah .)

Menentukan hal-hal dalam file, atau dalam `(function () {...}) ()`

Jika Anda tidak perlu menjangkau objek Anda di luar kode Anda, Anda dapat membungkus seluruh kode Anda dalam ekspresi fungsi - disebut pola modul. Ini memiliki keunggulan kinerja, dan juga memungkinkan kode Anda untuk diperkecil dan dikaburkan di tingkat tinggi. Anda juga dapat memastikan itu tidak akan mencemari namespace global. Fungsi Pembungkus dalam JavaScript juga memungkinkan Anda untuk menambahkan perilaku berorientasi aspek. Ben Cherry memiliki artikel mendalam tentang pola modul .

Menggunakan `ini` atau tidak

Jika Anda menggunakan warisan pseudo-klasik dalam JavaScript, Anda tidak dapat menghindari menggunakannya this. Ini masalah selera pola pewarisan yang Anda gunakan. Untuk kasus lain, lihat artikel Peter Michaux tentang Widget JavaScript Tanpa "ini" .

Menggunakan `function myname ()` atau `myname = function ();`

function myname()adalah deklarasi fungsi dan myname = function();ekspresi fungsi yang ditugaskan ke variabel myname. Bentuk terakhir menunjukkan bahwa fungsi adalah objek kelas satu, dan Anda bisa melakukan apa saja dengannya, seperti halnya variabel. Satu-satunya perbedaan di antara mereka adalah bahwa semua deklarasi fungsi diangkat ke atas lingkup, yang mungkin penting dalam kasus-kasus tertentu. Kalau tidak, mereka sama. function foo()adalah bentuk steno. Rincian lebih lanjut tentang mengangkat dapat ditemukan di artikel Pelingkupan dan Mengangkat JavaScript .

Mendefinisikan metode dalam tubuh objek atau menggunakan "prototipe"

Terserah kamu. JavaScript memiliki empat pola pembuatan objek: pseudo-klasik, prototipe, fungsional, dan bagian ( Crockford, 2008 ). Masing-masing memiliki pro dan kontra, lihat Crockford dalam ceramah videonya atau dapatkan bukunya The Good Parts seperti yang disarankan Anon .

Kerangka kerja

Saya sarankan Anda mengambil beberapa kerangka kerja JavaScript, mempelajari konvensi dan gaya mereka, dan menemukan praktik dan pola yang paling cocok untuk Anda. Misalnya, Dojo Toolkit menyediakan kerangka kerja yang kuat untuk menulis kode JavaScript berorientasi objek yang bahkan mendukung banyak pewarisan.

Pola

Terakhir, ada sebuah blog yang didedikasikan untuk mengeksplorasi pola JavaScript umum dan anti-pola . Lihat juga pertanyaannya. Apakah ada standar pengkodean untuk JavaScript? di Stack Overflow.

viam0Zah
sumber
1
"JavaScript memiliki empat pola pembuatan objek: pseudo-klasik, prototipe, fungsional, dan bagian" - Saya akan sangat menghargai ringkasan pro dan kontra di sini.
BadHorsie
2
" letPernyataan dan definisi yang diperkenalkan dalam JavaScript 1.7 bukan bagian dari standar ECMAScript." Sekarang bagian dari ES6.
Michał Perłakowski
13

Saya akan menuliskan beberapa hal yang saya baca atau letakkan di aplikasi sejak saya mengajukan pertanyaan ini. Jadi orang-orang yang membacanya tidak akan frustrasi, karena sebagian besar jawabannya adalah RTMF yang menyamar (bahkan jika harus saya akui, buku yang disarankan itu bagus).

Penggunaan Var

Setiap variabel seharusnya sudah dideklarasikan pada ruang lingkup yang lebih tinggi di JS. Jadi, kapan pun Anda menginginkan variabel baru, deklarasikan untuk menghindari kejutan buruk seperti memanipulasi var global tanpa menyadarinya. Karena itu, selalu gunakan kata kunci var.

Dalam membuat objek, var variabel pribadi. Jika Anda hanya ingin mendeklarasikan variabel publik, gunakan this.my_var = my_valueuntuk melakukannya.

Mendeklarasikan metode

Di JS, ada banyak cara untuk mendeklarasikan metode. Untuk seorang programmer OO, cara yang paling alami namun efisien adalah dengan menggunakan sintaks berikut:

Di dalam tubuh benda

this.methodName = function(param) {

/* bla */

};

Ada kekurangannya: fungsi dalam tidak akan dapat mengakses "ini" karena lingkup JS lucu. Douglas Crockford merekomendasikan untuk memotong batasan ini menggunakan variabel lokal konvensional bernama "itu". Jadi itu menjadi

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

Jangan mengandalkan ujung jalur otomatis

JS mencoba menambahkan secara otomatis ;di akhir baris jika Anda lupa. Jangan mengandalkan perilaku ini, karena Anda akan mendapatkan kesalahan yang berantakan untuk debug.

e-satis
sumber
8

Pertama-tama harus membaca tentang pemrograman berbasis prototipe sehingga Anda tahu jenis binatang apa yang Anda hadapi dan kemudian lihat panduan gaya JavaScript di MDC dan halaman JavaScript di MDC . Saya juga menemukan cara terbaik untuk memaksa kualitas kode dengan alat, yaitu. JavaScript Lint atau varian lainnya.

Praktik terbaik dengan OO terdengar lebih seperti Anda ingin menemukan pola daripada berkonsentrasi pada kualitas kode, jadi lihat pencarian Google: pola javascript dan pola jQuery .

Bleadof
sumber
5

Anda mungkin ingin melihat Rahasia Ninja JavaScript oleh John Resig (jQuery). "Buku ini dimaksudkan untuk mengambil pengembang JavaScript menengah dan memberinya pengetahuan yang diperlukannya untuk membuat perpustakaan JavaScript lintas-browser, dari awal, ke atas."

Draf tersedia melalui penerbit: http://www.manning.com/resig/

Douglas Crockford juga memiliki beberapa artikel JavaScript yang bagus di beranda: http://www.crockford.com/

gregers
sumber
5

Saya sering merasa seperti satu-satunya orang di sini yang menggunakan Mootools untuk javascript saya.

Singkatan dari M y O bject O riented Tools, mootools.

Saya sangat suka pendapat mereka tentang OOP di javascript. Anda dapat menggunakan implementasi kelas mereka bersama dengan jquery juga, jadi Anda tidak perlu membuang jquery (meskipun mootools melakukan semuanya dengan baik).

Bagaimanapun, berikan tautan pertama bacaan yang baik dan lihat apa yang Anda pikirkan, tautan kedua adalah ke dokumen mootools.

Mootools & Warisan

Kelas Mootools

Ryan Florence
sumber
Saya tidak mencoba menekuk suatu bahasa agar sesuai dengan Anda kebiasaan lama adalah hal yang baik. Ini seperti orang-orang di C, menggunakan # untuk menggantikan membuatnya tampak seperti fortran, atau yang lain. Saya pikir Anda harus mencoba untuk belajar cara kerja bahasa (dan practicesà yang terbaik, dan menggunakannya dengan cara yang tidak mengganggu Anda terlalu banyak Tapi tidak mengubahnya, benar-benar..
e-satis
2
Saya pikir sistem objek MooTools cukup elegan dan sangat membantu saya untuk menjaga kode saya terorganisir / dienkapsulasi.
awesomo