All geek questions in one place

Where to host DOM interoperability with scalable javascript architecture

I am a bit confused at the moment regarding how to have a more convenient javascript architecture. I might not be aware, but I would say that almost 50% of my code is DOM related, so use my base library (jQuery).

I checked [1] the design architecture of the scalable Nicholas Zakas application: http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture and [2] Addy Osmani templates for large applications, Scale JavaScript Application Architecture http://addyosmani.com/largescalejavascript/ .

I have a one-page application style that adds a lot of content with the addition of ajax and DOM elements. My main question is: how can I separate the code from small reusable blocks if I use jQuery (or any other base library) to control the DOM.

You can simply select the task list module, for example. I understand that a module may look like this:

var TaskList = function() { addTask = function() { ... }; removeTask = function() { ... }; return { addTask: addTask, removeTask: removeTask } }();

Where should the events of the DOM elements be recorded, ajax call to save, load or delete the task, add a new task to the DOM element, etc.

I have no problem having jQuery in the module as a dependency, but if there is a better way, I think I skipped it from the two resources listed above and I would like to find out.

I just want to have a more elegant way to support growing javascript because I'm tired of spaghetti;)

Thank you for your time!

+4
source share
3 answers

Since you are going to develop a one-page application, you will have many visual modules that will be displayed in the current step, and then they will be replaced by others.

You can follow the MVC (Model-Controller-View) pattern, with each visual element being a separate object with its own code for manipulating the DOM and business logic stored in separate classes.

One of the methods:

 <html> <head> .... </head> <body> <div id="content"> <!--The main container view that can handle the replacement of smaller views --> <div id="toolbar"_container"> <!-- container for menu bar or tool bar that can also has its contained sub-views replaced --> </div> <div id="main_content_container"> .... </div> <div id="properties_panel"> ..... </div> </div> </body> </html>

The main container can contain all smaller containers, each of which has a separate view controller, which has its own DOM manipulation code (which also has the advantage that it can dynamically load on demand and thus reduce initialization load time).

Each view may have a pair of modules that will perform "actions" and will interact with a third module (optional), which will take care of I / O with databases, sockets, files, etc.

Hope this helps!

0
source

You can use Backbone.js or you can learn CQRS (and related templates) for a more convenient, complex and decoupled solution. It all depends on the complexity of your application (and potential future growth).

You can also check out some of these posts . There are some good ones that point your question to specific examples;)

0
source

Maintain business logic and display separate logic

This applies only to the DOM. Many APIs, both in the browser and in Node, are designed to trigger and listen to events or wait for other types of asynchronous operation to complete. Rule of thumb: If you write a lot of anonymous callback functions, your code may not be easy to test.

 // hard to test $('button').on('click', () => { $.getJSON('/path/to/data') .then(data => { $('#my-list').html('results: ' + data.join(', ')); }); }); // testable; we can directly run fetchThings to see if it // makes an AJAX request without having to trigger DOM // events, and we can run showThings directly to see that it // displays data in the DOM without doing an AJAX request $('button').on('click', () => fetchThings(showThings)); function fetchThings(callback) { $.getJSON('/path/to/data').then(callback); } function showThings(data) { $('#my-list').html('results: ' + data.join(', ')); }

Use asynchronous callbacks or Promises

The most common way to solve this problem is to pass a callback function as a parameter to a function that runs asynchronously. In your unit tests, you can fulfill your statements in the callback you pass.

 // hard to test; we don't know how long the AJAX request will run function fetchData() { $.ajax({ url: '/path/to/data' }); } // testable; we can pass a callback and run assertions inside it function fetchDataWithCallback(callback) { $.ajax({ url: '/path/to/data', success: callback, }); } // also testable; we can run assertions when the returned Promise resolves function fetchDataWithPromise() { return $.ajax({ url: '/path/to/data' }); }

Here are the details

0
source

Source: https://habr.com/ru/post/1387085/

More articles:


All Articles