Matt Snider JavaScript Resource

Understanding JavaScript and Frameworks

Tuesday, September 11, 2007

Type Detection Revisited

Mikol Graves, recently commented on my Type Detection article showing a novel way to do type detection. Here is his code snippet:

function isTYPE(o) { return (o != null && typeof o == ‘object’ && o.constructor.toString() == TYPE.toString()); }

For each Object type that you care about, for example: Date, Array, Class, to name a few. You simply replace “TYPE” with the appropriate Object name. These examples would produce functions like:

function isArray(o) { return (o != null && typeof o == ‘object’ && o.constructor.toString() == Array.toString()); } function isDate(o) { return (o != null && typeof o == ‘object’ && o.constructor.toString() == Date.toString()); } function isClass(o) { return (o != null && typeof o == ‘object’ && o.constructor.toString() == Class.toString()); }

This is nice, because it gives you a way of detecting all kinds of Meta Object types that you might care about. However, you end up using the same code over and over again. Therefore, I took some time and looked around the different toolkits for various other ways that type detection was being done. I found a snippet of code that I really liked in mootools.v1.11. Here is the code:

/* Section: Core Functions */ /* Function: $defined Returns true if the passed in value/object is defined, that means is not null or undefined. Arguments: obj - object to inspect */ function $defined(obj){ return (obj != undefined); }; /* Function: $type Returns the type of object that matches the element passed in. Arguments: obj - the object to inspect. Example: >var myString = ‘hello’; >$type(myString); //returns “string” Returns: ‘element’ - if obj is a DOM element node ‘textnode’ - if obj is a DOM text node ‘whitespace’ - if obj is a DOM whitespace node ‘arguments’ - if obj is an arguments object ‘object’ - if obj is an object ’string’ - if obj is a string ‘number’ - if obj is a number ‘boolean’ - if obj is a boolean ‘function’ - if obj is a function ‘regexp’ - if obj is a regular expression ‘class’ - if obj is a Class. (created with new Class, or the extend of another class). ‘collection’ - if obj is a native htmlelements collection, such as childNodes, getElementsByTagName .. etc. false - (boolean) if the object is not defined or none of the above. */ function $type(obj){ if (!$defined(obj)) return false; if (obj.htmlElement) return ‘element’; var type = typeof obj; if (type == ‘object’ && obj.nodeName){ switch(obj.nodeType){ case 1: return ‘element’; case 3: return (/S/).test(obj.nodeValue) ? ‘textnode’ : ‘whitespace’; } } if (type == ‘object’ || type == ‘function’){ switch(obj.constructor){ case Array: return ‘array’; case RegExp: return ‘regexp’; case Class: return ‘class’; } if (typeof obj.length == ‘number’){ if (obj.item) return ‘collection’; if (obj.callee) return ‘arguments’; } } return type; };

This was a good foundation for an improvement upon my type detection Functions. The $type Function can detect nearly all of my “isType” Functions straight away and has the power to detect some other important types, such as: arguments, textnode, element, collection, and more. So far, I have only added Date in addition to the types already defined and created an additional Function “isType” which can be used to test the object against a desired type.

We lose, “isAlien” Function and whether the number is finite. However, I never use these anymore, so I do not really need them. So far I believe the benefit of using these Functions will out-weight the loss. Although, I have also found these issues: testing for ‘whitespace’ does not work with IE because IE ignores whitespaces when parsing the DOM; in Opera testing for ‘arguments’ will return ‘array’, because Arguments constructor is Array (go figure). Otherwise, it has worked flawlessly and these issues can be worked around. I put together a test page, to verify the results of the isType Function and checked variations on the most common browsers.

You can download my Type Detection JavaScript file.

posted by Matt Snider at 10:09 pm  

Friday, September 7, 2007

Changing Pace

As many of you know the original goal of this blog was to look at the many different JavaScript Frameworks and Toolkits in order to compare: speed, size, efficiency, etc. If you follow the community, you’ll probably have realized long before me, that doing this would be a full-time job, as new Frameworks appear monthly and the existing ones are constantly: updating, improving, and refactoring their codebases. As such, I cannot keep up with all these changes and offer you the rich, up-to-date comparisons that I wanted. Therefore, I will be slightly modifying the focus of this Blog.

Instead of focusing solely on the Frameworks, I will be spending more time on the JavaScript language, with a splash of Frameworks when I find something awesome and have time to write a comprehensive article. I will also be writing about more general Web Development concepts, such as Semantic Markup and CSS. I am including this additional content because you cannot be a great JavaScript developer (at least on the web) without knowing more about web technologies (most commonly, hiding/showing or inserting content).

In the coming days I will be giving my blog a face lift and reorganizing. I have been lazy and mostly just used a default wordpress theme, but I feel that as a Web Designer and Engineer I should put a little of time into a clean and accessable design. Also, the homepage will be changing to feature work that I have done. For example, I recently completed an light-weight JavaScript Image Viewer Widget, and will be wrapping up a social *cough* networking project soon. I need to showcase the work I have done both for credibility and to earn future projects.

I also find that it is important to post on a regular basis, so from now on I will be be writing at least 2 articles a week (Tuesday and Friday). Between those articles, will be the occasional short blurb and important JavaScript news.

lastly, I’m also excite to announce that I have done all of the JavaScript work for the up-and-coming, free, web-based, financial applications http://www.mint.com. Mint is now in an invite Beta period and if you are interested in checking it out then message me here and I will email you an access code (90 of 100 left).

posted by Matt Snider at 6:37 pm  

Tuesday, September 4, 2007

Prototype Overhauled

I was just sitting down to write an article about the differences between the Event handlers of Prototype versus YUI, and many of the other Frameworks, when I stumbled upon the new release candidate (version 1.6) of Prototype. I have to say that I am surprised and impressed. A lot I planned to discuss has changed and it seemed more appropriate to highlight the important changes found in the next release.

http://www.prototypejs.org/2007/8/15/prototype-1-6-0-release-candidate

Here are the improvements that jump right out at me:

  • Events have been overhauled so you no longer need to use the ‘bindAsEventListener’ Function to scope DOM Nodes or other Objects, instead scope can be passed in the observation declaration
  • Custom Event - one of the most powerful Framework utilities is now available in Prototype
  • More use of closures to create inheritance instead of Object hashes
  • Semantic Sugar - most return objects are now wrapped with relevant Prototype Functions
  • Commitment pledge support to JavaScript Web Standards

I believe with this new release the Prototype team is making a big step forward with their framework. My only concern is that they are still attaching methods to the Object and Array pseudo types. Otherwise, they have done an excellent job on refactoring the Framework. I will provide a link to the download when the official version rolls out.

posted by Matt Snider at 6:04 pm  
« Previous Page

Powered by WordPress