Javascript in declarative style
Maybe this article will not be interesting for a javascript guru, but for beginner developers, it’s certainly useful.
At once I will make a reservation that the article will use only pure javascript without connecting third-party frameworks (for example jquery).
Writing javascript in a declarative style is much more convenient:
')
- Ability to bind javascript functionality to a specific html block
- Ability to write javascript code like css (to bind properties to an object)
- Improve the readability of the code by transferring the logic associated with specific html-blocks into separate files
- And much more. Try it and see for yourself.
So let's get started.
To get started, let's get 3 files:
- index.html - file containing html blocks, which we will process
- index.js - file containing initialization functions associated with block functions
- init.js - a file containing the processing logic of attached blocks
Contents of the index.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="init.js"></script> <!-- --> <script type="text/javascript" src="index.js"></script> <!-- c - --> </head> <style type="text/css"> div { margin:30px; padding:10px; background: #ccc; border:solid 1px #666; font-family:arial; font-size:12px; } </style> <body> <div class="b-block init_block1"> <!-- --> , ))) </div> <div class="init_block2"> <!-- --> ..))) </div> </body> </html> Index.js file:
/** * , * ( , ) * @param object elem - , * @param string evType - (: "click","mouseover") * @param function call - - ( ) */ function addEvent(elem,evType,call) { if(elem.addEventListener) { elem.addEventListener(evType, call, false); } else if(elem.attachEvent) { elem.attachEvent('on' + evType, call); } } /** * , */ function initStart() { var arrayElem = document.getElementsByTagName('*'); var arrayElemLength = arrayElem.length; for(var i=0;i<arrayElemLength;i++) { var attr = arrayElem[i].className; if(attr) { if(attr.indexOf('init_') !== -1) { var initText = attr.substr(attr.indexOf('init_')); if (initObject[initText]) { initObject[initText](arrayElem[i]) } } } } } /* , */ addEvent(window,'load',initStart);
Init.js file:
/** * , */ var initObject = { /** * html-, class "init_block1" * @param object elem - html- ( -) */ init_block1: function(elem) { elem.innerHTML += ' ... '; }, /** * html-, class "init_block2" * @param object elem - html- ( -) */ init_block2: function(elem) { elem.innerHTML += ' . '; addEvent(elem,'click',function(){ alert('!'); }); } }
So everyone hooked up, now I will explain.
In order to bind a certain logic to any block on the page, you need to specify the method of the object initObject in the class of this element.
The html element itself (more precisely, a link to it) is passed to the method, with it you can do whatever you want: bind the event, pass data to ajax, change the property, etc.
In such a simple way we can bind a certain logic to the necessary objects on the page.
It is worth noting that the initStart function is not quite perfect - there is something to modify.
But this is an educational example, so I didn’t do everything "with a needle," I think the general concept is understandable.
How it works, you can see here .
Download one example archive.
Source: https://habr.com/ru/post/139990/
All Articles