Javascript_javascript 기술의 익명 함수 및 캡슐화 소개

한동안 서로 다른 JS 라이브러리의 캡슐화를 혼동한 끝에 마침내 단서를 얻었습니다. 대략:

코드 복사 코드는 다음과 같습니다.

자체 호출 익명 함수를 만들고, 매개변수 창을 디자인하고, 창 개체를 전달합니다.

이 과정의 목적은

코드 복사 코드는 다음과 같습니다.

이렇게 하면 자신의 코드가 다른 코드에 의해 오염되지 않고 동시에 다른 코드도 오염되지 않습니다.

jQuery 패키지

그래서 찾아본 jQuery의 초기 버전은 1.7.1 입니다. 캡슐화 코드는 대략 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

(함수(창, 정의되지 않음) {
var jQuery = (function() {console.log('hello');});
window.jQuery = window.$ = jQuery;
if ( typeof 정의 === "함수" && 정의.amd && 정의.amd.jQuery ) {
정의( "jquery", [], function () { return jQuery; } );
}
})( 창 );

그 중

코드 복사 코드는 다음과 같습니다.

console.log('hello');

처음에 언급한 대로 동작하는지 확인하기 위해 사용하는데, 창에서 jQuery
를 호출할 수 있다.

코드 복사 코드는 다음과 같습니다.

window.$

아니면

코드 복사 코드는 다음과 같습니다.

window.jQuery

비슷한 패키지를 만들 수 있도록

코드 복사 코드는 다음과 같습니다.

(함수(창, 정의되지 않음) {
var PH = 함수() {

}
})(창)

위와 비교하면 2단계만 빠졌네요

1. jQuery 기호 및 전역 호출 정의
2.비동기식 지원

그래서 이전 jQuery 패키지를 찾아봤는데 방법은 거의 같았습니다. .

코드 복사 코드는 다음과 같습니다.

if (window.jQuery 유형 == "정의되지 않음") {
var jQuery = function() {};
If (typeof $ != "정의되지 않음")
          jQuery._$ = $;

var $ = jQuery;
};

이전 단계의 jQuery를 다시 작성할 수 없을 정도로 마법 같은 판단 방법입니다. 그래서 최신 jQuery 패키지가 어떤 모습인지 살펴봐야 했습니다. 그래서 2.1.1을 열어보니 많은 기능이 추가된 것 외에 기본적인 아이디어는 그대로 남아있습니다

코드 복사 코드는 다음과 같습니다.

(함수(글로벌, 팩토리) {

    if (모듈 유형 === "객체" && typeof module.exports === "객체") {
        module.exports = global.document ?
            공장(글로벌, 참) :
            함수(w) {
                if (!w.document) {
                    throw new Error("jQuery에는 문서가 있는 창이 필요합니다.");
                }
                공장반품(w);
        };
    } 그 밖의 {
        공장(글로벌);
    }

}(창 유형 !== "정의되지 않음" ? window : this, function(window, noGlobal) {
    var jQuery = 함수() {
        console.log('jQuery');
    };
    if (typeof 정의 === "함수" && 정의.amd) {
        정의("jquery", [], function() {
            jQuery를 반환합니다.
        });
    };
    strundefine = 정의되지 않은 유형;
    if (noGlobal 유형 === strundefine) {
        window.jQuery = window.$ = jQuery;
    };
    jQuery를 반환합니다.
}));

즐감하세요

复代码 代码如下:

모듈 유형="정의되지 않음"

所以上面的情况是针对于使用Node.js等的情况下判断的，这也表amjQueryEasy变得臃肿。

백본 封装

Backbone看了一下

复代码 代码如下:

(함수(루트, 팩토리) {

    if (typeof 정의 === 'function' && 정의.amd) {
        정의(['밑줄', 'jquery', '내보내기'], function(_, $, 내보내기) {
            root.Backbone = 공장(루트, 내보내기, _, $);
        });

    } else if (내보내기 유형 !== '정의되지 않음') {
        var _ = require('밑줄');
        공장(루트, 내보내기, _);

    } else {
        root.Backbone = Factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
    }

}(this, 함수(루트, 백본, _, $) {
    백본.$ = $;
    백본 반환;

}));

除了异步支持，也体现了其对于jQuery와 밑줄이 있는 依赖，百

复代码 代码如下:

        정의(['밑줄', 'jquery', '내보내기'], function(_, $, 내보내기) {
            root.Backbone = 공장(루트, 내보내기, _, $);
        });

表明backbone是原生支持requirejs가 있습니다.

밑줄 封装
于是，又看了看Underscore，发现这个库又·领了一个符号 _

复代码 代码如下:

(함수() {
var 루트 = this;
var _ = 함수(obj) {
(obj 인스턴스 오브 _)가 obj를 반환하는 경우;
(!(이 인스턴스의 _))가 새로운 _(obj)를 반환하는 경우;
This._wrapped = obj;
};

if (내보내기 유형 !== '정의되지 않음') {
If (모듈 유형 !== '정의되지 않음' && module.exports) {
내보내기 = module.exports = _;
}
수출._ = _;
} 그 밖의 {
루트._ = _;
}

if (정의 유형 === '함수' && 정의.amd) {
           정의('밑줄', [], function() {
              반품 _;
        });
}
}.call(this));

일반적으로 말하면, 마지막에 call() 메서드가 사용되는 것을 제외하면 거의 모두 익명 함수입니다.