Contenu connexe Similaire à Functional programming using underscorejs (20) Functional programming using underscorejs3. me
• PhD Candidate
• Front End Engineer
• On the way learning good from functional
programming languages
4. Function of
Functional Language
• Pure function
• First class citizen
• Higher order function
• ...
6. First Class Citizen
• Function like variable
• ex: function expression
var f = function () { /*...*/ };
9. Take a Look
Examples from ‘Pure, functional JavaScript’
http://cjohansen.no/talks/2012/sdc-functional/
10. [
{
name: 'Gates',
gender: 'M',
org: 'M$'
},
{
name: 'Peter'
gender: 'M',
org: 'Hㄒㄈ'
}
]
12. var str = "Mentioned by ";
for (var i = 0, l = tweeps.length; i < l; ++i) {
str += tweeps[i].name;
if (i < tweeps.length - 1) { str += ", "; }
}
13. [
{
name: 'Gates',
gender: 'M',
org: 'M$'
},
{
name: 'Peter'
gender: 'M',
org: 'Hㄒㄈ'
}
]
15. var names = [];
for (var i = 0, l = tweeps.length; i < l; ++i) {
names.push(tweeps[i].name);
}
16. var str = "Mentioned by " + names.join(", ");
17. var names = tweeps.map(function (tweep) {
return tweep.name;
});
18. var names = tweeps.map(function (t) { return t.name; });
19. var str = "Mentioned by " + tweeps.map(function (t) {
return t.name;
}).join(", ");
21. var str = "Mentioned by " + tweeps.map(prop("name")).join(", ");
23. [
{
getSummary: function () {
return {
text: 'Summaries',
html: '<p>Summaries</p>'
};
}
},
{
getSummary: function () {
return {text: 'Summaried'};
}
},
...
]
25. buildSummary: function () {
var div = document.createElement("div"), p;
for (var i = 0, l = this.components.length; i < l; ++i) {
p = document.createElement("p");
p.innerHTML = this.components[i].getSummary().text;
div.appendChild(p);
}
return div;
}
27. var ul = cull.dom.el("ul");
ul.nodeType === 1 // true
https://github.com/culljs/dome/
28. var ul = cull.dom.el("ul", { className: "bands" });
//
var li = cull.dom.el("li", "Execration");
var ul = cull.dom.el("ul", { className: "bands" }, li);
29. var ul = cull.partial(cull.dom.el, "ul");
var li = cull.partial(cull.dom.el, "li");
30. ["a", "br", "code", "div", ...].forEach(function (tagName) {
cull.dom.el[tagName] = cull.partial(cull.dom.el, tagName);
});
//
["a", "br", "code", "div", ...].forEach(function (tagName) {
root[tagName] = cull.partial(cull.dom.el, tagName);
});
32. buildSummary: function () {
return div(this.components.map(function (component) {
return p(component.getSummary().text);
}));
}
33. buildSummary: function () {
return div(this.components.map(function (component) {
return p(component.getSummary().text);
}
}));
1
34. buildSummary: function () {
return div(this.components.map(function (component) {
return p(component.getSummary().text);
}
}));
1 2
35. buildSummary: function () {
return div(this.components.map(function (component) {
return p(component.getSummary().text);
}
}));
3 1 2
36. buildSummary: function () {
return div(this.components.
map(function (component) {
return component.getSummary();
}).map(function (summary) {
return summary.text;
}).map(function (text) {
return p(text);
}));
}
38. buildSummary: function () {
return div(this.components.
map(func("getSummary")).
map(function (summary) {
return summary.text;
}).map(function (text) {
return p(text);
}));
}
39. buildSummary: function () {
return div(this.components.
map(func("getSummary")).
map(prop("text")).
map(function (text) {
return p(text);
}));
}
42. var callGetSummary = func("getSummary");
var getText = prop("text");
var summarize = compose([p, getText, callGetSummary]);
// summarize(obj);
// => callGetSummary(obj)
// => getText(callGetSummary(obj))
// => p(getText(callGetSummary(obj)))
43. buildSummary: function () {
var summarize = compose([p, prop("text"), func("getSummary")]);
return div(this.components.map(summarize));
}
44. var summarize = compose([p, prop("text"), func("getSummary")]);
// ...
buildSummary: function () {
return div(this.components.map(summarize));
}
49. Underscore.js
• by Jeremy Ashkenas from DocumentCloud
• “Underscore is a utility-belt library for
JavaScript that provides a lot of the
functional programming support”
51. cull.js
• by Christian Johansen and Magnar Sveen
• “Cull is a toolbelt for writing functional
javascript.”
• Used in the examples above
https://github.com/culljs/culljs
52. LiveScript & prelude.ls
• by George Zahariev
• A new compile to JavaScript language fork
from Coco
• Stay in this room until tomorrow, Mindos
have a talk about LiveScript
53. GHCJS
• by Hamish Mackenzie,Victor Nazarov, Luite
Stegeman
• Haskell to JavaScript compiler
55. var str = "Mentioned by " + tweeps.map(prop("name")).join(", ");
56. var str = "Mentioned by " + _.reduce(
_.map(tweeps, function (t) { return t.name; }),
function (memo, name, i) {
return (i == 0) ? name : memo + ', ' + name; },
''
);
57. var str = "Mentioned by " + _(tweeps)
.chain()
.map(function (t) { return t.name; })
.reduce(function (memo, name, i) {
return (i == 0) ? name : memo + ', ' + name; }, '')
.value();
58. var str = "Mentioned by " + _(tweeps)
.map(function (t) { return t.name; })
.join(', ');
59. var str = "Mentioned by " + _(tweeps).pluck('name').join(', ');
68. What is Lo-Dash
• Underscore.js fork by John-David Dalton,
Kit Cambridge, and Mathias Bynens
70. _.partial
var greet = function(greeting, name) {
return greeting + ' ' + name;
};
var hi = _.partial(greet, 'hi');
hi('moe');
// ! 'hi moe'
http://lodash.com/docs#partial
71. _.result
var object = {
'cheese': 'crumpets',
'stuff': function () {
return 'nonsense';
}
};
_.result(object, 'cheese');
// ! 'crumpets'
_.result(object, 'stuff');
// ! 'nonsense'
http://lodash.com/docs#result
73. var summarize = compose([p, prop("text"), func("getSummary")]);
// ...
buildSummary: function () {
return div(map(summarize), this.components);
}
74. var summarize = _.compose(
p,
_.partialRight(_.result, 'name'),
_.partialRight(_.result, 'getSummary')
);
// ...
buildSummary: function () {
return div(_.map(this.components, summarize));
}
79. • Take benefits from functional programming
• Not change everything to functional
• Library helps, ex: lo-dash
87. d
se
ea
el
tR
Ye
ot
N
http://shop.oreilly.com/product/0636920028857.do
88. Questions?
http://www.flickr.com/photos/roman/5610736/