한동안 혼란스러워서 마침내 실마리를 얻었습니다. 대략 :
코드 사본은 다음과 같습니다.
자체도 익명 함수를 만들고 매개 변수 창을 설계하고 창 객체에 전달하십시오.
이 과정의 목적은
코드 사본은 다음과 같습니다.
다른 코드로 오염되지 않은 자신의 코드를 만들고 동시에 다른 코드를 오염시킬 수 없습니다.
jQuery 캡슐화
그래서 이전 버전의 jQuery를 찾았고 버전 번호의 캡슐화 코드는 1.7.1입니다.
코드 사본은 다음과 같습니다.
(함수 (창, 정의되지 않은) {
var jquery = (function () {console.log ( 'hello');});
Window.jQuery = Window. $ = jQuery;
if (typeof define === "function"&& define.amd && define.amd.jquery) {
정의 ( "jQuery", [], function () {return JQuery;});
}
})( 창문 );
그중
코드 사본은 다음과 같습니다.
Console.log ( 'Hello');
처음에 언급 된대로 작동하는지 확인하는 데 사용되므로 Window에서 jQuery를 호출 할 수 있습니다.
코드 사본은 다음과 같습니다.
창. $
또는
코드 사본은 다음과 같습니다.
Window.jQuery
따라서 비슷한 패키지를 만들 수 있습니다
코드 사본은 다음과 같습니다.
(함수 (창, 정의되지 않은) {
var ph = function () {
}
})(창문)
위에 비해 두 단계 만 누락되었습니다.
1. jQuery의 기호와 글로벌 호출을 정의합니다
2. 비동기 지원
그래서 나는 초기 jQuery 캡슐화를 발견했는데, 이것은 방법 측면에서 거의 동일했습니다. .
코드 사본은 다음과 같습니다.
if (typeof window.jquery == "undefined") {
var jQuery = function () {};
if (typeof $! = "undefined")
jQuery ._ $ = $;
var $ = jQuery;
};
우리가 이전 단계 jQuery를 다시 작성할 수 없을 정도로 마법입니다. 그래서 최신 jQuery 캡슐화의 모습을보아야했습니다. 그래서 나는 2.1.1을 열었고 많은 기능을 추가하는 것을 제외하고는 내 아이디어가 기본적으로 변하지 않는다는 것을 발견했습니다.
코드 사본은 다음과 같습니다.
(기능 (글로벌, 공장) {
if (typeof module === "object"&& typeof module.exports === "객체") {
module.exports = global.document?
공장 (Global, True) :
함수 (w) {
if (! w.document) {
새 오류를 던지십시오 ( "jQuery는 문서가있는 창이 필요합니다");
}
반품 공장 (W);
};
} 또 다른 {
공장 (글로벌);
}
} (typeof window! == "undefined"? window : this, function (창, noglobal) {
var jQuery = function () {
Console.log ( 'jQuery');
};
if (typeof define === "function"&& define.amd) {
정의 ( "jQuery", [], function () {
jQuery를 반환하십시오.
});
};
strundefined = 정의되지 않은 유형;
if (noglobal의 타입 === strundefined) {
Window.jQuery = Window. $ = jQuery;
};
jQuery를 반환하십시오.
});
브라우저를 사용할 때
코드 사본은 다음과 같습니다.
유형 모듈 = "정의되지 않은"
따라서 위의 상황은 node.js 등을 사용할 때 판단되며 jQuery가 부풀어 오르고 있음을 나타냅니다.
백본 패키지
백본을 열고 확인하십시오
코드 사본은 다음과 같습니다.
(기능 (루트, 공장) {
if (typeof define === 'function'&& define.amd) {
define ([ '밑줄', 'jQuery', 'Exports'], function (_, $, 내보내기) {
root.backbone = Factory (Root, Exports, _, $);
});
} else if (typeof export! == 'undefined') {
var _ = 요구 사항 ( '밑줄');
공장 (루트, 수출, _);
} 또 다른 {
root.backbone = factory (root, {}, root._, (root.jquery || root.zepto || root.ender || root. $));
}
} (this, function (루트, 백본, _, $) {
백본. $ = $;
백본 반환;
});
비동기 지원 외에도 jQuery 및 밑줄에 대한 의존도를 반영합니다.
코드 사본은 다음과 같습니다.
define ([ '밑줄', 'jQuery', 'Exports'], function (_, $, 내보내기) {
root.backbone = Factory (Root, Exports, _, $);
});
백본은 요구 사항에 의해 기본적으로 지원되었음을 나타냅니다.
밑줄 패키지
그래서 나는 밑줄을 다시 보았고이 라이브러리가 또 다른 상징을 차지했다는 것을 알았습니다.
코드 사본은 다음과 같습니다.
(기능() {
var root = this;
var _ = 함수 (obj) {
if (obj instanceof _) return obj;
if (! (이 인스턴스 _)) new _ (obj)를 반환합니다.
this._wrapped = obj;
};
if (typeof exports! == 'undefined') {
if (typeof module! == 'undefined'&& module.exports) {
Exports = module.exports = _;
}
내보내기 ._ = _;
} 또 다른 {
root._ = _;
}
if (typeof define === 'function'&& define.amd) {
define ( 'oundscore', [], function () {
반품 _;
});
}
} .call (this));
전반적으로, 그것들은 Call () 메소드가 결국 사용된다는 것을 제외하고는 거의 익명의 기능입니다.