Functional JavaScript with Lo-Dash.js
3 likes2,146 views
2013/5/25に開催されたFrontrend Vol.5のFunctional JavaScript with Lo-Dash.jsのセッションの資料です。
![This is bad...
var sortedString = function(array) {
array.sort();
!
return array.join();
};
!
var array1 = [1, 6, 8, 4, 9, 0, 3, 5, 2, 7];
!
console.log(sortedString(array1));
//=>0,1,2,3,4,5,6,7,8,9
!
console.log(array1);
//=>[0,1,2,3,4,5,6,7,8,9]
//引数が変更されてしまっている…。](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-24-320.jpg)
![This is better !!!
var sortedString = function(array) {
var buffer = array.slice();
buffer.sort();
return buffer.join();
};
!
var array1 = [1, 6, 8, 4, 9, 0, 3, 5, 2, 7];
!
console.log(sortedString(array1));
//=>0,1,2,3,4,5,6,7,8,9
!
console.log(array1);
//=>[1,6,8,4,9,0,3,5,2,7]
//OK!](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-25-320.jpg)
![jQueryっぽいサンプル実装
var $ = function(selector) {
return {
list: document.querySelectorAll(selector),
each: function(callback) {
for(var i = 0, l = this.list.length;i < l;i++) {
callback(this.list[i]);
}
return this;
},
addClass: function(className) {
return this.each(function(element) {
element.classList.add(className);
});
}
};
};](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-30-320.jpg)
![Functionalに書き直す
var _ = {};
!
_.qsa = function(selector) {
return document.querySelectorAll(selector);
};
!
_.each = function(targetObject, callback) {
for(var i = 0, len = targetObject.length;i < len;i++) {
callback(targetObject[i]);
}
};
!
_.addClass = function(targetElementList, className) {
_.each(targetElementList, function(element) {
element.classList.add(className);
});
};](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-33-320.jpg)
![_.each = _.forEach = function(obj, iterator, context) {
if (obj == null) return;
if (nativeForEach && obj.forEach === nativeForEach) {
obj.forEach(iterator, context);
} else if (obj.length === +obj.length) {
for (var i = 0, l = obj.length; i < l; i++) {
if (iterator.call(context, obj[i], i, obj) ===
breaker) return;
}
} else {
for (var key in obj) {
if (_.has(obj, key)) {
if (iterator.call(context, obj[key], key,
obj) === breaker) return;
}
}
}
};](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-58-320.jpg)
![_.each = _.forEach = function(obj, iterator, context) {
if (obj == null) return;
if (nativeForEach && obj.forEach === nativeForEach) {
obj.forEach(iterator, context);
} else if (obj.length === +obj.length) {
for (var i = 0, l = obj.length; i < l; i++) {
if (iterator.call(context, obj[i], i, obj) ===
breaker) return;
}
} else {
for (var key in obj) {
if (_.has(obj, key)) {
if (iterator.call(context, obj[key], key,
obj) === breaker) return;
}
}
}
};](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-59-320.jpg)
![_.each = _.forEach = function(obj, iterator, context) {
if (obj == null) return;
if (nativeForEach && obj.forEach === nativeForEach) {
obj.forEach(iterator, context);
} else if (obj.length === +obj.length) {
for (var i = 0, l = obj.length; i < l; i++) {
if (iterator.call(context, obj[i], i, obj) ===
breaker) return;
}
} else {
for (var key in obj) {
if (_.has(obj, key)) {
if (iterator.call(context, obj[key], key,
obj) === breaker) return;
}
}
}
};
ネイティブのforEachが使える場
合はそれを実行している](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-60-320.jpg)
![function forEach(collection, callback, thisArg) {
var index = -1,
length = collection ? collection.length : 0;
callback = callback && typeof thisArg == 'undefined' ?
callback : lodash.createCallback(callback, thisArg);
if (typeof length == 'number') {
while (++index < length) {
if (callback(collection[index], index,
collection) === false) {
break;
}
}
} else {
forOwn(collection, callback);
}
return collection;
}](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-62-320.jpg)
![function forEach(collection, callback, thisArg) {
var index = -1,
length = collection ? collection.length : 0;
callback = callback && typeof thisArg == 'undefined' ?
callback : lodash.createCallback(callback, thisArg);
if (typeof length == 'number') {
while (++index < length) {
if (callback(collection[index], index,
collection) === false) {
break;
}
}
} else {
forOwn(collection, callback);
}
return collection;
}](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-63-320.jpg)
![function forEach(collection, callback, thisArg) {
var index = -1,
length = collection ? collection.length : 0;
callback = callback && typeof thisArg == 'undefined' ?
callback : lodash.createCallback(callback, thisArg);
if (typeof length == 'number') {
while (++index < length) {
if (callback(collection[index], index,
collection) === false) {
break;
}
}
} else {
forOwn(collection, callback);
}
return collection;
}
基本的にwhile文を使っている](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-64-320.jpg)
![var stooges = [
{name : 'moe', age : 40},
{name : 'larry', age : 50},
{name : 'curly', age : 60}
];
!
_.pluck(stooges, 'name');
//=> ["moe", "larry", "curly"]](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-76-320.jpg)
![_.pluck = function(obj, key) {
return _.map(obj, function(value){
return value[key];
});
};](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-77-320.jpg)
![_.compose = function(/*, funs */) {
var functions = arguments;
return function() {
var args = arguments;
for (var i = functions.length - 1; i >= 0; i--) {
args = [functions[i].apply(this, args)];
}
return args[0];
};
};](https://image.slidesharecdn.com/functional-javascript-140513214923-phpapp01/85/Functional-JavaScript-with-Lo-Dash-js-79-320.jpg)
Functional JavaScript with Lo-Dash.js
- 2. Functional JavaScript with Lo-Dash.js Frontrend Vol.5 泉水翔吾 / @1000ch CyberAgent, Inc.
- 4. Output ! http://1000ch.net " @1000ch # http://github.com/1000ch # http://github.com/enja-oss
- 5. Agenda ! Object-Oriented & Functional ! Underscore.js & Lo-Dash.js ! Conclusion!
- 8. Functional Programming ! 『数学的な関数の評価を行い、状態やデータの変 更を行わないプログラミングパラダイム』 via Wikipedia ! 関数型と言われてもイメージしにくい…。
- 9. 押し寄せるFunctional ! HaskellとかClojureとか。 ! TwitterはScalaを採用。 ! JavaScriptもFunctional？
- 12. Object-Oriented Programming ! 『オブジェクト同士の相互作用として、システム の振る舞いを捉える考え方』 via Wikipedia ! つまり『プログラムで実現したいモデルを抽象化 したもの』である。
- 13. OOPの例えば…
- 14. 猫をOOPで表現する var Animal = function(word) { this.word = word; }; Animal.prototype.cry = function() { console.log(this.word); }; ! var Cat = function() { Animal.call(this, "Nya-"); }; Cat.prototype = Object.create(Animal.prototype); Cat.prototype.constructor = Animal; ! new Cat().cry(); //=>Nya-
- 15. jQueryもOOP? var $headline = $(".headline"); $headline.css({ "font-size": "24px" }); var $paragraph = $("p"); $paragraph.css({ "background": "#000", "color": "#fff" }).addClass("breakAll"); ! var $button = $("button"); $button.on("click", function() { console.log("button is clicked!"); });
- 16. オブジェクト指向の問題点
- 17. ! オブジェクト同士の関係が密になりがち ! 役割が大きくなりすぎてクラスが複雑になりがち ! 継承されすぎて変更できなくなりがち OOPが抱えがちな問題
- 18. œš‘“›⁸コードの役割分担が複雑で、コードの 役割が密接な関係を持っていると テストを行うことが難しくなる。’”⁹ - @cssradar at Frontrend Vol.4 https://speakerdeck.com/studiomohawk/testable-javascript
- 22. Funtional Function ! 引数が同じであれば出力も同じである ! 果たす役割が簡潔で分割されていること
- 23. Funtional Function ! 引数が同じであれば出力も同じである ! 果たす役割が簡潔で分割されていること
- 24. This is bad... var sortedString = function(array) { array.sort(); ! return array.join(); }; ! var array1 = [1, 6, 8, 4, 9, 0, 3, 5, 2, 7]; ! console.log(sortedString(array1)); //=>0,1,2,3,4,5,6,7,8,9 ! console.log(array1); //=>[0,1,2,3,4,5,6,7,8,9] //引数が変更されてしまっている…。
- 25. This is better !!! var sortedString = function(array) { var buffer = array.slice(); buffer.sort(); return buffer.join(); }; ! var array1 = [1, 6, 8, 4, 9, 0, 3, 5, 2, 7]; ! console.log(sortedString(array1)); //=>0,1,2,3,4,5,6,7,8,9 ! console.log(array1); //=>[1,6,8,4,9,0,3,5,2,7] //OK!
- 26. Funtional Function ! 引数が同じであれば出力も同じである ! 果たす役割が簡潔で分割されていること
- 27. This is bad... var setElement = function() { $(".hoge").addClass("decorationClass").animate({...}); }; var initMainPage = function() { window.scrollTo(1, 0); setElement(); }; window.onload = function() { initMainPage(); };
- 28. This is better !!! var setElement = function(element) { $(element).addClass("decorationClass").animate({...}); }; var hideAddressBar = function() { window.scrollTo(1, 0); }; window.onload = function() { hideAddressBar(); setElement(document.getElementsByClassName(".hoge")); };
- 30. jQueryっぽいサンプル実装 var $ = function(selector) { return { list: document.querySelectorAll(selector), each: function(callback) { for(var i = 0, l = this.list.length;i < l;i++) { callback(this.list[i]); } return this; }, addClass: function(className) { return this.each(function(element) { element.classList.add(className); }); } }; };
- 32. この実装の問題点 ! each()もaddClass()もコンストラクタの querySelectorAllに依存している。 ! 再利用出来ない。 ! クラスを拡張するたびにテストの見直し。
- 33. Functionalに書き直す var _ = {}; ! _.qsa = function(selector) { return document.querySelectorAll(selector); }; ! _.each = function(targetObject, callback) { for(var i = 0, len = targetObject.length;i < len;i++) { callback(targetObject[i]); } }; ! _.addClass = function(targetElementList, className) { _.each(targetElementList, function(element) { element.classList.add(className); }); };
- 34. 使い方イメージ //CSSセレクタを渡し、要素を選択する。 var elementList = _.qsa(".parentClass .childClass"); ! ! //取得した要素にクラスを追加する。 _.addClass(elementList, "hoge");
- 50. - John-David Dalton at StackOverflow œš‘“›⁸better overall performance and optimizations for large arrays/object iteration, and more flexibility with custom builds and template pre- compilation utilities.’”⁹ http://stackoverflow.com/questions/13789618/differences-between- lodash-and-underscore
- 52. ! 実行パフォーマンスが良い ! 問題が色々解決されています ! カスタムビルドできます ! Underscore.jsに互換性あります
- 54. Compare Performance(1) Underscore#forEach Native#forEach Lo-Dash#forEach with bind Lo-Dash#forEach Native#for 0 1250000 2500000 3750000 5000000
- 58. _.each = _.forEach = function(obj, iterator, context) { if (obj == null) return; if (nativeForEach && obj.forEach === nativeForEach) { obj.forEach(iterator, context); } else if (obj.length === +obj.length) { for (var i = 0, l = obj.length; i < l; i++) { if (iterator.call(context, obj[i], i, obj) === breaker) return; } } else { for (var key in obj) { if (_.has(obj, key)) { if (iterator.call(context, obj[key], key, obj) === breaker) return; } } } };
- 59. _.each = _.forEach = function(obj, iterator, context) { if (obj == null) return; if (nativeForEach && obj.forEach === nativeForEach) { obj.forEach(iterator, context); } else if (obj.length === +obj.length) { for (var i = 0, l = obj.length; i < l; i++) { if (iterator.call(context, obj[i], i, obj) === breaker) return; } } else { for (var key in obj) { if (_.has(obj, key)) { if (iterator.call(context, obj[key], key, obj) === breaker) return; } } } };
- 60. _.each = _.forEach = function(obj, iterator, context) { if (obj == null) return; if (nativeForEach && obj.forEach === nativeForEach) { obj.forEach(iterator, context); } else if (obj.length === +obj.length) { for (var i = 0, l = obj.length; i < l; i++) { if (iterator.call(context, obj[i], i, obj) === breaker) return; } } else { for (var key in obj) { if (_.has(obj, key)) { if (iterator.call(context, obj[key], key, obj) === breaker) return; } } } }; ネイティブのforEachが使える場 合はそれを実行している
- 62. function forEach(collection, callback, thisArg) { var index = -1, length = collection ? collection.length : 0; callback = callback && typeof thisArg == 'undefined' ? callback : lodash.createCallback(callback, thisArg); if (typeof length == 'number') { while (++index < length) { if (callback(collection[index], index, collection) === false) { break; } } } else { forOwn(collection, callback); } return collection; }
- 63. function forEach(collection, callback, thisArg) { var index = -1, length = collection ? collection.length : 0; callback = callback && typeof thisArg == 'undefined' ? callback : lodash.createCallback(callback, thisArg); if (typeof length == 'number') { while (++index < length) { if (callback(collection[index], index, collection) === false) { break; } } } else { forOwn(collection, callback); } return collection; }
- 64. function forEach(collection, callback, thisArg) { var index = -1, length = collection ? collection.length : 0; callback = callback && typeof thisArg == 'undefined' ? callback : lodash.createCallback(callback, thisArg); if (typeof length == 'number') { while (++index < length) { if (callback(collection[index], index, collection) === false) { break; } } } else { forOwn(collection, callback); } return collection; } 基本的にwhile文を使っている
- 65. Compare Performance(2) Underscore#forEach Array Underscore#forEach Object Lo-Dash#forEach Object Lo-Dash#forEach Array 0 550000 1100000 1650000 2200000
- 66. Compare Performance(2) Underscore#forEach Array Underscore#forEach Object Lo-Dash#forEach Object Lo-Dash#forEach Array 0 550000 1100000 1650000 2200000 for文とArray.forEachの 差が出てる
- 67. Compare Performance(2) Underscore#forEach Array Underscore#forEach Object Lo-Dash#forEach Object Lo-Dash#forEach Array 0 550000 1100000 1650000 2200000 while文なのでほとんど 差が出ていない
- 69. Modern build モダンブラウザ向けのビルド。 Legacy build レガシーブラウザ対応がなされている。 Mobile build 関数のコンパイルがされていない Strict build 読み取り専用プロパティを上書きしよう としたときにエラーを投げる。 Underscore build Underscore.jsにAPIを合わせてある。 Backbone build Backbone.jsに必要なAPIのみ備える。
- 70. Modern build モダンブラウザ向けのビルド。 Legacy build レガシーブラウザ対応がなされている。 Mobile build 関数のコンパイルがされていない Strict build 読み取り専用プロパティを上書きしよう としたときにエラーを投げる。 Underscore build Underscore.jsにAPIを合わせてある。 Backbone build Backbone.jsに必要なAPIのみ備える。
- 71. Compare File Size lodash.min.js lodash.underscore.min.js underscore.min.js 0 5500 11000 16500 22000 compressed gzipped
- 72. Compare File Size lodash.min.js lodash.underscore.min.js underscore.min.js 0 5500 11000 16500 22000 compressed gzipped gzipすればさほど変わらな い！（7,701bytes）
- 76. var stooges = [ {name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60} ]; ! _.pluck(stooges, 'name'); //=> ["moe", "larry", "curly"]
- 77. _.pluck = function(obj, key) { return _.map(obj, function(value){ return value[key]; }); };
- 78. …美しい。
- 79. _.compose = function(/*, funs */) { var functions = arguments; return function() { var args = arguments; for (var i = functions.length - 1; i >= 0; i--) { args = [functions[i].apply(this, args)]; } return args[0]; }; };
- 80. var plusFive = function(num) { return num + 5; }; var multiplyThree = function(num) { return num * 3; }; var plus5_multiply3 = _.compose(multiplyThree, plusFive); plus5_multiply3(4); //=>27
- 83. _.pipeline = function(/*, funs */){ var functions = arguments; ! return function(seed) { return _.reduce(functions, function(l, r) { return r(l); }, seed); }; };
- 84. var plusFive = function(num) { return num + 5; }; var multiplyThree = function(num) { return num * 3; }; var multiply3_plus5 = _.pipeline(multiplyThree, plusFive); multiply3_plus5(4); //=>17
- 86. function square(x) { return x * x; } function inc(x) { return x + 1; } function isEven(x) { return x % 2 === 0; } ! var result = _.chain(array) .map(square).map(inc) .filter(isEven).take(5).value(); ! var result = Lazy(array) .map(square).map(inc) .filter(isEven).take(5);
- 92. 特徴 ! 要素選択API ! イベントのバインドAPI ! CSSクラスの付け外しAPI ! 軽い(minifiedで3KBくらい)
- 93. Conclusion !