Separating from the DOM, a JavaScript Story: XI to Eye

xitoeye

Most web applications have to talk to a third party API that they don’t control and didn’t write.  A good strategy for dealing with that library is to have all your access to the library go through a wrapper object.

When you use a wrapper object, you can define the wrapper object in terms that are semantically relevant to your application. It also becomes easier to test your application, because you can test it as far as the wrapper and then test the wrapper’s interaction with the API separately.  It’s also easier to change the library if needed.

Those features are valuable in front-end development, too. However, many front-end applications intertwine with the DOM or with a library like jQuery in a way that can make the code extremely dependent on the specifics of one particular page setup.

In this XI to Eye video tutorial I walk through the process of treating jQuery and the DOM like a third-party library, and creating a wrapper object to manage interaction with the DOM.

Noel Rappin is the author of Master Space and Time with JavaScript  a four book series that will help you come to to grips with modern JavaScript, including frameworks such as Backbone and Ember, testing, and the JavaScript object model.
Noel Rappin

About Noel Rappin

Noel Rappin has written 8 post(s) in this blog.

Facebook Twitter Pinterest Plusone Linkedin

3 Responses

  1. Tim says:

    Hi there! It’s always great to see a push towards clearly separated responsibilities in javascript code. Your example is basically a separation between Model and View, isn’t it? The DualSelectDom object being the view.

  2. Noel Rappin Noel Rappin says:

    Yes, you can think of it as a model/view separation. A lot of people would consider the whole thing to be view, but I think it can be worth finer distinctions as the code gets more complex.

  3. Emmanuel says:

    A library like knockout or a framework like angular provide separation between DOM and login, somewhat similar to what you describe, but they also get rid of the need for jquery by providing automatic 2-way data binding for your DOM-agnostic models.

    Sample implementation using ko:

    http://jsfiddle.net/ndL56/1/

Other Posts