Check out my latest book of drawings!
Rapid Transit

This is really just for me...
August 11, 2018, 12:21 pm

So you want to write in vanilla Javascript. But you've definitely noticed it's missing some shit. And if you haven't noticed, it's because you never really learned how to write jQuery.

One of the major reasons I will probably not give up jQuery any time soon, is because of event delegation. Event delegation is a great way to make event listeners that don't require an existing element yet. This lets us set up events for any element that MIGHT exist some time in the future.

Well here's a small function to add super basic event delegation for a space separated string of classes to your code setup.

function delegateEvent(delegate,event,target,callback){ var targets = target.split(" "); delegate.addEventListener(event, function (e) { targets.forEach(function(o){ if ( e.target.classList.contains(o) ) callback.apply(e.target,[e]); }); }, false); }

It's pretty simple. But it's a major relief to have this written out even for myself.

You could even take this one step further. You could add a delegate function to all object prototypes. This is technically a bad idea for big projects, but you shouldn't be writing very much code like this for that size of a project anyways. You should be using some framework or library.

Object.prototype.delegate = function(event,target,callback){ this.addEventListener(event, function (e) { var targets = document.querySelectorAll(target); [].forEach.call(targets,function(o){ if ( e.target == o ) callback.apply(e.target,[e]); }); }, false); }

This even gives us the ability to create query selectors instead of just class lists like the previous example.

Javascript Functions, Closures, and the IIFE
June 29, 2018, 9:14 am

When writing code in Javascript or any programming language, one of the core concepts that a developer has to wrap their heads around is the function. If variables are values to be referred to at a later time, functions are whole sets of code to be referred to later.

Function

function myFunc() { // Do something }

You can also define a function as a value, or as an anonymous function. Normally functions are hoisted to the top of the code and run first, but an anonymous function is created inline with the rest of the code around it.

Anonymous Function

var myFunc = function() { // Do something }

There is value in both of these methods. It is important to know your options and explore their relevance. But there are even more options.

Sometimes it can be handy to define a function that defines it's own lexical scope. This allows local variables to be set up statically.

Closure

function foo(){ var id = 5; var bar = function() { console.log(id); } return bar; } var foobar = foo(); foobar();

This series of code has some very interesting implications for scope and how to create functions that have their own values. The id variable only exists inside the foo function, but the foo function returns the bar function as a value, and since the bar function was made inside foo, and after id, it also has access to the id value. Closures allow you to segregate your values and give unique scope to parts of your project. This becomes especially useful when you want to write code for libraries and larger repositories.

Immediately Invoked Function Expression

(function() { // Do something })()

Then there is this beast. A function with no name. No real declaration, but put inside of an expression syntax that fires it off immediately. What is the point? Why wouldn't the do something code simply be code, why does it need to be wrapped up like this?

Well, defining a function anonymously allows it to be passed around by value in a much more flippant manner. Most often anonymous functions are used for callback reasons. However, if it tries to access values that were created outside of it's scope it accesses them dynamically at their current value. This can be an unwanted effect, that is most often run into when defining a callback function inside of a loop.

If you make 3 buttons dynamically in a loop, and have them each print out the iterator value on click, all of them will print out the last value, because at the time of clicking, the iterator would have only its final value.

for(let i=0;i<3;i++){ $("body").append($("< button>").click(function() { console.log(i); })); }

This exact situation is when an anonymous function called immediately to provide closure to its scope is most effective. But it gets more complicated. Any method that is expecting a function to be passed into it must receive a function. And a closure that returns a function as a value is a goofy thing to look at.

Anonymous Closure Callback Immediately Invoked Function Expression

var i = 5; $("button").click( (function(id) { return function() { console.log(id); } })(i) ); i = 10;

Now, that's just weird to look at your first time. It will start to make sense the more you end up using it. The IIFE is being passed a variable in order to give closure to it's current value. The i variable gets passed in at the end of the closure, and then is referred to on the inside as id. This means that no matter what might happen to i in the future, when the click happens, the value of i has been stuck into the static value of 5 in id.

[edit] So um... turns out that loop example doesn't produce the result I said it would which means.... That's not actually a problem when you use the let declaration, instead of the var. But the final example still matters.

School is in session
October 8, 2015, 1:42 pm

And I've been writing... so much code. I've written so many things, and over and over and over again. I've started 4 new code libraries in the past month. I've made two version of dirty drawers. I've made big improvements to my prototyping framework. I've rewritten 4 students' projects from the ground up. I've been diving hard into my hamebase sass files. I've been improving my workflow with sublime. I'm learning a bit about nodejs.

And what's amazing is. I've never been happier. My art has suffered over the past few weeks, but I think I needed a break from that. I was drawing... a lot. It's been nice to kind of let that drop off a bit and do some coding for a change.

I'm very excited about my life currently. Everything is moving in directions that are good.

Tags: coding
  • 0