The Synopsis

One of my clients who is in the lead generation business often asks to clone forms to test different variations. The variations can vary from style updates to functionality updates. I tend to just make all forms self contained within their directory and this would include all the assets like images, css and javascript. Here we will be talking about the javascript that controls the sign up process. The javascript for this process is pretty simple and each form behaves the same. Below is a stripped down object literal of what I use in these forms. I want to be able to build this object literal and extend it with new methods per form variation.

The Up and Running

I used browserify to build out the object literal.  Have a look at their install page to get up and running. Browserify uses Node.js require method and this is what we will leverage.

The How

Here we have a file called formLogicObj.js that will be run through browserify to build out the object. As you can see we are require-ing four modules into these four properties.

Now we need to require file formLogicObj.js  and assign the exported function to a variable for reference. For the purpose of this demo we will create formLogic.js in the same root directory formLogicObj.js resides.

Running browserify on the CLI.

If everything is successful you should now see a new file in js/bundle.js. This is the file browserify generates when it runs formLogic.js.  

 

Extending formLogicObj.js with new methods.  Below is the updated module.

Now  let’s say you have a new form created in another directory say /forms/variation/001. In this directory it would contain your cloned form with assets and along with a formLogic.js in the root. formLogic.js in this case would look different compared to the version above. This version would reference the default formLogicObj.js (the updated version above) and then pass in any new methods it needs to require. Below is what it would look like.

Notice that we are passing in object as the first parameter and an array as the second. The object is where we will create a new property and the value will require our newMethod.js. For the array you need to pass in the name of the new property.

Now, create a new method in /myModules and call it newMethod.js

If you run our new formLogic.js through browserify you should now our new methods being bundled with the default methods,