Динамични JavaScript АPI-та

Докато разработвах библиотеката за визуализация на триизмерни примитиви Babylon.js v2.0 се замислих над въпроса, че по голяма част от API -та трябва да бъдат динамични и лесни за четене и разбиране. Иска ми се да отделяме повече време в създаването на приложения отколкото в четене на техническа документация.

В този урок ще разгледаме начини за създаване на динамично и преизползваемо API

Какво значи динамично API ?

Както е дефинирано в Wikipedia това е имплементация на API която има за цел да предостави програмните интерфейски по начин-който е по-четим за разработчика. JQuery предоставя подобно API,

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

със своята възможност за последователно навързване на отделните методи. Всеки един от тях връща инстанция на jQuery обекта.

Използвайки примера можем лесно да създадем 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 като по този начин позволяваме следващият метод да ползва референция към текущият обект.

Ако не сте запознати с ключовата дума this в езика JavaScript, силно ви препоръчвам статията на Mайк Уест

Вече можете да навързвате методите последователно

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 методите, които се ползват по стандартен начин са 6% по-бавни от тези, които ползваме с навързване.
• При тестовете под Firefox методите, които се ползват по стандартен начин са 1% по-бързи от тези, които ползваме с навързване.
• При тестовете под IE методите, които се ползват по стандартен начин са 2% по-бързи от тези, които ползваме с навързване.

За целите на тестовете ми, добавих допълнителна логика във функцията Math.cos за да симулирам операциите който се извършват в рамките на тестваните методи

Ако премахна цялата функционалност от тялото на метода, и запазя само и единствено return израза производителността ще се запази напълно еднаква между отделните браузъри Може да проведете собствени тестове, за да проверите резултата. Ако нямате, подходящите устройства под ръка можете да ползвате безплатните инструменти, които се предоставят от free tools on dev.modern.IE. Но не сравнявайте тестове, които сте правили на виртуална машина с тези на реално устройство.

 Извода ми е че подхода е напълно адекватен, с оглед на резултатите.

Динамичният подход, за организиране на API- та е чудесен начин за продуциране на четим и добре оптимизиран код.

Още примери с JavaScript

Може да се изненадате но Microsoft предоставя набор от безплатни JavaScript ресурси с отворен код, касаещи тематиката. Очакваме още много такива с предстоящото пускане на Microsoft Edge. Може да разгледате някой от моите ресурси:

• Въведение в WebGL 3D с помощта на HTML5 и Babylon.JS
• Създаване на SPA приложения с ASP.NET и AngularJS
• Графика от ново поколения само с помощта на HTML

Някой от материалите разработени от нашият екип :

• Практически съвети, как да направим JavaScript приложенията си по-бързи ( серия от седем урока която предоставя практически знания )
• Модерният Web ( основи на HTML, CSS и JavaScript )
• Разработка на Universal Windows приложения с помощта на HTML и JavaScript ( използвайте JS за да създавате desktop приложения)

Представям ви списък с безплатни инструменти, които можете да ползвате за разработка :  Visual Studio Community, Azure Trial

Тази статия е част от серия уроци предоставени от Microsoft. Развълнувани сме де споделим с вас Microsoft Edge както и новият му render engine Тествайте вашите приложения на различни операционни системи @ http://dev.modern.ie/.