jQuery는 자체 호출 익명 함수를 어떻게 호출합니까?-JS 튜토리얼-php.cn

이 기사에서는 jQuery가 자체 호출 익명 함수를 호출하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

jQuery 소스 코드를 열면 먼저 다음 코드 구조를 볼 수 있습니다.

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

로그인 후 복사

이것은 자체 호출 익명 함수입니다. 무슨 물건? 첫 번째 괄호에서는 익명 함수를 만들고, 두 번째 괄호에서는 즉시 실행합니다.

그런 "자기 호출 익명 함수"를 만드는 이유는 무엇입니까?
익명 함수를 정의하면 "비공개" 네임스페이스가 생성됩니다. 이 네임스페이스의 변수와 메서드는 전역 네임스페이스를 파괴하지 않습니다. 이는 매우 유용하며 JS 프레임워크가 지원해야 하는 기능입니다. jQuery는 수천 개의 JavaScript 프로그램에서 사용됩니다. jQuery에서 생성된 변수는 이를 가져오는 프로그램에서 사용되는 변수와 충돌할 수 없습니다.
다음으로, 자체 호출 익명 함수에 어떤 함수가 구현되어 있는지 살펴보겠습니다. 코드 순서대로 정렬됩니다.

(function( window, undefined ) {
// 构造jQuery对象
var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
}
// 工具函数 Utilities
// 异步队列 Deferred
// 浏览器测试 Support
// 数据缓存 Data
// 队列 queue
// 属性操作 Attribute
// 事件处理 Event
// 选择器 Sizzle
// DOM遍历
// DOM操作
// CSS操作
// 异步请求 Ajax
// 动画 FX
// 坐标和大小
window.jQuery = window.$ = jQuery;
})(window);

로그인 후 복사

익명 함수는 문법적으로 함수 리터럴이라고 하며, JavaScript 구문은 이를 둘러싸야 합니다. 익명 함수 괄호는 실제로 자체 호출 익명 함수를 작성하는 두 가지 방법이 있습니다.

(function() {
console.info( this );
console.info( arguments );
}( window ) );

로그인 후 복사

(function() {
console.info( this );
console.info( arguments );
})( window );

로그인 후 복사

왜 창에 전달해야 합니까?

창 변수를 전달하면 창이 전역 변수에서 지역 변수로 변경됩니다. jQuery 코드 블록에서 창에 액세스할 때 범위 체인을 맨 위로 롤백할 필요가 없습니다. -레벨 범위는 더 정확할 수 있습니다. 더 중요한 것은 코드를 압축할 때 창을 최적화할 수 있다는 것입니다. js: (function(a,b) {})(window); // 창은
위의 소개를 통해 ()가 함수 표현식을 즉시 실행하게 할 수 있다는 것을 대략적으로 이해했습니다.

익명 함수는 "컨테이너" 역할을 합니다. "컨테이너"는 내부의 외부 변수에 액세스할 수 있지만, 외부 환경은 "컨테이너" 내부의 변수에 액세스할 수 없습니다. ){…} )() 내부적으로 정의된 변수는 일반적으로 "익명 래퍼" 또는 "네임스페이스"로 알려진 외부 변수와 충돌하지 않습니다.

(function () {
// ... 所有的变量和function都在这里声明，并且作用域也只能在这个匿名闭包里
// ...但是这里的代码依然可以访问外部全局的对象
}());

로그인 후 복사

아래와 동일

(function () {/
내부 코드/})();

일반인의 용어로 말하면, ( )는 평가에 사용되므로 이 ()는 계산이 필요하므로 언제든지 비워 둘 수 없습니다. 함수 구문 분석은 ()가 아닌 {}로만 구문 분석합니다.

()에 표현식을 넣으면 표현식의 값이 반환됩니다.

()에 함수를 넣으면 함수 자체가 반환됩니다. (function(){}());# 🎜 🎜# ()가 함수 바로 뒤에 오면 함수 호출, 즉 함수 평가를 의미합니다. (function(){})();

(function() {
//自执行函数中的内部变量，外部是无法访问的
var name = &#39;kevin&#39;;
})( window );

로그인 후 복사

name //정의되지 않음, 얻을 수 없음 name 값

코드 실행 중에 [이미 선언된 함수]가 먼저 구문 분석됩니다.

익명 함수는 별도로 작성되지 않으므로 실행하려면 다른 함수를 호출해야 합니다. 일반적으로 보이는 익명 함수는 매개변수로 전달됩니다. 즉시 실행 함수 자체는 익명 함수입니다.

js 코드 실행 순서:

//선언된 함수 function test(){}

을 닫고 사용 to 's 의 보유자에게 's'를 사용하려면 's'를 통해 's'를 통해 '를 통해 와드를 통해 사용을 통해 사용 사용을 통해 사용 사용 out off out out of ''s' to '''' through through's' to to to‐‐‐‐‐‐‐ to be to Know, , 모듈화 적용 시 이해해야 할 몇 가지 사항이 있습니다:

1. 함수 본문 뒤에 괄호를 추가하려면 to. 즉시 호출하려면 함수 선언이 아닌 함수 표현식이어야 합니다. ;
2 즉시 실행 함수는 범위 내에서 외부 변수에 액세스할 수 있지만 외부 환경에서는 액세스할 수 없습니다. 따라서 즉시 실행 함수는 닫힌 범위이며 외부 범위와 충돌하지 않습니다.
JQuery에서는 이 방법을 사용합니다. JQuery 코드를 (function (window, undefine){...jquery code...} (window)로 감싸줍니다. 전역 범위에서 JQuery 코드를 호출할 때 내부를 보호할 수 있습니다. 변수의 역할
3. 모듈 모드는 각 익명 클로저에서 전역 객체를 사용하여 클로저 함수를 호출하는 것이 매우 편리합니다. # a. 즉시 호출되는 익명 함수 표현식 생성

b. 노출하려는 항목이 포함된 변수 반환

c. 반환된 변수는 window

(function () {
var i = 0;
return {
    get: function () {
        return i;
    },
    set: function (val) {
        i = val;
    },
    increment: function () {
        return ++i;
    }
};
} (window));

로그인 후 복사

    // window作为一个带有多个属性的全局对象，上面的代码对于属性的体现其实是方法，它可以这样调用：
    window.get(); // 0
    window.set(3);
    window.increment(); // 4
    window.increment(); // 5

    window.i; // undefined 因为i不是返回对象的属性
    i; // 引用错误: i 没有定义（因为i只存在于闭包）

로그인 후 복사

# 🎜🎜#/

위는 자기 호출 익명 함수에 대한 분석인데, 그러한 함수는 어떻게 호출되나요? 🎜#*
/
/

다음은 익명 클로저인 전역 변수 호출에 대한 내용입니다. Function call

# 🎜🎜#

/모듈 모드를 다시 이동익명 클로저인 모듈 모드 생성 및 호출:

   a.创建一个立即调用的匿名函数表达式
   b.return一个变量，其中这个变量里包含你要暴露的东西
      c.返回的这个变量将赋值给window

로그인 후 복사

window（或者是任意一个全局对象）作为一个带有多个属性的全局对象，也可以把window当成一个参数,以对象的方式，在其它函数中实现调用。用下面的例子说明：

(function ($, YAHOO) {
// 这里，我们的代码就可以使用全局的jQuery对象了，YAHOO也是一样
$.aa = function(){
    //code
}
} (jQuery, YAHOO));
//调用 jQuery.aa();

로그인 후 복사

下面是一个标准的Module模式，通过匿名函数的返回值来返回这个全局变量：

var blogModule = (function () {
var my = {}, privateName = "博客园";

function privateAddTopic(data) {
    // 这里是内部处理代码
}

my.Name = privateName;
my.AddTopic = function (data) {
    privateAddTopic(data);
};

return my;
} ());
//调用 blogModule.my();

로그인 후 복사

在一些大型项目里，将一个功能分离成多个文件是非常重要的，因为可以多人合作易于开发。再回头看看上面的全局参数导入例子，我们能否把blogModule自身传进去呢？答案是肯定的，我们先将blogModule传进去，添加一个函数属性，然后再返回就达到了我们所说的目的：

var blogModule = (function (my) {
my.AddPhoto = function () {
    //添加内部代码  
};
return my;
} (blogModule || {}));

로그인 후 복사

或

(function (my){
my.AddPhoto = function () {
    //添加内部代码  
};
return my;
})(blogModule || {}));
//调用 blogModule.AddPhoto();

로그인 후 복사

那么，多个自执行函数间是怎么调用的呢？

(function(owner) {
//第一个匿名闭包
owner.debug = true;
//Ajax相关参数配置
owner.ajax = {
    timeout: 10000,
    type: &#39;post&#39;,
    dataType: &#39;json&#39;,
};
})(window.C = {}));

로그인 후 복사

如果第二个函数想调用全局变量为C中的对象呢？要怎么写？

(function($, owner) {
//这里调用上面全局变量为C 中的对象呢
if(!C.debug) return false;
var url = &#39;aaa.html&#39;;
mui.ajax({
    url: url,
    dataType: C.ajax.dataType,
    type: C.ajax.type,
});
})(mui, window.app = {});

로그인 후 복사

再举个例子，同样的，不同自执行闭包函数间的调用方法：

(function($, owner) {
//获取语言闭包
owner.getLanguage = function() {
    var language = localStorage.getItem(C.state.field.language);
    if(typeof language == "undefined" || language === null || language == &#39;&#39;) {
        var currentLang = navigator.language;
        if(!currentLang)
            currentLang = navigator.browserLanguage;
        language = currentLang.toLowerCase();
        language = language.replace(/-/g, &#39;_&#39;);

        if(language != &#39;en_us&#39; && language != &#39;zh_cn&#39;)
            language = &#39;en_us&#39;;

        localStorage.setItem(C.state.field.language, language);
    }

    //在上面的解析中有说过，Module模式，return 一个变量，这个变量就是要爆露的东西。通过这个函数的全局变量，这个  language  可以在任何地方调用   
    //return一个变量，其中这个变量里包含你要暴露的东西 
    //全局调用  storage.language                                  
    return language;
};
})(mui, window.storage = {}));

로그인 후 복사

(function($, owner) {
owner.language = {};
owner.preload = function(settings){
    var defaults = {
        name: &#39;i18n&#39;,
        language: &#39;&#39;,
        path: &#39;/&#39;,
        cache: true,
        encoding: &#39;UTF-8&#39;,
        autoReplace: true,
        success: null,
        error: null,
    };
    
    settings = $.extend(defaults, settings);
    if(settings.language === null || settings.language == &#39;&#39;) {
        //全局调用  storage.language                                                                            
        settings.language = storage.getLanguage();
    }
}   
})(mui, window.i18n = {});

로그인 후 복사

所以匿名闭包的调用规则是这样的，立即执行(最后一个括号) (window)，如果把window作为一个参数进行传递，那么就把它以对象的方式，在其它函数中实现全局调用。

相关推荐：

js实现模态窗口增加与删除案例分享（纯代码）

js对象类型怎么判断？详解js里的基本类型转换

위 내용은 jQuery는 자체 호출 익명 함수를 어떻게 호출합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!