Js anonymous function usage introduction

1. Overview of anonymous functions

The first knowledge of anonymous functions is in the jquery source code. The first thing you see when you open jquery is

 
(function( window, undefined ) {.......................})(window); 

This is an anonymous function, the red is the parameter, the anonymous function is to create a closed area, the outside can not access the variables and methods inside.

How do you call jquery when you can't access it? This is because jquery's anonymous functions have two sentences (in blue) :

 
(function( window, undefined ) { 

// Define a local copy of jQuery 
var jQuery = function( selector, context ) { 
// The jQuery object is actually just the init constructor 'enhanced' 
return new jQuery.fn.init( selector, context ); 
}, 

......... 

window.jQuery = window.$ = jQuery; 

})(window); 

In the original anonymous function, jQuery was passed to window, which is why the parameter is passed to window, so every call to jQuery is actually a call to window.

Jquery calls its own methods. It can't be called outside, so it's safe and non-conflicting.

2. Pick up where we left off with jQuery plugins

Here is part of the code I wrote for the paging control:

 
;(function ($) { 

$.fn.tabing = function (arg) { 
instance = new Plugin(this, arg); 
}; 
var instance = null; 
function Plugin(element){ 
this._tabs = $(element); 

this._tabli = $("a[href*='#']",this._tabs); 
this._tabDiv = this._tabs.siblings().filter("div[id*='tab']"); 
this.init(); 
} 
Plugin.prototype = { 
init: function(){ 
this._tabli.addClass("unselected"); 
this._tabli.eq(0).addClass("selected"); 
this._tabDiv.css("display","none"); 
this._tabDiv.eq(0).css("display","block"); 
this._tabli.each(function(){ 
$(this).bind("click",function(){ 
for(var i = 0;i<instance._tabDiv.length;i++){ 
instance._tabDiv.eq(i).css("display","none"); 
} 
instance._tabDiv.filter("#"+$(this).attr("href").split('#')[1]).css("display","block"); 
}); 
}) 
} 
} 

})(jQuery); 

Notice the red word, in fact, jQuery plug-in is also writing anonymous function, so as to ensure the independence of each plug-in, or how to call the plug-in, the red word $.fn. Tabing indicates that there is a tabing in the plug-in to jQuery fn,

This way the outside jquery object can call tabing directly, which is the plug-in's only contact with the outside world.

3. Having covered the use of anonymous functions in jquery plug-ins, let's talk about the anonymous functions of window

Jquery itself is an anonymous function of window, which is the first point, so how do we write an anonymous function of window?

After the anonymous function is written, there is an interface inside the function that interacts with the window, such as the following:

 
(function(){ 
function getObjByID(id){ 
return document.getElementById(id); 
} 
function __addClass(id,className,classValue){ 
$(id).style.className=classValue; 
} 
window.addClass=__addClass; 
})(); 

Also look at the red word, so that you can call addClass () outside the anonymous function, but not getObjByID ().

4. Anonymous functions are also executed during parsing

As follows:

 
function Video() { }; 
function Movie() { }; 

var _video = new Video(); 
_video.size = 3; 
_video.toString = function () { 
return "video"; 
}; 
_video.getName = function () { 
return "VideoXXX"; 
}; 
var _movie = new Movie(); 
(function (parent, child) { 
for (var ele in parent) { 
if (!child[ele]) //Parent is copied only when the child does not contain the attribute or method
child[ele] = parent[ele]; 
} 
})(_video, _movie); //The way anonymous functions are called

alert(_movie.size); //3 
alert(_movie.toString()); //[object Object] 
alert(_movie.getName()); //VideoXXX 

All three alerts have results, indicating that the anonymous function is executed internally.