Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Асинхронный JavaScript

1,532 views

Published on

Published in: Education
  • Be the first to comment

Асинхронный JavaScript

  1. 1. Asynchronous JavaScript как выжить в одном потоке
  2. 2. Немного базового JavaScriptvar object = {}, object1 = new Object, // объекты ar = [100,500], ar = new Array, //массивы func = function(){}, // функции Constr1 = function(name){ this.var1 = name; this.var3 = 5; }, //функции-конструторы date = new Date(), // дата num = 5, num2 = new Number, // число bool = new Boolean, bool2 = true, // логика str = new String, str2 = hello, // строка foo; //undefinedvar Constr2 = function(){ this.var2 = 2; this.var3 = 3; this.do = function(){ console.log(this.var1); };};Constr2.prototype = { do2: function(){ console.log(Constr1 + this.var1); }};Constr1.prototype = new Constr2;var objConstr = new Constr1(obj),objConstr1 = new Constr1(obj1);console.log(objConstr.do()); // >>> "obj";console.log(objConstr1.do()); // >>> "obj1";console.log(objConstr1.do2()); // >>> "Constr1 obj1";console.log(objConstr.var3); // >>> 5console.log(objConstr.var2); // >>> 2
  3. 3. Архитектура браузера ui browser engine Data Storage rendering engine networking JS Interpreter XML Parser Display Backend
  4. 4. Архитектура Node.js JavaScript Library OpenSSL c-ares HTTP-парсер Google V8 libeio/iocp libev libuv http://pod.tst.eu/http://cvs.schmorp.de/libev/ev.podC/C++ http://pod.tst.eu/http://cvs.schmorp.de/libeio/eio.pod https://github.com/joyent/libuv http://c-ares.haxx.se/ http://www.yuiblog.com/blog/2010/05/20/video-dahl/
  5. 5. Общая схема работыОчередь сообщений Event Loop Операции "ввода/вывода"
  6. 6. Блокирование (blocking)var xhr = new XMLHttpRequest();xhr.open("GET", "/данные", false);xhr.onreadystatechange = function(){ console.log("данные:", xhr.status);};xhr.send();// немедленная блокировка, после которой в этом же фрейме Event Loop будет вызван //onreadystatechange
  7. 7. Блокирование (blocking)var cx = 10, xhr = new XMLHttpRequest();xhr.open("GET", "/данные", false);xhr.onreadystatechange = function(){ console.log("данные: ", xhr.status, " значение cx: ", cx);};cx = 20;xhr.send();cx = 30;Выведет:данные: 200 значение cx: 20
  8. 8. Блокирование (blocking) сервер очнулся изапрос получили ответ ответил ожидание ожидание (ui заблокирован) (ui заблокирован)
  9. 9. Не блокирование (Non-blocking)var cx = 10, xhr = new XMLHttpRequest();xhr.open("GET", "/данные", true);xhr.onreadystatechange = function(){ console.log("данные: ", xhr.status, " значение cx: ", cx);};cx = 20;xhr.send();cx = 30;Выведет:данные: 200 значение cx: 30То есть onreadystatechange не будет выполняться в том же фрейме Event Loop, что иего определение.
  10. 10. Не блокирование (Non-blocking) сервер очнулся и получили ответ,запрос ответил вызвали callback ожидание но js может делать все что ожидание хочет пока в очередном но js может делать все что фрейме не появится хочет пока в очередном сообщение о том что фрейме не появится пришел ответ. сообщение о том что ui также восприимчив к пришел ответ. действиям пользователя ui также восприимчив к действиям пользователя
  11. 11. Шаблоны (design patterns)CallbackEventPromiseDeferred
  12. 12. Callback function doSomething( callback ) { setTimeout( callback, 1000 ); } doSomething( function(){ console.log( "something" ); } ); function doSomething( msg, callback ) { setTimeout( function(){ callback(msg); }, 1000 ); }; doSomething( "anything", function(msg){ console.log( msg ); } );
  13. 13. Eventsfunction Events(){ this.events = {};};Events.prototype = { on: function( event, callback ){ if ( this.events[event] ) this.events[event].push( callback ); else this.events[event] = [callback]; return this; }, off: function( event, callback ){ if ( this.events[event] && this.events[event].indexOf(callback) != -1 ) { this.events[event].splice( this.events[event].indexOf( callback ) ); } return this; }, trigger: function( event ){ if (this.events[event]) this.events[event].forEach(function( item){ item(); }); return this; }};
  14. 14. Eventsfunction callback() { console.log("wow");}var events = new Events();events.on("wow", callback);// ...events.trigger("wow");>>> "wow"events.off("wow", callback);events.trigger("wow");>>>""
  15. 15. Eventsfunction doSomething(){ this.events = [success, failure];};doSomething.prototype = new Events();doSomething.prototype.start = function(){ var that = this; setInterval( function(){ that.trigger(that.events[ Math.round(Math.random()) ]); }, 2000 );}var process = new doSomething;process.on("success", function(){ console.log("success");}).on("failure", function(){ console.log("failure");});process.start();>>>success>>>success>>>failure>>>failure>>>success...
  16. 16. Promisesfunction onPromise(){ this.isFulfilled = false; this.isRejected = false; this.isResolved = false; this.result = null;}Promise.prototype={ then: function( fulfilled, rejected, progressed ){ ... }}// обещанное событие, обещанный триггер// меняет свое состояние только один раз// в отличие от событий, которые могут повторяться http://wiki.commonjs.org/wiki/Promises/A
  17. 17. PromisespromiseXHR(GET, /данные).then( function() { console.log("все в порядке");}, function( error ){ console.log("ошибочка", error);}, function(){ console.log("процесс пошел")} ); http://wiki.commonjs.org/wiki/Promises/A
  18. 18. Promises ArraypromiseXHR(GET, /одни данные).then(function(data){ console.log(данные получены, data); var promises = [ promiseXHR(POST, /туда отправим, data), promiseXHR(POST, /сюда отправим, data) ]; when( promises, function(data){ console.log(все данные отправлены); } );}); http://wiki.commonjs.org/wiki/Promises/A
  19. 19. Deferredvar fn = function() { var dfd = new Deferred(); // наш объект var promises = []; promises.push( async1() ); // асинхронная операция раз promises.push( async2() ); // асинхронная операция два promises.push( sync1() ); // синхронная операция раз promises.push( async3() ); // асинхронная операция три // хотим сделать что-нибудь когда они закончатся when(promises).done(function() { dfd.resolve(true); }).fail(function(err) { dfd.reject(err); }); return dfd.promise();};var promise = fn();promise.then( ... );
  20. 20. WebWorkers// mastervar worker = new Worker(я.js);worker.addEventListener(message, function(e) { console.log(Саша: + e.data);});worker.postMessage( апельсины );worker.postMessage( мандарины );// worker (я.js)self.addEventListener(message, function(e) { self.postMessage(Я люблю + e.data + !!!);});// используем для длительных вычислений// когда они не трогают DOM// например переводим книги :)// часть HTML5// когда передаем объекты, они клонируются..
  21. 21. Node Cluster//script.jsvar cluster = require(cluster);if (cluster.isMaster) { // плодим воркеры var coreCount = require(os).cpus().length; for (var i = 0; i < coreCount; i++) { cluster.fork(); } // слушаем смерть.. cluster.on(death, function(worker) { console.log(Воркер + worker.pid + умер); });} else { // умираем если мы воркер process.exit();}>>> node script.jsВоркер 14230 умерВоркер 14232 умерВоркер 14229 умерВоркер 14221 умер
  22. 22. БиблиотекиQ - https://github.com/ForbesLindesay/QJSasync - https://github.com/caolan/asyncstep - https://github.com/creationix/steptaskjs - http://taskjs.cometc.
  23. 23. Всем спасибо :) rudevich@gmail.com skype: arudevich

×