Статьи

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

Январь 14, 2019

Эта статья является частью серии технологий веб-разработки от Microsoft. Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

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

fluent01 - я должен

Что делает API свободно?

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

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

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

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

 var MyClass = function(a) {
    this.a = a;
}

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

Как видите, хитрость заключается в возвращении объекта this

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

 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";

Как вы можете видеть, foofoo2 Единственная разница в том, что foofoo2

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

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

и: 

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

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

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

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

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

Я добавил операцию в функцию ( Math.cos

Если я удаляю все и просто сохраняю оператор return Вы можете проверить это для себя через браузеры. И если у вас нет удобных устройств, на современном сайте есть множество бесплатных инструментов . Только не проверяйте виртуальную машину на реальном устройстве.

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

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

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

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

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

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

Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Project Spartan и его новым механизмом рендеринга . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows на сайте modern.IE .

34
Share: