I have inherited a relatively big javascript app (~3k lines of code) and just do parttime javascript. I want to put all the jQuery event handlers into a more sane organization. I was thinking something like this:
before:
$('#click-here').click(function(){
//a bunch of dom manipulations and with 30 of them makes the app fairly convoluted
});
after:
function result_click(){
var global_id=$(this).data('global-id');
alert('here are the results of clicking: ' + global_id);
}
$(document).ready(function(){
$('#click-here').on('click',result_click);
});
</script>
<div id='click-here' data-global-id='23'>click HERE!</div>
This would be a fairly easy refactoring and would seem to structure it better. The event handling part seems to be the most out of control. Is this a reasonable way to do this? It would seem fairly easy to make this into a backbone.js app once it gets to this point.
thx
Yes, it's good to pre-define functions and then pass a reference to the functions into the click event.
Related
I'm having trouble grasping how to deal with front end events in volt, and hopefully this specific question could help enlighten me.
I implemented the simple chat program from the webcast and wanted to build on it. Specifically I want the chat window to stay scrolled to the bottom as the chat window is populated. I think the key is the jquery .animate({ scrollTop:...}) method, but I don't understand how to implement that in volt. Could someone enlighten me?
My first attempt is the "scroll_bottom" method in the controller
https://github.com/mmattthomas/chat/blob/master/app/main/controllers/main_controller.rb#L30-L36
def scroll_bottom
`
var newscrollHeight = $('.panel-body').attr('scrollHeight') - 20;
//alert('newscrollHeight:' + newscrollHeight);
$('.panel-body').animate({ scrollTop: newscrollHeight }, 'normal');
`
end
The javascript runs, but the variable returns NaN.
View is here:
https://github.com/mmattthomas/chat/blob/master/app/main/views/main/index.html
Even this specific example doesn't solve the whole problem (what if someone else adds to the chat, what event can animate the chat window to the bottom?) - so how best to implement this client-side action with volt?
Well, one good thing to know about Volt is that it uses OpalRb for client-side workings. To run something like jQuery in Volt, I think it would be easiest to use an Opal wrapper, which allow access of libraries like jQuery with Ruby.
Using the opal-jquery wrapper, I would implement a jQuery animation like so:
panel_body = Element.find(".panel-body")
panel_body.animate({ scrollTop: panel_body.children.height }, speed: "normal")
EDIT:
Here is a fork of your project where I have implemented a fix for this issue that you can check out.
I'm creating a Chrome extension for a website that has no open API, so I'm stuck reading Closure Compiled spaghetti code for a long time. I've made a lot of progress but I seem to be stuck. On the page's onload, this function executes:
function comments_initReply(){
var b=$("#ajax_comm div.com");
for(var a=0;a<b.length;a++){var d=$(b[a]);
var c=d.find(".commentReplyLink");
if(c.length){
d.on("dblclick",function(){$(this).closest("div.com").find(".commentReplyLink").click()}).find(".t")}
}
}
What it does is it takes a comment div on a website and it makes it into a large double-clickable area for you to open a reply. All I want to do is remove the double-clicking property so you can double-click text and highlight it instead of opening a reply modal dialog.
Since the function is anonymous, it cannot using removeEventListener to detach it. Any ideas? I prefer to not use jQuery.
Well, although you prefer not to use jQuery, it's much easier to use it, and my solution here will be jQuery-based, and feel free to convert it into a normal Javascript, if you want to.
function comments_endReply() {
$("#ajax_comm div.com").off("dblclick");
}
I am using Mootools extensively for a site which I am developing. But recently I noticed a problem that the animations slow down alot when I zoom (using the browsers Zoom In) in into the site. What could be a possible reason for this problem ? Or is this problem inherit in Mootools itself. This happens in Chrome 6.0.472 as well as Firefox 3.6.8.
Thanks,
Nitin
many things are wrong here with regards to speed optimisations.
lets take a look at this mouseover code that seems to slow down:
this.childNodes.item(1).style.left="0px";
this.getElements('div').setStyles({'opacity':'1'});
this.getElements('div').set('morph', {duration:'normal',transition: 'sine:out'});
this.getElements('span').set('morph', {duration:'normal',transition: 'sine:out'});
this.getElements('div').morph({'left':'-28px'});
this.getElements('span').morph({'left':'-30px','color':'#FFF'});
obviously this will work as it does but it's so very wrong i don't know where to begin.
the idea is to abstract and setup the repetitive tasks so they are done as a one off.
consider line by line the code above:
this.childNodes.item(1).style.left="0px";
this is wrong for a mootools app anyway, it would need to be this.getFirst().setStyle("left", 0);
the this.getFirst() is a lookup, it should be cached - although that's not a slow one.
then comes the bad part.
you select all child divs 3 times and all spans twice, where NO SELECTION should be applicable. VERY EXPENSIVE
you reset the Fx.morph options every mouseover event where there are no changes (although you seem to have a different duration for mouseenter and mouseleave - this is expensive)
consider this code:
[document.id("menu1"), document.id("menu2")].each(function(el) {
// use element storage to save lookups during events
el.store("first", el.getFirst());
el.store("divs", el.getElements("div"));
el.store("spans", el.getElements("span"));
// store the fx.morph options once and for all, no need to do so
// on every event unless you are changing something
el.retrieve("divs").set("morph", {
duration: 'normal',
transition: 'sine:out',
link: 'cancel'
});
el.retrieve("spans").set("morph", {
duration: 'normal',
transition: 'sine:out',
link: 'cancel'
});
// add the events
el.addEvents({
mouseenter: function(e) {
// retrieve the saved selectors from storage and do effects
this.retrieve("first").setStyle("left", 0);
this.retrieve("divs").morph({
"left": -28
});
this.retrieve("spans").morph({
'left': '-30px',
'color': '#FFF'
});
}
});
});
it will save a lot of processing on the events.
similarly, there are plenty of places where you are not really using the mootools api.
document.getElementById(curr).style.cursor="pointer";
$(this).removeEvents -> no need for $, this is not jquery.
document.getElementById("lightbox").style.visibility="hidden";
m=setTimeout('gallery()',5000); --> use the mootools var timer = (function() { ... }).delay(5000);, don't use strings with setTimeout/interval as it forces eval and reflows but pure anon functions
etc etc.
you really can make a day out of refactoring all this and making it 'nice' but it's going to be worth it.
also, learn about chaining
$("ribbon").set('morph', {duration:'long',transition: 'bounce:out'});
$("ribbon").morph({'top':'-10px'});
$("ribbon").addEvents({
this is calling up a selector 3 times. instead you can:
store it. var ribbon = $("ribbon"); ribbon.set...
chain it. $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - mootools element methods tend to return the original element so you can take the response of the last function and apply more to it.
1 is better for readibility, 2 is faster to do.
also. you have way too many global variables which makes your scope chain lookups more expensive, this will affect many call ups and places. try to namespace properly, if you need to access real global vars from functions and closures, use window.varname etc etc.
Another possible improvement here would be the use of event delegation (event bubbling will cause events to fire up the dom tree to the parents, mootools has an api to deal with it so you can add singular events to parent elements and not have to attach nnn events to all children) - look it up.
P.S. please don't take this in the wrong way - it's not meant to rubbish your work and it's just some constructive (i hope) advice that can help you bring it to the next level. good luck :)
I haven't seen any specific code in MooTools or any other library that checks if browser is zooming during animation, so I think that animation slows down, since browser using more CPU for computing zooming process.
I'd like to build onmouseover directly into a javascript block. I can do it within a hyperlink but I need to do it in the actual script section for the code im writing. Can I do object.onMouseOver()? Or is there another way to do it?
So for example I'd like
<script>
something i can put in here that will make on mouseover work on a specific object
</script>
Yes. :)
<span onmouseover="alert('Hi there')">Hi there</span>
Do you mean like that?
edited to add:
Ah I see so like this?
<span id="span1">Hi there</span>
<script>
document.getElementById('span1').onmouseover = function() {
alert('Hi there');
}
</script>
You bind events to HTML elements not javascript blocks. If you are talking about binding events to elements using script, yes you can do it. You can use addEventListener to bind events.
document.getElementById("eleid").addEventListener("mouseOver", myEventMethod, false);
Yes you can so if you have a link somewhere in the page that you want to fire the hover for you can use the following.
http://jsbin.com/asoma4/edit
EDIT: I should add that the attached is just an ugly example to demonstrate that what you want to do can be done. I would look into popular js libraries (jquery, prototype, etc..) to clean this up a lot and make it easier.
You can use addEventListener in Firefox/Chrome/etc. and attachEvent in IE. See this page.
For example,
<div id="cool">Click here!</div>
<script>
function divClicked()
{
// Do some stuff
}
var theDiv = document.getElementById("cool");
if(theDiv.attachEvent)
{
// IE
theDiv.attachEvent('onclick', divClicked);
}
else
{
// Other browsers
theDiv.addEventListener('click', divClicked, false);
}
</script>
If you want to avoid having to write all that code, you can use a JavaScript library (jQuery, Prototype, etc.) to simply your code.
I have read quite a bit about unobtrusive JS and how to generate it and all that jazz...
My problem is this: I have a website that heavily relies on mod_rewrite, so essentially all the pages requests are sent to index.php that generates the main structure of the page and then includes the appropriate page. Now, there are different sections in the site and each section uses different Javascript functions (e.g. for different AJAX requests).
Now, if I just were to attach a function to the onload of the page obviously the thing would not work, as I do not have to initialise the same things for each page... so what is the best way to handle this situation?
I hope the situation is clear, I'll be happy to clarify if needed
You can use addEventListener (standard) or attachEvent in the HTML generated by the subsidiary PHP pages.
The syntax is simple. E.g.
document.addEventListener("load", someFunction, false);
This allows you to generate the full body tag in index.php but run different load handlers for each page. Also note that you can use this multiple times on the same element.
Nico, I would suggest creating a custom javascript code with each included page (doesn't matter where on the page you include the script tag) and, as Matthew suggested, after you define a function to run on page load, use the addEventListener to load that custom function on "load"
Let's say you define a function pageinit() somewhere in the body of the included document
function pageinit(){..
}
window.addEventListener("load", function() { pageinit(); }, false);
Does that make sense for your project?
I would simply put it in a .js file.
mysite_common.js - site wide common utils and functions
mysite_page_a.js - unique functionality for page a
mysite_page_b.js - unique functionality for page b
for page b you include b.js while on page a you would include a.js
Then in your respective unique.js you can wrap your functionality in a ondomready or similar.
Keep it separate from your PHP, then it is much less of an annoyance later, it also means that you can rely on caching for your js to keep your page loads slimmer.
You can also look at things like YUI loader which allows you to do much more complex things like ondemand loading of bits of js functionality.
You can use event delegation to provide different functionality depending on context.
Basically it works by attaching an event listener to a container element which captures clicks on child elements. You can then do away with individual event listeners alltogether, as well as look at hints from the parent.
say:
<div id='container' class='page_a'>
...
<input name='somename'>
...
</div>
Then
var attachDelegates = function(container){
container.onclick = function(e) {
e = e || window.event;
var t = e.target || e.srcElement;
//Your logic follows
if(t.name === 'somename'){
dosomething(t);
}
if(t.className === 'someclass'){
... something else ...
}
};
and onload = function(){attachDelegates('container');};
The attachDelegates function could be different for each page, or you could have a monolithic one and simple attach hints to the container or be selective about which classes you attach.
These are much more coherent explanations and examples:
http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
http://blog.andyhume.net/event-delegation-without-javascript-library
Personally I use YUI3
http://developer.yahoo.com/yui/3/examples/node/node-evt-delegation.html
as it gives me CSS3 style selectors and is pretty hassle free so far.