При разработке Babylon.js v2.0 (библиотека для создания 3D в сети), я недавно захотел, чтобы больше 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 . Проверьте мои собственные:
- Введение в WebGL 3D с HTML5 и Babylon.JS
- Создание одностраничного приложения с ASP.NET и AngularJS
- Передовая графика в HTML
Или серия обучения нашей команды:
- Практические советы по повышению производительности для ускорения работы HTML / JavaScript (серия из семи частей: от адаптивного дизайна до казуальных игр и оптимизации производительности)
- Быстрый старт современной веб-платформы (основы HTML, CSS и JavaScript)
- Разработка универсального приложения для Windows с использованием HTML и JavaScript Jump Start (используйте JS, который вы уже создали, для создания приложения)
И некоторые бесплатные инструменты: сообщество Visual Studio , пробная версия Azure и инструменты кросс-браузерного тестирования для Mac, Linux или Windows.
Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Microsoft Edge и новым механизмом рендеринга EdgeHTML . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows @ http://dev.modern.ie/ .