Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quick refactor of random code on http://brooks.io/syntax-highlight/v2/
// 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
You can’t perform that action at this time.