Last active
January 20, 2016 10:03
-
-
Save christiantakle/b44b6343a2e992b50e18 to your computer and use it in GitHub Desktop.
Quick refactor of random code on http://brooks.io/syntax-highlight/v2/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Orignal ------------------------------------------------------------ | |
var isFancy = true; | |
var fancy = document.querySelector("#commentsbtn"); | |
fancy.addEventListener("click", function(e){ | |
if (isFancy) { | |
document.body.classList.remove("fancy-comments"); | |
isFancy = false; | |
} | |
else { | |
document.body.classList.add("fancy-comments"); | |
isFancy = true; | |
} | |
}, false); | |
var isFancy = true; | |
// Step 1 ------------------------------------------------------------- | |
// What actually change? and turn it into an expression (pure data in this case) | |
var | |
isFancy = true, | |
fancy = document.querySelector("#commentsbtn"); | |
fancy.addEventListener("click", function(e){ | |
const | |
[method, b] = | |
isFancy? ['remove', false] | |
: ['add', true] | |
document.body.classList[method]("fancy-comments") | |
isFancy = b | |
}, false); | |
// Step 2 ------------------------------------------------------------- | |
//-- Util ------------------------------------------------------------- | |
// Would be libraries just have a self-contained example | |
const | |
elseIf = | |
(f, t) => pred => | |
pred? t : f, | |
compose = | |
(f,g,h) => x => f(g(h(x))), | |
//-- Main ------------------------------------------------------------- | |
// Pull out the data, make simpler functions and compose them. | |
// If it was more complex I would change the Array to | |
// Object { Method::String, isShown::Bool } | |
// Disclaimer | |
// Not tested, did a small babel repl test so added `getModel` and reversed | |
// the arguments to `when` and renamed it to `elseIf` to see that it do update. | |
let | |
// Our simple model, using `let` we know it can be mutated | |
isFancy = true; | |
const | |
SELECTOR = | |
"#commentsbtn", | |
getModel = | |
_ => isFancy, | |
getArgs = | |
elseIf(['add', true], ['remove', false]), | |
applyArgs = | |
([method, b]) => { | |
document.body.classList[method]("fancy-comments"); | |
isFancy = b; | |
}, | |
clickHandler = | |
compose(applyArgs, getArgs, getModel); | |
document | |
.querySelector(SELECTOR) | |
.addEventListener("click", clickHandler, false); | |
// Step 2.1 - Added pseudo types -------------------------------------- | |
//-- Util ------------------------------------------------------------- | |
const | |
elseIf = // :: (a,b) -> Bool -> a `or` b | |
(f, t) => pred => | |
pred? t : f, | |
compose = // :: ((a -> b), (b -> c), (c -> d)) -> (a -> d) -> d | |
(f,g,h) => x => f(g(h(x))); | |
//-- Main ------------------------------------------------------------- | |
let | |
// Our simple model, using `let` we know it can be mutated | |
isFancy = true; // :: Bool | |
const | |
SELECTOR = // :: String | |
"#commentsbtn", | |
getModel = // :: () -> Bool | |
_ => isFancy, | |
getArgs = // :: Bool -> (String, Bool) | |
elseIf(['add', true], ['remove', false]), | |
applyArgs = // :: (String, Bool) -> IO () | |
([method, b]) => { | |
document.body.classList[method]("fancy-comments"); | |
isFancy = b; | |
}, | |
clickHandler = // :: () -> IO () | |
compose(applyArgs, getArgs, getModel); | |
document | |
.querySelector(SELECTOR) | |
.addEventListener("click", clickHandler, false); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment