This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Bulgarian (Български) translation by Mihail Petrov (you can also view the original English article)
Докато разработвах библиотеката за визуализация на триизмерни примитиви 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/.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post