If I understand correctly, your program loads HTML and scripts dynamically for each page you open. It should be something like a Single Page Application.
Well, the first step is to understand the strategies you can adopt to load the pages.
Load all at start
Depending on the size and use of the system, a strategy may be to concatenate all Htmls into one and all Scripts into a single script.
The final size will be larger, but once loaded, the system will have a much faster response time.
If this strategy is feasible, you just need to ensure that the script boot will be done once.
Load on demand
This is the strategy you are now adopting. Each accessed page loads its own HTML and Javascript.
The mistake you are making, however, is to load the HTML and Javascript to each access. You must ensure that they are reused in later accesses.
In the case of Script it is easy. Instead of manually adding to the DOM, create a function in the main script where pages may require a specific script.
For example, it follows a very rudimentary implementation:
var scripts = {};
function require(pagina, src) {
if (src in scripts) {
//carregar script de "src"
scripts[src] = true;
}
}
Use AMD
Better yet, you can use AMD and end up with duplicate code for good. Then the management of scripts in modules will be fully managed by a reliable library and following the standard of the web currently.
Note that AMD is a standard that can have different implementations.
You can make each page an AMD module, for example:
define('myModule', ['dep1', 'dep2'], function (dep1, dep2) {
//Define the module value by returning a value.
return function () {};
});
So whenever you need to access a module just do so:
var $ = require('jQuery');
var myModule = require('myModule');
The AMD manager ensures that the module will be downloaded and booted only once.
End up with dynamic pages
Maybe your HTML is being rendered on the server. For a responsive application, it would be much better to leave static HTML templates and do the bind of data obtained via Ajax calls to a REST endpoint.
Advantages include:
- Best performance
- Lower amount of traffic data
- Most consistent system API
- Avoid another layer of technology to generate dynamic pages, that always general some kind of problem
- Scalability greatly facilitated
The downside is that you need to be very careful not to end up with too much complicated code in Javascript.
Beware of the events
Placing event handlers directly into the elements, especially on pages that can load multiple times, is always a problem.
An alternative is not to bind directly to the element, but to use the function appropriately on
jQuery. Example:
$('#main-content').on('click', '#btn-salvar', function() {...})
In the past the 'live' function was used to add events to elements that were not yet in the DOM, but now the form above is used.
The idea is that the event will be triggered whenever any button with id=btn-salvar
is clicked inside an element with id=main-content
. Regardless of whether the button exists, it will be created or recreated inside that element.
You can disable the button after the first click.
$(this).prop('disabled', true)
.– KaduAmaral
@Kaduamaral I’ve done one up to one. Hide(), the problem is that the script calls the function because it is already duplicated, that is to say 1 click on the screen and the script as it is duplicated runs twice the same instruction
– SneepS NinjA
The problem then is not the click, but the loading of the script, right? How is loading the script?
– KaduAmaral
@Kaduamaral I give an append on the write file at the end of the html where the page is being loaded Document.getelementsbytagname("head")[0]. appendchild(fileref);
– SneepS NinjA
You can edit your reply by adding this code and an example of content from
fileref
? Is text or a DOM element?– KaduAmaral