Javascript Central Control
How do you manage Javascript content on a larger website? I am especially struggling with the different $ (document) .ready () and the fact that I need to juggle all those id ($ ('# id')) lines. I was thinking about combining the required $ (document) .ready () with every "module" that uses them, but this leads to a degradation in apparent speed since I no longer have javascript at the bottom of every page.
What is a good way to efficiently manage Javascript on a fairly large site and easy to maintain?
source to share
See how libraries like Dojo and ExtJS handle this for ideas. They use functions like require () to retrieve scripts that dynamically depend on them and to ensure that these regular libraries are not loaded twice. They define events to handle load dependencies so that, for example, your large list of .ready () statements can be refactored in some places to be one important library initialization instead, and then one or more events are disabled to indicate that some things are ready that other libraries use them for initialization.
One thing I like to do when multiple coders are coding the same codebase is to use HTML / DOM as a mutual contract and bind code to it using selectors rather than allowing inline events.
For example, if you are writing a calendar control that has an onclick in the img tag that should show the calendar, it is very difficult for you to build two more libraries and turn off the "calendar management" is about to release "event. On the other hand, if the library is looking for items with a class name CSSName "calendarPick" and attaches an event to them, then you leave other libraries open to do what they will, with the same DOM you share with, with little or no coordination between coders (writing code requiring coder coordination, tends to slow down coding and increase the likelihood that something will break).
If the same calendar library offers some events to discard, other programmers do their job, because if the event already exists, they will most likely write it cleanly; if it isn't, they can hack it and make the codebase less flexible in the process.
If you offer singleton methods like Calendar.getCalendars (), you also make it easier to collaborate because it prevents people from writing their own version of these methods, blocking the implementation down to a specific set of classes names, DOM order, or even more fragile circumstances so that each version of that continued to work.
source to share
I don't know what your environment looks like. But I think it's to split the script into different segments. All code specific to a particular page or function must go into it in a javascript file.
Good naming conventions and standards follow.
Last but not least, document everything. When a page changes, you should look in your documentation to see what scenarios it might affect. Likewise, the documentation should be able to tell you what script does what what pages.
I know this is not a direct answer to your question, but it will make maintenance easier in the long run. Especially if you have a lot of people working on the same project.
When it comes to maintainable code, naming conventions are again very important. And in the html and javascript part. Also javascript variables and functions should reflect HTML code as much as possible. For example, if you have the form id = "banana", do not name the variable containing it "apple".
source to share
This is what happened to me at this time, I hope you can help. be responsible for the ordered calling methods of each module, and they are all called in the same event. what level exists if you need to call any module before another
// Call the initial organizer of each modules
var modules = (function(){
var level_0 = new Array();
var level_1 = new Array();
var level_2 = new Array();
return {
add: function(method, level){
var returned = true;
try{
switch(level){
case 0:
level_0.push(method);
break;
case 1:
level_1.push(method);
break;
case 2:
level_2.push(method);
break;
};
}catch(ex){returned=false;}
return returned;
},
callAll: function(){
var returned = true;
var returned_0 = true;
var returned_1 = true;
var returned_2 = true;
try{
returned_0 = this.call(0);
returned_1 = this.call(1);
returned_2 = this.call(2);
}catch(ex){returned=false;}
return ((returned && returned_0 && returned_1 && returned_2) || false);
},
call: function(level){
var returned = true;
var level_call = null;
try{
switch(level){
case 0:
level_call = level_0;
break;
case 1:
level_call = level_1;
break;
case 2:
level_call = level_2;
break;
};
if (level_call!=null)
for(xcall in level_call)
level_call[xcall].call();
}catch(ex){returned=false;}
return returned;
}
};
})();
//in each file JS with ini method in module
modules.add(function(){alert("method file/module A in level 1 a");}, 1);
modules.add(function(){alert("method file/module B in level 1 b");}, 1);
modules.add(function(){alert("method file/module C in level 0 a");}, 0);
modules.add(function(){alert("method file/module D in level 0 b");}, 0);
modules.add(function(){alert("method file/module E in level 2 a");}, 2);
modules.add(function(){alert("method file/module F in level 2 b");}, 2);
modules.add(function(){alert("method file/module G in level 2 c");}, 2);
modules.add(function(){alert("method file/module H in level 0 c");}, 0);
// single call to the event ready
$(function(){
//call all
modules.callAll();
// OR
//call in other order
modules.call(0);
modules.call(2);
modules.call(1);
});
source to share
If you are looking for a good resource for writing good, clean JS, you might want Douglas Crockford's JavaScript: The Good Parts book as it contains many helpful resources, including tips on how to structure your code well.
When I write applications that have a lot of JS, I usually create one object (so as not to clutter up the global namespace) and then divide it into sub-objects that contain different bits of data and application behavior. A small example:
var PandaApp = {};
PandaApp.setup = {};
PandaApp.setup.init = function init() {
// do something neat
};
PandaApp.utils = {};
PandaApp.utils.showMessage = function showMessage(msg) {
// do some jQuery goodness or something
};
This way I have exactly one global object with all my data in it, and everything happens in a neatly named way of my choice.
source to share