1. Overview of anonymous functions
The first time I knew about anonymous functions was in the jquery source code. The first thing I saw when I opened jQuery was
Copy the code code as follows:
(function( window, undefined ) {.............................})(window);
This is an anonymous function, with parameters in red. The function of the anonymous function is to create a closed area, and the variables and methods inside cannot be accessed by the outside.
Since it cannot be accessed, how can jquery be called? This is because jquery’s anonymous function has these two sentences (blue text):
Copy the code code as follows:
(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);
It turns out that jQuery is passed to window in the anonymous function, which is why window is passed when passing parameters, so every time jquery is called in the future, the jQuery object of window is actually called.
jquery calls its own methods. It cannot be called from outside, which ensures safety and no conflict.
2. Continuing with the above topic, about jQuery plug-ins
The following is part of the code for the paging control I wrote:
Copy the code code as follows:
;(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);
Pay attention to the red words. In fact, jQuery plug-ins also write anonymous functions, which ensures the independence of each plug-in. Otherwise, it is not called a plug-in. The red words $.fn.tabing indicate that there is tabing in this plug-in for jquery’s fn. ,
In this way, the external jquery object can directly call tabing, which is also the only contact between the plug-in and the outside world.
3. After talking about the use of anonymous functions by jquery plug-ins, let’s talk about the anonymous functions of window
In fact, jquery itself is the anonymous function of window, which is the first point. So how do we write the anonymous function of window?
That is, after writing the anonymous function, there is an interface for interacting with the window in the function, such as the following:
Copy the code code as follows:
(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 words, so you can call addClass() outside the anonymous function, but you cannot call getObjByID().
4. Anonymous functions will also be executed during parsing
as follows:
Copy the code code 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]) //A copy of the parent will be copied only when the child does not contain the attribute or method.
child[ele] = parent[ele];
}
})(_video, _movie); //How to call anonymous function
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.