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:

<a href="javascript:;" id= "sayHello">Say Hello</a>
<script type="text/javascript">
//When dom ready, do something.
//bind click event to a button.
$(function(){
$('#sayHello').click(function(){
alert('Hello world!');
});
});
</script>

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

Copy code The code is as follows:

<a href="javascript: ;" id="sayUnlike">Unlike it</a>
<script type="text/javascript">
//when dom ready, do something.
//bind click event to a button.
$(function(){
$('#sayUnlike').click(function(){
alert('I unlike it.');
});
});
</script>

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

Copy code The code is as follows:

<a href="javascript:;" class= "sayUnlike">Unlike it</a>
<script type="text/javascript">
//Change to a class selector to match all the button elements.
$(function( ){
$('.sayUnlike').click(function(){
alert('I unlike it.');
});
});
</ script>

Two buttons of the same type appear on one page...

Copy code The code is as follows:

<a href="javascript:;" class='sayHello'>Say Hello</a>
<a href="javascript:; " class="sayUnlike">Unlike it</a>
<script type="text/javascript">
$(function(){
$('.sayHello').click (function(){
alert('Hello world!');
});
$('.sayUnlike').click(function(){
alert('I unlike it. ');
});
});
</script>

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:

<? if($page == 'A' ){?>
<script type="text/javascript">
$(function(){
$('.sayHello').click(function(){
alert ('Hello world!');
});
});
</script>
<? } ?>
<? if($page == 'B'){?>
<script type="text/javascript">
$(function(){
$('.sayUnlike').click(function(){
alert('I unlike it.');
});
});
</script>
<? } ?>

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:

<? if($page == 'A' or $page == "C" and $page is not "D"){ ?&gt ;
<script type="text/javascript">
......
</script>
<? } ?>
<? if ($page == "B" or $page == "E" and $page is not "X"){ ?>
<script type="text/javascript">
... ..
</script>
<? } ?>
<? if($page == "B" or $page == "E" or $page == "C "){ ?>
<script type="text/javascript">
.....
</script>
<? } ?>

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:

<script type="text /javascript">
//Register global name space.
var Yottaa = Yottaa || {};
Yottaa.EventMonitor = function(){
this.listeners = {};
}
//Bind all event.
Yottaa.EventMonitor.prototype.subscribe=function(msg, callback){
var lst = this.listeners[msg];
if (lst) {
lst.push(callback);
} else {
this.listeners[msg] = [callback];
}
}
// Create the event monitor instance.
var event_monitor = new Yottaa.EventMonitor();
function load_event_monitor(root){
var re = /a_(w )/; //using a regular expression to filter all event object.
var fns = {};
$(".j", root).each(function(i) {
var m = re.exec(this.className);
if (m) {
var f = fns[m[1]];
if (!f) { //If the event handler function does not exist, create the function object.
f = eval("Yottaa.init_" m[1] );
fns[m[1]] = f;//Call the binding function.
}
f && f(this);
}
});
}
$(function(){
// when dom ready, bind all event.
load_event_monitor(document);
});
//Here is 2 sample components.
Yottaa.init_sayhello = function(obj){
$(obj).click(function(){
alert('Hello world!');
});
}
Yottaa. init_unlike = function(obj){
$(obj).click(function(){
alert('I unlike it.');
});
}
</ script>

Our DOM element is written like this:
<a href="javascript:;" class="j a_sayhello">Say Hello</a>
< a href="javascript:;" class="j a_unlike">Say Unlike</a>

This seems much better, we only need to execute the class selector once when the page is loaded (in the above (all '.j' elements in the code), you can find all the elements that need to be bound to the event. The specific component to be bound is determined by a_xxx in the class name, which corresponds to Yottaa.init_xxx, and the reference of the current element Pass it into the event logic as a parameter.
In this processing mode, we don’t need to manually write the event processing logic again and put it in an initialization function like $(function(){ .... }); All we have to do is just I add two classes to the "container" of the component: "j a_XXX". The program can help me complete the event binding work. Isn't it cool? Such as commonly used expand/collapse effects, select all/inverse selection effects, tab switching and so on. This method can be used for some other simple functions. Could this be the legendary silver bullet? No, it’s not that simple. We should see some weaknesses in this approach:
Cannot pass initialization parameters to components.
It cannot reflect the containment relationship of components, nor can it use object-oriented features such as inheritance and polymorphism to make the program easier to write and understand.
It is a little troublesome to process some components with specific relationships, and there is no reasonable event notification mechanism.
Let’s take a look at the first one: Regarding the passing of parameters, in many scenarios for lists of multiple entries, we generally assign a unique id to the element corresponding to each entry. The behavior of these elements is similar, The only difference is the number on the server side, such as a message list or a product list. We can use the id attribute to do something for us. Look at the code below. We use the id attribute to tell JavaScript the server-side number corresponding to the entry, and send it back to the server-side as part of the server callback function parameters in the subsequent event logic processing. .

Copy code The code is as follows:

<script type="text/javascript">
Yottaa.init_sampleajax = function(obj){
$(obj).click(function(){
var component_id = $(this).attr('id').split('-') [1];
$.get('/server/controller/method', {id: component_id}, function(data){
if(data){
alert('Message from server: ' data );
}
});
});
}
</script>
<a href="javascript:;" class='j a_sampleajax' id='item-a'>Show server message. </a>
<a href="javascript:;" class='j a_sampleajax' id="item-b">Another button with same action but different server side identifier.</a>

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;i<components.length;i ){
if(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>