JavaScript: Menguasai Seni API Fasih

Semasa mereka bentuk Babylon.js v2.0 (a perpustakaan untuk membina 3D di web), saya baru-baru ini mendapati diri saya mengharapkan lebih banyak lagi APInya licin - yang mengatakan, saya mahu ia lebih mudah untuk dibaca oleh masyarakat, Fahami dan bina pada kerja anda sambil menghabiskan lebih sedikit masa untuk dokumentasi teknikal.

Dalam tutorial ini, saya akan membincangkan API yang fasih: perkara yang perlu dipertimbangkan, caranya Menulisnya dan kesan prestasi merentas penyemak imbas.

Apakah itu Fluent API?

API yang lancar, seperti yang diterangkan dalam artikel Wikipedia ini, adalah API berorientasikan objek direka untuk menyediakan kod yang lebih mudah dibaca. JQuery ialah contoh hebat tentang apa yang membolehkan anda lakukan API yang lancar:

 $('<div></div>')

     .html("Fluent API are cool!")

     .addClass("header")

     .appendTo("body");

Smooth API membolehkan anda memaut Fungsi dipanggil dengan mengembalikan objek ini.

Kami boleh menciptanya dengan mudah API fasih seperti ini:

var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}

Seperti yang anda lihat, silap mata Hanya mengembalikan objek this (merujuk contoh semasa dalam kes ini) untuk membenarkan rantaian diteruskan. this 对象（引用当前实例 在本例中）以允许链继续。

如果您不知道 “this”关键字在 JavaScript 中的工作原理，我建议阅读这篇很棒的文章 文章作者：迈克·韦斯特。

然后我们可以链式调用：

var obj = new MyClass(5);

obj.foo(1).foo(2).foo(3);

在尝试执行以下操作之前 与 Babylon.js 相同，我想确保这不会生成一些 性能问题。

性能怎么样？

所以我做了一个基准测试！

var count = 10000000;



var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}



MyClass.prototype.foo2 = function (b) {

    // Do some complex work   

    this.a += Math.cos(b);

}



var start = new Date().getTime();

var obj = new MyClass(5);

obj.foo(1).foo(2).foo(3);

for (var index = 0; index < count; index++) {

    obj.foo(1).foo(2).foo(3);

}

var end = new Date().getTime();



var start2 = new Date().getTime();

var obj2 = new MyClass(5);

for (var index = 0; index < count; index++) {

    obj2.foo2(1);

    obj2.foo2(2);

    obj2.foo2(3);

}

var end2 = new Date().getTime();



var div = document.getElementById("results");



div.innerHTML += obj.a + ": With return this: " + (end - start) + "ms<BR>";

div.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";

作为 您可以看到，foo 和 foo2 执行完全相同的操作。唯一的 区别在于 foo 可以链接，而 foo2 则不能。

显然是调用链 之间的不同之处在于：

obj.foo(1).foo(2).foo(3);

和

obj2.foo2(1);

obj2.foo2(2);

obj2.foo2(3);

鉴于此代码，我运行了它 在 Chrome、Firefox 和 IE 上确定我是否需要关注 性能。

这是结果 我得到：

• 在 Chrome 上，常规 API 比 Fluent API 慢 6%。
• 在 Firefox 上， 两个 API 的运行速度几乎相同（Fluent API 慢 1%）。
• 在IE上， 两个 API 的运行速度几乎相同（Fluent API 慢 2%）。

问题是我在函数 (Math.cos) 中添加了一个操作 模拟函数所做的某种处理。

如果我删除所有内容 只需保留 return

Jika anda tidak tahu Bagaimana kata kunci "ini" berfungsi dalam JavaScript, saya syorkan membaca artikel hebat ini Artikel yang ditulis oleh:Mike West.

Kemudian kita boleh membuat panggilan berantai:

rrreee

Sebelum cuba lakukan perkara berikut Sama seperti Babylon.js, saya ingin memastikan ini tidak menjana beberapa Isu prestasi.

Bagaimana prestasinya?

Jadi saya melakukan ujian penanda aras! rrreee

sebagai Anda boleh melihat bahawa foo dan foo2 melakukan perkara yang sama. sahaja Perbezaannya ialah foo boleh dipautkan, tetapi foo2 tidak boleh.

Jelas sekali rantai panggilan Perbezaannya ialah:

rrreee
• dan
rrreee
• Memandangkan kod ini, saya menjalankannya Ketahui sama ada saya mengambil berat tentang Chrome, Firefox dan IE prestasi.
• 

Inilah hasilnya Saya dapat:

Pada
• Chrome
, API biasa adalah
• 6%
lebih perlahan daripada API Fasih.
Dihidupkan

Firefox

, Kedua-dua API berjalan hampir sama (Fluent API lebih perlahan

1%

). Hidup IE, Kedua-dua API berjalan hampir sama (Fluent API adalah 2% lebih perlahan). Masalahnya ialah saya menambah operasi dalam fungsi (Math.cos) Mensimulasikan beberapa jenis pemprosesan yang dilakukan oleh fungsi. Jika saya memadamkan semuanya Hanya simpan kenyataan return, ia tidak berfungsi pada semua penyemak imbas Perbezaannya (sebenarnya hanya satu hingga dua milisaat melebihi 10,000,000 percubaan). awak Anda boleh mengujinya sendiri merentas pelayar. jika anda tidak mempunyai Peranti ini mudah dan terdapat banyak alat percuma di dev.modern.IE. Cuma jangan lakukan ujian prestasi pada mesin maya Untuk peranti sebenar. Jadi kesimpulan saya ialah: ayuh!

🎜 🎜API yang fasih hebat - ia menghasilkan lebih banyak kod yang boleh dibaca dan anda boleh menggunakannya tanpa sebarang masalah atau kehilangan prestasi! 🎜 🎜🎜Perbanyakkan amalan JavaScript🎜🎜 🎜Ini mungkin agak mengejutkan anda, tetapi Microsoft Terdapat banyak kandungan pembelajaran percuma pada banyak topik JavaScript sumber terbuka, dan kami begitu Dengan ketibaan Microsoft Edge, misi kami adalah untuk mencipta lebih banyak lagi. Semak sendiri: 🎜 🎜 🎜Pengenalan kepada 3D menggunakan HTML5 dan WebGL Babylon.JS🎜 🎜Bina aplikasi satu halaman menggunakan arahan berikut ASP.NET dan AngularJS🎜 🎜Grafik canggih dalam HTML🎜 🎜 🎜Atau siri pembelajaran pasukan kami: 🎜 🎜 🎜 Petua prestasi praktikal untuk membuat anda HTML/JavaScript Faster (siri tujuh bahagian daripada reka bentuk responsif kepada Permainan kasual kepada pengoptimuman prestasi)🎜 🎜 Mula Pantas dengan Platform Rangkaian Moden (Asas HTML, CSS dan JavaScript) 🎜 🎜 Membangunkan aplikasi Windows universal HTML dan JavaScript Jump Start (menggunakan JS yang telah anda buat Bina aplikasi) 🎜 🎜 🎜 Ditambah beberapa alatan percuma: Komuniti Visual Studio, Percubaan Azure dan alat ujian merentas penyemak imbas untuk Mac, Linux atau Windows Windows. 🎜 🎜🎜Artikel ini adalah sebahagian daripada Teknologi Pembangunan Web Siri daripada Microsoft. Kami teruja untuk berkongsi dengan anda 🎜🎜Microsoft Edge🎜🎜 dan enjin rendering 🎜🎜EdgeHTML baharu🎜🎜 baharu. percuma Mesin maya atau ujian jauh pada peranti Mac, iOS, Android atau Windows @🎜🎜http://dev.modern.ie/🎜🎜. 🎜🎜

Atas ialah kandungan terperinci JavaScript: Menguasai Seni API Fasih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!