-
-
Save makinde/376039 to your computer and use it in GitHub Desktop.
!function() { | |
var doc = document, | |
htm = doc.documentElement, | |
lct = null, // last click target | |
nearest = function(elm, tag) { | |
while (elm && elm.nodeName != tag) { | |
elm = elm.parentNode; | |
} | |
return elm; | |
}; | |
// Listeners for our most common interations | |
htm.onclick = function(e) { | |
e = e || window.event; | |
lct = e.target || e.srcElement; | |
var elem = nearest(lct, 'A') || htm, | |
href = elem.getAttribute('ajaxify') || elem.href; | |
switch (elem.rel) { | |
case 'dialog': | |
case 'dialog-post': | |
Bootloader.loadComponents('dialog', function() { | |
Dialog.bootstrap(href, null, elem.rel == 'dialog'); | |
}); | |
break; | |
case 'async': | |
case 'async-post': | |
Bootloader.loadComponents('async', function() { | |
AsyncRequest.bootstrap(href, elem); | |
}); | |
break; | |
default: | |
return; | |
} | |
return false; | |
}; | |
htm.onsubmit = function(e) { | |
e = e || window.event; | |
var elem = e.target || e.srcElement; | |
if (!elem || elem.nodeName != 'FORM' || !elem.getAttribute('ajaxify')) { | |
return; | |
} | |
Bootloader.loadComponents('dom-form', function() { | |
bootstrap_form(elem, lct); | |
}); | |
return false; | |
}; | |
// Remove the no JS class, if it is here | |
htm.className = htm.className.replace('no_js', ''); | |
}(); |
wow. Very elegant solution. Freakin' awesome!
Nowadays, this code still being a good solution?
I think load javascript dynamically is a key rule of performance optimization forever, it's never outdate.
The Web is absolutely a resource enhanced Web, more and more javascript and css could load in an single page as time past, and the usage of memory increased continuously. We can choose a point to reload the page one time, but before that point, partial refresh and load on demand is necessary.
🎖
You dropped this 👑
👑
👑
Not sure, but I think these are the corresponding slides to provide context for ignorant devs like me who got excited by the HTMX post but have not much clue what it's about:
https://www.slideshare.net/makinde/javascript-primer (archived, although it will be tough to reconstruct it from there...)
@tomochino - Thanks for the additional info
@makinde - Ok cool, I was doing a reduced test with
return false
and noticed the issue but my usage was not in line with your implementation.You guys
return
as thedefault
path of the switch statement which avoids thereturn false
below it :D