加入收藏 | 设为首页 | 会员中心 | 我要投稿 聊城站长网 (https://www.0635zz.com/)- 智能语音交互、行业智能、AI应用、云计算、5G!
当前位置: 首页 > 教程 > 正文

js的匿名函数引用介绍

发布时间:2023-08-21 14:31:50 所属栏目:教程 来源:
导读:js的匿名函数使用介绍

1.匿名函数概述

关于匿名函数的第一次认识还是在jquery源码里,打开jQuery首先看到的是

代码如下:

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

js的匿名函数使用介绍

1.匿名函数概述
 
关于匿名函数的第一次认识还是在jquery源码里,打开jQuery首先看到的是
 
代码如下:
 
(function( window, undefined ) {.......................})(window);
 
这就是一个匿名函数,红色为参数,匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法。
 
既然不能访问,那怎么能调用jquery?这是因为jquery的匿名函数有这样两句话(蓝色字):
 
代码如下:
 
(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);
 
原来在匿名函数里将jQuery传给了window,这也就是为什么参数的传递中要传递window,所以以后每次调用jquery其实是调用window的jQuery这个对象。
 
由jquery调用自己里面的方法。外面是无法调用的,这样可以保证安全和不冲突。
 
2.接着上面的话题,关于jQuery的插件
 
以下是我写的分页控件的部分代码:
 
代码如下:
 
;(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);
 
注意红色的字,其实jQuery插件也是在写匿名函数,这样保证每个插件的独立性,要不怎么叫插件,红色的字$.fn.tabing说明在这个插件里面有个tabing给了jquery的fn,
 
这样外面的jquery对象就可以直接调用tabing,这也是插件与外界的唯一接触。
 
3. 说完了jquery插件对匿名函数的使用,再说一下window的匿名函数
 
其实jquery本身就是window的匿名函数,即第一点,那我们怎么写window的匿名函数呢?
 
即写了匿名函数后,在函数里面有个与window交互的接口,例如下面:
 
代码如下:
 
(function(){
 
function getObjByID(id){
 
return document.getElementById(id);
 
}
 
function __addClass(id,className,classValue){
 
$(id).style.className=classValue;
 
}
 
window.addClass=__addClass;
 
})();
 
同样是看红色的字,这样在该匿名函数外就可以调用addClass(),但无法调用getObjByID()。
 
 

(编辑:聊城站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章