JavaScript
で作る
Web Application
@ww24
でも使える
非同期
フロー制御
ライブラリ
Async Flow
# 自己紹介
NAME: 中川 武憲 @ww24
AGE: 0x13
JOB: 大学生
アルバイト
LANGUAGE: JavaScript
IL たん
IT 勉強会カレンダー for Smartphone
JavaScript 書いてる人 ノ
( ´ ▽ ` )ノ ( ´ ω ` )ノ ( ´ ∀ ` )ノ
Browser サイドの人
( ´ ▽ ` )ノ
- IE 対応つらい…
- Opera が WebKit になると聞いて安堵してる
- IE の次に強敵… スマホブラウザ
- etc...
Server サイドの人
( ´ ω ` )ノ
- Node.js
- Rhino
- Phantom.js
- etc...
その他の人
( ´ ∀ ` )ノ
- Titanium mobile
- Phone Gap
- Web View
- Browser Extension
- etc...
JavaScript で非同期処理
JavaScript で非同期処理
var fs = require("fs"),
path = require("path");
var dirpath = __dirname,
count = 0;
fs.readdir(dirpath, function (err, files) {
files.forEach(function (file) {
var filepath = path.join(dirpath, file);
fs.stat(filepath, function (err, stats) {
if (stats.isFile()) {
count++;
fs.readFile(filepath, function (err, data) {
var copypath = path.join(dirpath, "copy-" + path.basename(filepath));
fs.writeFile(copypath, data, function () {
if (--count === 0) {
console.log("complete");
}
});
});
}
});
});
});コールバック地獄
インデント
インデント
インデント
インデント
インデント
インデント
インデント
インデ
どうすれば良いか
インデントを入れない
var fs = require("fs"),
path = require("path");
var dirpath = __dirname,
count = 0;
fs.readdir(dirpath, function (err, files) {
files.forEach(function (file) {
var filepath = path.join(dirpath, file);
fs.stat(filepath, function (err, stats) {
if (stats.isFile()) {
count++;
fs.readFile(filepath, function (err, data) {
var copypath = path.join(dirpath, "copy-" + path.basename(filepath));
fs.writeFile(copypath, data, function () {
if (--count === 0) {
console.log("complete");
}
});
});
}
});
});
});(ヾﾉ･∀･`)ﾅｲﾅｲ
ライブラリを使う
ライブラリ
- async.js
- $.Deferred
- etc...
async.js
async.waterfall([
function(callback){
callback(null, 'one', 'two');
},
function(arg1, arg2, callback){
callback(null, 'three');
},
function(arg1, callback){
// arg1 now equals 'three'
callback(null, 'done');
}
], function (err, result) {
// result now equals 'done'
});
async.js
async.parallel([
function(callback){
setTimeout(function(){
callback(null, 'one');
}, 200);
},
function(callback){
setTimeout(function(){
callback(null, 'two');
}, 100);
}
],
// optional callback
function(err, results){
// the results array will equal ['one','two'] even though
// the second function had a shorter timeout.
});
Async Flow
flow.create().flow(function (next) {
next("one", "two");
}).flow(function (next, arg1, arg2) {
next("three");
}).flow(function (next, arg1) {
// arg1 === "three" => true
next("done");
}).flow(function (next, results) {
// results === "done" => true
});
sequential
Async Flow
var flowA = flow.create().flow(function (next) {
setTimeout(function () {
next(null, "one");
}, 200);
});
var flowB = flow.create().flow(function (next) {
setTimeout(function () {
next(null, "two");
}, 100);
});
flow.create(flowA, flowB).flow(function (next, arg1, arg2) {
// arg1 === "one" => true
// arg2 === "two" => true
});
parallel
簡単に非同期フローを操る。
ご清聴ありがとうございました
Async Flow： https://github.com/ww24/async-flow
js web application
By ww24
