Asynchronous JavaScript    как выжить в одном потоке
Немного базового JavaScriptvar object = {}, object1 = new Object,                       // объекты    ar = [100,500], ar =...
Архитектура браузера                           ui                    browser engine                                       ...
Архитектура Node.js                    JavaScript Library         OpenSSL        c-ares           HTTP-парсер        Googl...
Общая схема работыОчередь сообщений   Event Loop   Операции "ввода/вывода"
Блокирование (blocking)var xhr = new XMLHttpRequest();xhr.open("GET", "/данные", false);xhr.onreadystatechange = function(...
Блокирование (blocking)var cx = 10, xhr = new XMLHttpRequest();xhr.open("GET", "/данные", false);xhr.onreadystatechange = ...
Блокирование (blocking)                             сервер очнулся изапрос                                                ...
Не блокирование (Non-blocking)var cx = 10, xhr = new XMLHttpRequest();xhr.open("GET", "/данные", true);xhr.onreadystatecha...
Не блокирование (Non-blocking)                                      сервер очнулся и                                получи...
Шаблоны (design patterns)CallbackEventPromiseDeferred
Callback function doSomething( callback ) {      setTimeout( callback, 1000 ); } doSomething( function(){      console.log...
Eventsfunction Events(){      this.events = {};};Events.prototype = {     on: function( event, callback ){            if (...
Eventsfunction callback() {      console.log("wow");}var events = new Events();events.on("wow", callback);// ...events.tri...
Eventsfunction doSomething(){      this.events = [success, failure];};doSomething.prototype = new Events();doSomething.pro...
Promisesfunction onPromise(){      this.isFulfilled = false;      this.isRejected = false;      this.isResolved = false;  ...
PromisespromiseXHR(GET, /данные).then( function() {       console.log("все в порядке");}, function( error ){       console...
Promises ArraypromiseXHR(GET, /одни данные).then(function(data){      console.log(данные получены, data);      var promise...
Deferredvar fn = function() {      var dfd = new Deferred(); // наш объект      var promises = [];      promises.push( asy...
WebWorkers// mastervar worker = new Worker(я.js);worker.addEventListener(message, function(e) {     console.log(Саша: + e....
Node Cluster//script.jsvar cluster = require(cluster);if (cluster.isMaster) {       // плодим воркеры       var coreCount ...
БиблиотекиQ - https://github.com/ForbesLindesay/QJSasync - https://github.com/caolan/asyncstep - https://github.com/creati...
Всем спасибо :)                  rudevich@gmail.com                  skype: arudevich
Асинхронный JavaScript
Upcoming SlideShare
Loading in …5
×

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

1,410 views
1,298 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,410
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Асинхронный 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

×