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

Asynchronous JavaScript
как выжить в одном потоке

Немного базового JavaScript
var 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; //undefined

var 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); // >>> 5
console.log(objConstr.var2); // >>> 2

Архитектура браузера

ui

browser engine
Data Storage

rendering engine

networking JS Interpreter XML Parser Display Backend

Архитектура Node.js
JavaScript Library

OpenSSL c-ares HTTP-парсер

Google V8 libeio/iocp libev

libuv

http://pod.tst.eu/http://cvs.schmorp.de/libev/ev.pod
C/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/

Общая схема работы

Очередь сообщений Event Loop Операции "ввода/вывода"

Блокирование (blocking)

var xhr = new XMLHttpRequest();

xhr.open("GET", "/данные", false);

xhr.onreadystatechange = function(){
console.log("данные:", xhr.status);
};

xhr.send();

// немедленная блокировка, после которой в этом же фрейме Event Loop будет вызван //
onreadystatechange


var cx = 10, xhr = new XMLHttpRequest();

xhr.open("GET", "/данные", false);

console.log("данные: ", xhr.status, " значение cx: ", cx);
};

cx = 20;

xhr.send();

cx = 30;

Выведет:
данные: 200 значение cx: 20


сервер очнулся и
запрос получили ответ
ответил
ожидание ожидание
(ui заблокирован) (ui заблокирован)

Не блокирование (Non-blocking)

var cx = 10, xhr = new XMLHttpRequest();

xhr.open("GET", "/данные", true);

console.log("данные: ", xhr.status, " значение cx: ", cx);
};

cx = 20;

xhr.send();

cx = 30;

Выведет:
данные: 200 значение cx: 30
То есть onreadystatechange не будет выполняться в том же фрейме Event Loop, что и
его определение.

Не блокирование (Non-blocking)

сервер очнулся и получили ответ,
запрос
ответил вызвали callback
ожидание
но js может делать все что ожидание
хочет пока в очередном но js может делать все что
фрейме не появится хочет пока в очередном
сообщение о том что фрейме не появится
пришел ответ. сообщение о том что
ui также восприимчив к пришел ответ.
действиям пользователя ui также восприимчив к
действиям пользователя

Шаблоны (design patterns)

Callback

Event

Promise

Deferred

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 );
} );

Events
function 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;
}
};

Events
function callback() {
console.log("wow");
}

var events = new Events();

events.on("wow", callback);
// ...

events.trigger("wow");

>>> "wow"

events.off("wow", callback);
events.trigger("wow");

>>>""

Events
function 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
...

Promises

function 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

Promises

promiseXHR('GET', '/данные').then( function() {

console.log("все в порядке");

}, function( error ){

console.log("ошибочка", error);

}, function(){

console.log("процесс пошел")

} );


Promises Array

promiseXHR('GET', '/одни данные').then(function(data){

console.log('данные получены', data);

var promises = [
promiseXHR('POST', '/туда отправим', data),
promiseXHR('POST', '/сюда отправим', data)
];

when( promises, function(data){
console.log('все данные отправлены);
} );

});


Deferred
var 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( ... );

WebWorkers
// master

var 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
// когда передаем объекты, они клонируются..

Node Cluster
//script.js
var 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 умер

Библиотеки

Q - https://github.com/ForbesLindesay/QJS

async - https://github.com/caolan/async

step - https://github.com/creationix/step

taskjs - http://taskjs.com
etc.

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

Всем спасибо :)

rudevich@gmail.com
skype: arudevich

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

More Related Content

What's hot (20)

Similar to Асинхронный JavaScript (20)

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