1. Computing & Technology

Modular JavaScript Library

Introduction

From , former About.com Guide

There are a number of JavaScript libraries around, some that are popular and some not so popular. They all suffer from the same problems - that the library itself is huge and contains lots of things that the individual web pages don't need and that they require a decent knowledge of JavaScript to use them properly since without that knowledge of JavaScript people end up with both the huge library and dozens of lines of code that could be done with ordinary JavaScript in just a line or two (I have actually seen a number of sites with code like that).

One of the problems that JavaScript newbies have is that the only alternative to using these libraries (and ending up with a huge amount of code to do something simple) is to learn enough JavaScript to be able to write all the code themselves. Surely there must be another alternative so as to gain the benefits of having a JavaScript library without ending up with a lot of unnecessary code.

Well what I am proposing to do here is to provide that alternative but in order for it to be a practical alternative I am going to need your help. What I am going to do is to create the code for a number of JavaScript objects that provide sections of the functionality that you can get from the larger all encompassing JavaScript libraries. You will then be able to incorporate just those objects that you actually need to use in your code rather than having to include an entire library just to use a small piece.

Where I need your help is in identifying those pieces of functionality that you don't want to have to write for yourself so that I can create the objects that will provide that functionality for you. Now obviously I am not going to be writing code that is only going to work on specific web pages as a part of this project. What I am going to be writing is code that will provide the common functionality that a lot of JavaScript needs to be able to use so that you don't need to go recreating your own versions of those pieces. Basically what we are going to recreate together is an equivalent to one of these huge JavaScript libraries but with the functionality available as separate pieces where you only need to include those pieces that your web site actually uses and so make your web pages faster to load than if they had to download an entire library.

Here's the list of those objects that I have already created as a part of this project:

  • $B - Cross Browser BOM Library is designed to be used directly and provides cross browser access to the viewport size, page scroll position, and the position in the page where the last mouse triggered event occurred.
  • $O - Cross Browser DOM Element Library is a base from which you can define objects that interact with a specific element within the web page. It provides all the cross browser properties to identify where the element is in the web page as well as methods that allow you to update the element.
  • $E - Cross Browser event Library is designed to be used directly and provides cross browser add and remove event listener functionality.
  • $A - Ajax Library is designed to simplify the way you call the server without reloading your web page.

Over time the above list is going to grow to include all of the additional objects that I create for our modular JavaScript library.

So what I need for you to do to help me in this process is to either make suggestions as to what additional objects should be added to the library or to post links to pages where you are using the objects that have already been created so that others can see how you have used them (which might also provide ideas for further objects that would simplify your code further).

©2012 About.com. All rights reserved.

A part of The New York Times Company.