"Pure, functional JavaScript" code example
Playing with some of the concepts introduced in the excellent presentation "Pure, functional JavaScript" by Christian Johansen;
Video at : https://vimeo.com/43382919
HTML
<h1>See <a href="https://vimeo.com/43382919" target="_blank">this video</a> for some context on the JavaScript code used in this example.</h1>
CSS
*{
margin: 0;
padding: 0;
border: 0;
line-height: inherit;
font-size: inherit;
font-family: inherit;
}
body{
line-height: 24px;
font-size: 16px;
font-family: sans-serif;
}
h1{
line-height: 28px;
font-size: 20px;
padding: 0 8px;
}
ul{
padding: 4px 4px 0 4px;
}
li{
margin-bottom: 4px;
padding: 0 4px;
background-color: #eee;
}
li:hover{
background-color: #ccc;
}
#Test{
background : orange;
}
JavaScript
//----------------------------------------------------------------
// First, the `partial` function - as described in the video, returns a function that invokes the
// inputFunction, passing in the firstArgument before other arguments passed to the new function.
//----------------------------------------------------------------
var partial = function (inputFunction) {
var partialCreationArgs = [], a;
//starting at 1 to skip over function input - all other args become the first passed on invocation
for (a = 1; a < arguments.length; a += 1) {
partialCreationArgs.push(arguments[a]);
}
return function () {
var invocationArgs = [], b;
for (b = 0; b < arguments.length; b += 1) {
invocationArgs.push(arguments[b]);
}
return inputFunction.apply(null, partialCreationArgs.concat(invocationArgs));
};
};
//a few quick low-level utility functions used in createElement
var getType = function (o) {
return Object.prototype.toString.call(o);
};
var applyProperties = function (destinationObject, originObject) {
var propertyName;
for (propertyName in originObject) {
if (originObject.hasOwnProperty(propertyName)) {
destinationObject[propertyName] = originObject[propertyName];
}
}
};
//----------------------------------------------------------------
/*
This function matches all of the behaviors described in the video, see:
https://vimeo.com/43382919
*/
//----------------------------------------------------------------
var createElement = function (elementName) {
var element = document.createElement(elementName), append = function (child) { element.appendChild(child); }, i, arg, type;
if (arguments.length > 1) {
//skipping over 0 becuse it should be the name of the element
for (i = 1; i < arguments.length; i += 1) {
arg = arguments[i];
type = getType(arg);
if (type.indexOf('String]') >...