Статьи

Понимание свободно распространяемых API в JavaScript

Апрель 12, 2019

При разработке Babylon.js v2.0 (библиотека для создания 3D в сети), я недавно захотел, чтобы больше API было свободно — то есть, я хотел бы, чтобы сообщество могло легче читать, понимать и опираться на работу, проводя меньше времени в технических документах.

В этом руководстве я расскажу о свободно распространяемых API-интерфейсах: что нужно учитывать, как их писать и как влияет производительность браузера.

Что такое свободный API?

Должен ли я создавать беглые API

Свободный API , как указано в этой статье в Википедии , является реализацией объектно-ориентированного API, целью которого является предоставление более читабельного кода. JQuery — отличный пример того, что позволяет делать свободный API:

1
2
3
4
$(‘<div></div>’)
    .html(«Fluent API are cool!»)
    .addClass(«header»)
    .appendTo(«body»);

Свободный API позволяет вам связывать вызовы функций, возвращая этот объект.

Мы можем легко создать свободный API, как это:

1
2
3
4
5
6
7
8
9
var MyClass = function(a) {
    this.a = a;
}
 
MyClass.prototype.foo = function(b) {
    // Do some complex work
    this.a += Math.cos(b);
    return this;
}

Как видите, хитрость заключается в возвращении объекта this (в данном случае ссылки на текущий экземпляр), чтобы цепочка могла продолжаться.

Если вы не знаете, как работает ключевое слово «this» в JavaScript, я рекомендую прочитать эту замечательную статью Майка Веста .

Затем мы можем цепочки вызовов:

1
2
var obj = new MyClass(5);
obj.foo(1).foo(2).foo(3);

Прежде чем попытаться сделать то же самое с Babylon.js, я хотел быть уверен, что это не вызовет проблем с производительностью.

Как насчет производительности?

Итак, я сделал тест!

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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 нет.

Очевидно, что цепочка вызовов отличается между:

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

и

1
2
3
obj2.foo2(1);
obj2.foo2(2);
obj2.foo2(3);

Учитывая этот код, я запустил его в Chrome, Firefox и IE, чтобы определить, нужно ли мне беспокоиться о производительности.

Все о производительности

И вот результаты, которые я получил:

  • В Chrome обычный API работает на 6% медленнее, чем свободный API.
  • В Firefox оба API работают почти с одинаковой скоростью (свободный API на 1% медленнее).
  • В IE оба API работают почти с одинаковой скоростью (свободный API на 2% медленнее).

Дело в том, что я добавил в функцию Math.cos ( Math.cos ), чтобы имитировать какую-то обработку, выполняемую функцией.

Если я удаляю все и просто сохраняю оператор return , во всех браузерах нет разницы (на самом деле всего одна или две миллисекунды на 10 000 000 попыток). Вы можете проверить это для себя через браузеры. И если у вас нет под рукой устройств, на dev.modern.IE есть множество бесплатных инструментов . Только не тестируйте производительность виртуальной машины на реальном устройстве.

Итак, мой вывод: это пошло!

Свободный API великолепен — он генерирует более читаемый код, и вы можете использовать его без проблем или потери производительности!

Больше практического опыта с JavaScript

Это может вас немного удивить, но у Microsoft есть много бесплатных обучающих программ по многим темам JavaScript с открытым исходным кодом, и мы нацелены на создание гораздо большего с приходом Microsoft Edge . Проверьте мои собственные:

Или серия обучения нашей команды:

И некоторые бесплатные инструменты: сообщество Visual Studio , пробная версия Azure и инструменты кросс-браузерного тестирования для Mac, Linux или Windows.

Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Microsoft Edge и новым механизмом рендеринга EdgeHTML . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows @ http://dev.modern.ie/ .

42
Share: