JavaScript seperti bos: memahami API yang fasih

Takeaways Key

API yang fasih dalam JavaScript membolehkan kod yang lebih mudah dibaca dan difahami dengan membolehkan panggilan fungsi panggilan, dicapai dengan mengembalikan objek 'ini' dalam setiap fungsi. Ini menjadikan kod lebih intuitif dan lebih mudah untuk debug, terutamanya apabila berurusan dengan urutan panggilan fungsi yang kompleks.
Ujian prestasi pada pelayar yang berbeza (Chrome, Firefox, IE) menunjukkan bahawa menggunakan API fasih tidak memberi kesan yang ketara. Dalam sesetengah kes, API yang fasih lebih cepat daripada API biasa, menunjukkan bahawa mereka boleh digunakan tanpa kebimbangan mengenai kerugian prestasi.
API fasih bukan sahaja terpakai kepada JavaScript tetapi boleh digunakan dengan mana -mana perpustakaan atau rangka kerja JavaScript. Banyak perpustakaan dan kerangka yang popular, seperti jQuery, sudah menggunakan API fasih untuk menjadikan kaedah mereka lebih mudah dibaca dan ekspresif. Walau bagaimanapun, mereka harus digunakan dengan bijak, memandangkan keperluan projek dan kebiasaan pasukan dengan corak API yang fasih.

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Semasa merancang Babylon.js v2.0 (perpustakaan untuk membina 3D di web), saya baru -baru ini mendapati diri saya berharap bahawa lebih banyak API fasih - iaitu, saya berharap masyarakat dapat lebih mudah membaca, memahami, dan membina Kerja sambil menghabiskan lebih sedikit masa dalam dokumen teknologi. Dalam tutorial ini, saya akan berjalan melalui API yang fasih-apa yang perlu dipertimbangkan, bagaimana menulisnya, dan implikasi prestasi silang pelayar.

Apa yang menjadikan API fasih?

API yang fasih, seperti yang dinyatakan oleh artikel Wikipedia ini, adalah pelaksanaan API berorientasikan objek yang bertujuan untuk menyediakan lebih banyak kod yang boleh dibaca. JQuery, sebagai contoh, adalah contoh hebat tentang apa yang API yang fasih membolehkan anda lakukan:

<span>$('<div></div>')
</span>     <span>.html("Fluent API are cool!")
</span>     <span>.addClass("header")
</span>     <span>.appendTo("body");</span>

API yang fasih membolehkan anda mengawasi fungsi panggilan dengan mengembalikan objek ini. Jika anda tidak menyedari bagaimana kata kunci ini berfungsi dalam JavaScript, saya cadangkan membaca artikel hebat ini.

kita boleh membuat API yang fasih seperti ini:

<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}</span>

seperti yang anda dapat lihat, silap mata adalah tentang mengembalikan objek ini (rujukan kepada contoh semasa dalam kes ini) untuk membolehkan rantai diteruskan.

kita boleh berantai panggilan:

<span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);</span>

Sebelum cuba melakukan perkara yang sama dengan Babylon.js, saya ingin memastikan bahawa ini tidak akan menghasilkan beberapa masalah prestasi.

jadi saya membuat penanda aras!

<span>var count = 10000000;
</span>
<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}
</span>
<span>MyClass.prototype.foo2 = function (b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span><span>}
</span>
<span>var start = new Date().getTime();
</span><span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);
</span><span>for (var index = 0; index < count; index++) {
</span>    obj<span>.foo(1).foo(2).foo(3);
</span><span>}
</span><span>var end = new Date().getTime();
</span>
<span>var start2 = new Date().getTime();
</span><span>var obj2 = new MyClass(5);
</span><span>for (var index = 0; index < count; index++) {
</span>    obj2<span>.foo2(1);
</span>    obj2<span>.foo2(2);
</span>    obj2<span>.foo2(3);
</span><span>}
</span><span>var end2 = new Date().getTime();
</span>
<span>var div = document.getElementById("results");
</span>
div<span>.innerHTML += obj.a + ": With return this: " + (end - start) + "ms<BR>";
</span>div<span>.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";</span>

seperti yang anda dapat lihat FOO dan FOO2 melakukan perkara yang sama. Satu -satunya perbezaan ialah Foo boleh dirantai sedangkan FOO2 tidak boleh.

Jelas rantai panggilan berbeza antara:

obj<span>.foo(1).foo(2).foo(3);</span>

dan:

obj2<span>.foo2(1);
</span>obj2<span>.foo2(2);
</span>obj2<span>.foo2(3);</span>

Memandangkan kod ini, saya berlari di Chrome, Firefox dan IE untuk menentukan sama ada saya perlu bimbang tentang prestasi.

dan inilah hasil yang saya dapat:

• Di Chrome, API biasa adalah 6% lebih perlahan daripada API fasih
• Di Firefox, kedua -dua API hampir berjalan pada kelajuan yang sama (API fasih adalah 1% lebih perlahan)
• IE, kedua -dua API hampir berjalan pada kelajuan yang sama (API fasih adalah 2% lebih perlahan)

Saya menambah operasi ke dalam fungsi (math.cos) untuk mensimulasikan beberapa jenis pemprosesan yang dilakukan oleh fungsi.

Jika saya mengeluarkan segala -galanya dan simpan pernyataan kembali, pada semua pelayar tidak ada perbezaan (sebenarnya hanya satu atau dua milisaat untuk 10,000,000 percubaan). Anda boleh menguji ini untuk diri sendiri di seluruh pelayar. Dan jika anda tidak mempunyai peranti yang berguna, terdapat banyak alat percuma di Modern.ie. Hanya jangan menguji mesin maya terhadap peranti sebenar.

jadi kesimpulan saya adalah: ia pergi!

API yang fasih hebat, mereka menghasilkan lebih banyak kod yang boleh dibaca dan anda boleh menggunakannya tanpa sebarang masalah atau kerugian prestasi!

lebih banyak tangan dengan JavaScript

Ia mungkin mengejutkan anda sedikit, tetapi Microsoft mempunyai banyak pembelajaran percuma di banyak topik JavaScript sumber terbuka dan kami berada dalam misi untuk membuat lebih banyak lagi dengan Projek Spartan yang akan datang. Lihat saya sendiri:

• Pengenalan kepada WebGL 3D dan HTML5 dan Babylon.js
• membina aplikasi halaman tunggal dengan asp.net dan angularjs
• grafik canggih dalam html

atau siri pembelajaran pasukan kami:

• Petua Prestasi Praktikal Untuk menjadikan HTML/JavaScript anda lebih cepat (siri tujuh bahagian dari reka bentuk responsif ke permainan kasual kepada pengoptimuman prestasi)
• Platform Web Modern Jumpstart (asas -asas HTML, CSS, dan JS)
• Membangunkan aplikasi Windows Universal dengan HTML dan JavaScript Jumpstart (gunakan JS yang telah anda buat untuk membina aplikasi)

dan beberapa alat percuma: Komuniti Visual Studio, Percubaan Azure, dan Alat Ujian Cross-Browser untuk Mac, Linux, atau Windows.

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Kami teruja untuk berkongsi Projek Spartan dan enjin rendering baru dengan anda. Dapatkan mesin maya percuma atau ujian dari jauh pada peranti Mac, iOS, Android, atau Windows anda di Modern.ie.

soalan yang sering ditanya mengenai API yang fasih dalam JavaScript

Apakah API yang fasih dalam JavaScript? Ia melibatkan kaedah chaining bersama -sama dengan cara yang berbunyi seperti ayat atau satu siri arahan. Ini dicapai dengan memastikan setiap kaedah mengembalikan objek, yang membolehkan kaedah lain segera dipanggil dari hasil kaedah sebelumnya. API yang fasih boleh menjadikan kod anda lebih bersih dan lebih intuitif, terutamanya apabila berurusan dengan urutan panggilan fungsi yang kompleks.

Bagaimana saya membuat API yang fasih dalam javascript?

Mewujudkan API yang fasih dalam JavaScript melibatkan merancang kaedah anda untuk mengembalikan objek yang mereka miliki. Ini membolehkan anda untuk mengikat kaedah bersama. Sebagai contoh, pertimbangkan objek 'kereta' dengan kaedah 'startengine', 'mempercepatkan', dan 'berhenti'. Jika setiap kaedah ini mengembalikan 'ini' (objek kereta), anda boleh mengikat mereka bersama -sama seperti: car.startengine (). Mempercepatkan (). API API? Dengan kaedah chaining bersama -sama, anda boleh mengekspresikan operasi yang kompleks dengan cara yang berbunyi seperti ayat. Ini boleh menjadikan kod anda lebih mudah difahami dan debug. API yang fasih juga boleh menjadikan kod anda lebih ekspresif dan fleksibel, membolehkan anda membuat abstraksi yang lebih kuat. , mereka juga boleh menjadikannya lebih sukar untuk debug jika tidak digunakan dengan betul. Kerana panggilan kaedah dirantai bersama -sama, masalah dengan satu kaedah boleh menjejaskan semua kaedah berikutnya dalam rantai. Selain itu, API yang fasih kadang -kadang kurang intuitif bagi orang yang tidak biasa dengan corak. , tetapi ia boleh menjadi lebih kompleks. Anda perlu memastikan bahawa setiap kaedah dalam rantaian mengembalikan janji, membolehkan anda menggunakan '.then ()' untuk kaedah rantai bersama -sama. Sebagai alternatif, anda boleh menggunakan sintaks async/menunggu untuk menulis kod asynchronous yang kelihatan segerak, yang boleh menjadikan API fasih anda lebih mudah dibaca dan difahami.

API fasih adalah corak reka bentuk yang memberi tumpuan kepada kebolehbacaan dan ekspresi. Ia boleh dibandingkan dengan corak reka bentuk lain seperti corak pembina, yang juga bertujuan untuk menjadikan kod lebih mudah dibaca dan lebih mudah untuk bekerja. Walau bagaimanapun, sementara corak Builder memberi tumpuan kepada membina objek kompleks langkah demi langkah, API fasih memberi tumpuan kepada membuat kaedah panggilan boleh dihubungkan untuk aliran operasi yang lebih mudah dibaca. >

Ya, API fasih boleh digunakan dengan mana -mana perpustakaan atau rangka kerja JavaScript. Banyak perpustakaan dan kerangka yang popular seperti jQuery dan lodash sudah menggunakan API fasih untuk menjadikan kaedah mereka lebih mudah dibaca dan ekspresif. rumit kerana panggilan kaedah dirantai bersama -sama. Walau bagaimanapun, anda boleh menggunakan penyataan Console.log dalam kaedah anda untuk log output mereka. Di samping itu, menggunakan debugger JavaScript dapat membantu anda melangkah melalui kod anda dan melihat keadaan objek anda pada setiap langkah dalam rantai.

Bolehkah API yang fasih meningkatkan prestasi? Walau bagaimanapun, dengan menjadikan kod anda lebih mudah untuk membaca dan memahami, API yang fasih dapat membantu anda melihat dan memperbaiki masalah prestasi dengan lebih mudah. Jadilah yang sesuai untuk projek -projek di mana kebolehbacaan dan kebolehkerjaan adalah keutamaan. Walau bagaimanapun, mereka mungkin tidak sesuai untuk setiap projek. Jika pasukan anda tidak biasa dengan corak API yang fasih, mungkin mengambil sedikit masa untuk mereka membiasakannya. Di samping itu, API yang fasih boleh membuat debugging lebih sukar jika tidak digunakan dengan betul. Seperti mana -mana corak reka bentuk, penting untuk mempertimbangkan keperluan projek anda dan pasukan anda sebelum membuat keputusan untuk menggunakan API yang fasih.

Atas ialah kandungan terperinci JavaScript seperti bos: memahami API yang fasih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!