Organize javascript code under jquery (js functionalization)_Basic knowledge

Starting with the magical "$" function
The "$" function will bind an event to a specified button after the document is loaded. These codes work fine in a single web page. But if we have other pages, we will have to repeat this process.

Copy code The code is as follows:

Say Hello

What if we need another action for the button? For example, like this:

Copy code The code is as follows:

Unlike it

Next, more questions arise. We need a lot of buttons like this, which seems not difficult.

Copy code The code is as follows:

Unlike it

However, not all pages will use these two kinds of buttons. In order not to To use additional selectors on the page, we need to make some necessary adjustments, because the performance of class-based selectors is very expensive compared to id selectors. It requires traversing all DOM elements and using regular expressions to match the class attribute to select elements that satisfy the condition.

Copy code The code is as follows:

Our project functions are becoming more and more complex. After a period of time, it became like this, quick but dirty...

Copy code The code is as follows:

This is really bad. We need to load many code snippets on one page to bind all events. If we load different codes into multiple js files, this will increase the resource consumption of multiple pages. HTTP requests will face challenges both in management and user experience, and we need to find a better solution.
Since the overhead of class selector is so high, can we bind all events in one scan? We can try it:

Copy code The code is as follows:

Show server message.
Another button with same action but different server side identifier.

In more complex scenarios, we can use the inline code on the page to pass some necessary information to the component.

Copy code The code is as follows:

Yottaa.globalConst = {
User:{
familyName: "Jhone",
givenName: 'bruce'
},
Url:{
siteName: 'yottaa.com',
score: 98
}
}
Yottaa.componentMetaData = {
compoment_id_1:{ ...... },
component_id_2:{ ...... }
};

The above discusses a possible code organization method, but it is not suitable for all projects. What we have to do is: find a relatively low-cost refactoring solution based on the current status quo. We consider the following points:
Separate the event binding code and component code of the element: the component code includes the jquery library, related extension plug-ins, and widgets written by ourselves, such as chartbox and other content.
Event binding and processing logic: divided into multiple modules according to different components, and each module is placed in a function.
The page needs to specify which modules are to be initialized on this page, and provide a list for unified processing by the global event binder.
Let’s demonstrate part of the code:

Copy the code The code is as follows:

< script type="text/javascript">
function init_loginPanel = function(){
var container = $('login_panel');
$('#login_button').click(function(){
......
});
}
function init_chart = function(){
......
}
//global static init method
Yottaa.initComponents = function(components){
for(var i = 0;iif(typeof window[components[i]] == 'Function' ){
window[components[i]]();
}
}
}
// above is in the 'all-in-one' assets file which is compressed to one file in production.
var components = ['init_loginPanel', 'init_chart'];
var metaData = {
loginPanel: {},
chart: {},
.... ..
};
$(function(){
Yottaa.initComponents(components);
});
//here is inline script on the page.
< /script>