Skip to content

Instantly share code, notes, and snippets.

@mitsuruog

mitsuruog/index.html

Last active August 29, 2015 14:16
Show Gist options
  • Save mitsuruog/6cce79aa56a4c803d473 to your computer and use it in GitHub Desktop.
Save mitsuruog/6cce79aa56a4c803d473 to your computer and use it in GitHub Desktop.
Download ZIP
RFP RxJSサンプル1 http://jsbin.com/dafolo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
// 独自のストリーム作成
Rx.Observable.create(function(subscriber) {
subscriber.onNext(42);
subscriber.onCompleted();
}).subscribe(function(n) {
console.log(n);
});
// subscribe
Rx.Observable.from([1, 2, 3])
.subscribe(function(n) {
console.log(n);
}, function(err) {
console.log('error');
}, function() {
console.log('completed');
});
// map
Rx.Observable.from([1, 2, 3])
.map(function(n){
return n * 2;
})
.subscribe(function(n) {
console.log(n);
});
// filter
Rx.Observable.from([1, 2, 3])
.filter(function(n){
return n % 2 === 1;
})
.subscribe(function(n) {
console.log(n);
});
// flatMap
var stream1 = Rx.Observable.from([10, 20, 30]);
var stream2 = function(n) {
return Rx.Observable.from([n+1, n+2, n+3]);
};
stream1.flatMap(function(n) {
return stream2(n);
}).subscribe(function(n) {
console.log(n);
});
// flatMap(API)
Rx.Observable.from(['mitsuruog'])
.flatMap(function(param) {
var url = 'https://api.github.com/users/' + param;
var promise = $.ajax(url);
return Rx.Observable.fromPromise(promise);
})
.subscribe(function(response) {
console.log(response);
});
// throttle
Rx.Observable.fromEvent(document, 'mousemove')
.throttle(250)
.subscribe(function(n) {
console.log(n);
});
// merge
var stream3 = Rx.Observable.from([1, 2, 3, 4, 5]);
var stream4 = Rx.Observable.from([10, 20, 30]);
Rx.Observable.merge(stream3, stream4)
.subscribe(function(n) {
console.log(n);
});
//combineLasted
console.log('combineLatest');
var stream5 = Rx.Observable.from([1, null, null, 2, null, 3])
.filter(function(n) {
return n !== null;
});
var stream6 = Rx.Observable.from([null, 10, 20, null, null, 30])
.filter(function(n) {
return n !== null;
});
Rx.Observable.combineLatest(stream5, stream6, function(n1, n2) {
return n1 + n2;
})
.subscribe(function(n) {
console.log(n);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"><\/script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">// 独自のストリーム作成
Rx.Observable.create(function(subscriber) {
subscriber.onNext(42);
subscriber.onCompleted();
}).subscribe(function(n) {
console.log(n);
});
// subscribe
Rx.Observable.from([1, 2, 3])
.subscribe(function(n) {
console.log(n);
}, function(err) {
console.log('error');
}, function() {
console.log('completed');
});
// map
Rx.Observable.from([1, 2, 3])
.map(function(n){
return n * 2;
})
.subscribe(function(n) {
console.log(n);
});
// filter
Rx.Observable.from([1, 2, 3])
.filter(function(n){
return n % 2 === 1;
})
.subscribe(function(n) {
console.log(n);
});
// flatMap
var stream1 = Rx.Observable.from([10, 20, 30]);
var stream2 = function(n) {
return Rx.Observable.from([n+1, n+2, n+3]);
};
stream1.flatMap(function(n) {
return stream2(n);
}).subscribe(function(n) {
console.log(n);
});
// flatMap(API)
Rx.Observable.from(['mitsuruog'])
.flatMap(function(param) {
var url = 'https://api.github.com/users/' + param;
var promise = $.ajax(url);
return Rx.Observable.fromPromise(promise);
})
.subscribe(function(response) {
console.log(response);
});
// throttle
Rx.Observable.fromEvent(document, 'mousemove')
.throttle(250)
.subscribe(function(n) {
console.log(n);
});
// merge
var stream3 = Rx.Observable.from([1, 2, 3, 4, 5]);
var stream4 = Rx.Observable.from([10, 20, 30]);
Rx.Observable.merge(stream3, stream4)
.subscribe(function(n) {
console.log(n);
});
//combineLasted
console.log('combineLatest');
var stream5 = Rx.Observable.from([1, null, null, 2, null, 3])
.filter(function(n) {
return n !== null;
});
var stream6 = Rx.Observable.from([null, 10, 20, null, null, 30])
.filter(function(n) {
return n !== null;
});
Rx.Observable.combineLatest(stream5, stream6, function(n1, n2) {
return n1 + n2;
})
.subscribe(function(n) {
console.log(n);
});</script></body>
</html>
Raw
jsbin.dafolo.js
// 独自のストリーム作成
Rx.Observable.create(function(subscriber) {
subscriber.onNext(42);
subscriber.onCompleted();
}).subscribe(function(n) {
console.log(n);
});
// subscribe
Rx.Observable.from([1, 2, 3])
.subscribe(function(n) {
console.log(n);
}, function(err) {
console.log('error');
}, function() {
console.log('completed');
});
// map
Rx.Observable.from([1, 2, 3])
.map(function(n){
return n * 2;
})
.subscribe(function(n) {
console.log(n);
});
// filter
Rx.Observable.from([1, 2, 3])
.filter(function(n){
return n % 2 === 1;
})
.subscribe(function(n) {
console.log(n);
});
// flatMap
var stream1 = Rx.Observable.from([10, 20, 30]);
var stream2 = function(n) {
return Rx.Observable.from([n+1, n+2, n+3]);
};
stream1.flatMap(function(n) {
return stream2(n);
}).subscribe(function(n) {
console.log(n);
});
// flatMap(API)
Rx.Observable.from(['mitsuruog'])
.flatMap(function(param) {
var url = 'https://api.github.com/users/' + param;
var promise = $.ajax(url);
return Rx.Observable.fromPromise(promise);
})
.subscribe(function(response) {
console.log(response);
});
// throttle
Rx.Observable.fromEvent(document, 'mousemove')
.throttle(250)
.subscribe(function(n) {
console.log(n);
});
// merge
var stream3 = Rx.Observable.from([1, 2, 3, 4, 5]);
var stream4 = Rx.Observable.from([10, 20, 30]);
Rx.Observable.merge(stream3, stream4)
.subscribe(function(n) {
console.log(n);
});
//combineLasted
console.log('combineLatest');
var stream5 = Rx.Observable.from([1, null, null, 2, null, 3])
.filter(function(n) {
return n !== null;
});
var stream6 = Rx.Observable.from([null, 10, 20, null, null, 30])
.filter(function(n) {
return n !== null;
});
Rx.Observable.combineLatest(stream5, stream6, function(n1, n2) {
return n1 + n2;
})
.subscribe(function(n) {
console.log(n);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment