I am working up a proof of concept for the Segregated DOM pattern and am using Browserify as my asset pipeline. As a result I am "requiring" modules as I need them in the code. Please see this very simple code example:
var loginForm = require('page-objects/loginForm');
lf = loginForm();
lf.signInButton.on('click', function(event){
event.preventDefault();
lf.email.val('TEST')
})
and here is the page object:
module.exports = LoginForm;
function LoginForm(){
var $ = require('jQuery'),
navbarForm = $('form.navbar-form');
return {
email: navbarForm.find('input[placeholder="Email"]'),
password: navbarForm.find('input[placeholder="Password"]'),
signInButton: navbarForm.find(':button')
}
}
I do not understand and cannot find a search that returns an answer as to why I need to instantiate the objects to use them. The examples I found on the Browserify GitHub and the Handbook do not show that as a requirement. However if I do not "new up" an object like this in my code the module is not found...I would like to know why that is. Are there changes I can make to my code to NOT have to do this?
Code without the object instantiation:
var loginForm = require('page-objects/loginForm');
loginForm.signInButton.on('click', function(event){
event.preventDefault();
loginForm .email.val('TEST')
})