Using Events in Prototype
-via Ajaxian (I know, I get a lot of ideas from this site!)
Ecytemedia has an article on how to use Events in Prototype. It dives into attaching functions to events using Event.observe along with some advanced javascript using anonymous functions and closures.
Check out the following code block:
$$(this.list + ” li”).each(function(item) {
Event.observe(item, ‘click’, this.showTagName.bindAsEventListener(this));
}.bind(this));Read this as “get all items for the list, binding the function “showTagName” to their onClick event, maintaining a reference to “this” (the element) inside the event function.
Now if you want to be able to tell showTagName to stop or start observing, maybe based on another user event, you have to extract the anonymous function to:
this.showTagObserver = this.showTagName.bindAsEventListener(this);and then the Event call becomes:
Event.observe(item, ‘click’, this.showTagObserver);We need to do this so we can refer to the observed function in multiple places, in order to have it turned off or on.
It might take a little bit to really grok what is going on here, but its well worth it.
February 9th, 2006 at 9:38 am
Are groups within CNET using prototype or other major opensource JS library on any production level, customer facing sites?
There seems to be the feeling amongst those I have spoken to within CNET that it is better to create your own library to decrease page size.
It seems like the options are
1) Create your own library
2) Create a page specific library with only the subset of code needed
3) Reuse an existing library
February 9th, 2006 at 10:24 am
I think you’re talking about two different problems here. There’s the issue of keeping page weight down and 3rd party libraries often do more than what the current application you’re building requires, and then there’s the issue of authoring your own library vs. using someone elses.
Check out this post for one possible solution to keeping page weight down:
http://clientside.cnet.com/?p=13
and this one, too:
http://clientside.cnet.com/?p=14
Regarding 3rd party libraries, Download.com uses several. We use overlibmws (http://www.macridesweb.com/oltest/) for various in-page popups, and in a product we are launching today for user watch-lists we use prototype, moo.fx (for transitional effects), and behavior.js.
In my opinion, writing these libraries from scratch is more risky. Open source projects typically are vetted by larger groups and often go that extra mile to make sure they degrade nicely, while here at CNET we often have to stop polishing things to get the product out the door. Additionally, as new browsers emerge and bugs are found, there’s a community out there actively maintaining it, which we rarely have the luxury to do. If you don’t alter the library, then you can just drop in the new version.
I’m happy to post some examples of these things in use on Download.com. I also know that News.com is using 3rd party libraries.