Objects of the page: description of one technique

Hello, habrovchane.

I want to share with you one technique of organizing code in the course of massive work with DOM elements. A few years ago, when there was no backbone and MVVC at all, we wrote good old javascript without frameworks: we created objects and forced them to dance on the page in a general dance. Such a practice, no doubt, still justifies itself, and the equipment, which will be discussed, is applicable to it.

My story is about the small PageObject.js library (current version v0.14, 2.6K) and how to use it to simplify your life.

This is not a jQuery plugin, although I am sure many will want to call it that way. This is just a function that uses selectors and some jQuery utilities to create convenience in reading and writing code. In fact, this is a simple jQuery utility.
')

The essence of technology

In creating objects that manipulate DOM elements and connecting them to a page, you can think of nothing new: create a constructor, first render a certain template in it, then parse its result into parts, “hang” the event handlers for these parts, program the rest of the logic and We build all this stuff into our application.

function Calculator() { if (this.constructor.name !== 'Calculator') { throw “No way, buddy!”; } // 1.   // 2.    // 3.   // 4.   } 

PageObject.js helps with the first two steps.

 function Calculator() { if (this.constructor.name !== 'Calculator') { throw “No way, buddy!”; } var calc = this; $.turnToPageObject(calc, { template: $('#tmplCalculator').html(), containerClass: 'calc', context: { caption: "Calculator" }, selectors: { buttons: [ ':button', Calculator.getButtonName ], led: 'p' } }); // 3.   // 4.   } var calc = new Calculator; $('body').append(calc.DOM.container); 

After the $.turnToPageObject function $.turnToPageObject (“turn into a page object”), the calc object will have the calc.DOM property, a namespace filled with DOM elements that correspond to the specified selectors, and calc.DOM.container will appear This part of an object that is easily embedded in an application is a container of everything.

Here you are, a full working example with a calculator . It remains for me to tell you more about all the features of the utility.

$ .turnToPageObject

The first argument must be an object that later has a DOM naming space filled with composite HTML elements. The second argument is options.

If you do not specify the container option, the container will be created (without it in any way), and it will be the same element as containerElement (by default, DIV ).

If you specify containerClass , the class will be assigned to the container.

If you specify a template , the template will be rendered and its result will be placed inside the container.

If you DO NOT specify a context , then the template will be rendered with an empty context {} .

template can be either a string or a function (integration with Jammit JST ).

When template is a function, it accepts only the context and must return a string.

When template is a string, the template is rendered using templateEngine , which will automatically configure itself to use the _.template templating engine if the underscore is present.

If your project does not have underscore , you need to configure templateEngine .

 //    : $.turnToPageObject.configure({ templateEngine: window.tmpl, // http://ejohn.org/blog/javascript-micro-templating containerElement: 'strong' }); 

templateEngine takes two arguments — a template string and a context — and should also return a string.

If the hide option is specified, the container will be hidden, which is often convenient.

And most importantly - selectors. If you specify the selectors option (object), then the corresponding selectors found in the contents of the container HTML elements will be placed on the same keys in the DOM namespace. If the template option was specified, then selectors will search in the already rendered template.

If no element is found by the selector, there will be a cry.
If more than one element is found by the selector, there will also be an exception.
If it is nevertheless necessary for the selector to find and place more than one element in an array, you need to add [] (empty square brackets) to the value of the selector - this selection justifies itself.

If it is necessary that the multiple elements found are placed in an object (as in the example with a calculator), the value of the selector should be written as an array of two elements: the first element is the selector itself, and the second is the function that should be remove the key (for example, ID) for placing this element in the appropriate namespace.

It is worth noting that additional namespaces in selectors form namespaces with the same names inside the DOM property.

Perhaps that's all.

You can get a better understanding of what and how it works by reading the tests and looking at the source code on the githaba. Certainly also general documentation will be helpful.

I would be glad if you find this technique and the above convention applicable in your projects. I will especially be glad to your wishes and ideas, I will be happy to answer questions.