1. 네임 스페이스 :
JS의 네임 스페이스는 객체의 속성을 사용하여 확장됩니다. 예를 들어, 사용자는 A 객체에 B 속성과 C 속성이있는 A 객체를 정의하고 B 속성 및 C 속성은 객체입니다. 따라서 a = {b : {}, c : c : {}}이면 사용자는 b 객체와 c 객체에서 동일한 메소드와 속성을 정의 할 수 있습니다. 따라서 B와 C는 다른 네임 스페이스에 속합니다. B 및 C 객체의 메소드를 호출 할 때 Ablike () 및 Aclike ()를 통해 호출 할 수 있습니다. 물론 A는 창 객체의 속성입니다.
그러나 예를 들어 상황이 있습니다. Boke.js 페이지는 jquery.js 및 prototype.js를 소개하고 (창 객체에 $ 속성을 추가 할 것임) 충돌이 발생합니다.
따라서 jquery.js에는 충돌을 처리하기 위해 noconflict ()가 있습니다. 실행 프로세스 :이 페이지는 먼저 프로토 타입을 소개합니다. 현재 프로토 타입은 창의 $ 속성을 차지합니다. 그런 다음 jQuery가 소개되면 JQuery는 이전 창의 $ 속성을 _ $에 저장 한 다음 $ 속성을 그 자체로 사용합니다. 현재 $를 통해 jQuery 메소드를 호출 할 수 있습니다. jQuery를 사용할 필요가 없지만 프로토 타입을 사용하려면 $ .noconflict ()를 호출하면 $가 프로토 타입 객체로 복원됩니다. 현재 $를 통해 프로토 타입 방법을 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
var _ $ = Window. $, _jQuery = Window.jQuery;
noconflict : function (deep) {
창. $ = _ $;
if (deep) window.jQuery = _jQuery;
jQuery를 반환하십시오. // return 값은 Chaojidan과 같은 다른 변수 이름에 값을 할당하여 Chaojidan을 통해 jQuery에서 메소드를 호출 할 수 있습니다.
}
2. 객체 확장 :
네임 스페이스 객체가있는 경우 기능을 확장해야합니다. 예를 들어 : 객체 A의 모든 속성과 메소드를 객체 B에 복사해야합니다. B 객체에 코드를 하나씩 쓸 필요가 없습니다.
코드 사본은 다음과 같습니다.
함수 믹스 (대상, 소스) {
var args = [] .slice.call (인수), i = 1,
iscover = Args의 타입 [args.length-1] == "부울"? args.pop () : true; // 작성되지 않고, 기본값은 true이고, 기본값은 재정의됩니다.
if (args.length == 1) {
Target =! this.window? 이것:{};
// 객체 매개 변수가 하나만 있으면이 객체를 확장하십시오. 예를 들면 : 믹스 (b) 호출 (b) 호출 객체 A의 맥락에서 이것은 현재 A이므로 B의 특성과 메소드가 객체 A에 추가됩니다. 그러나 믹스 (b)가 창에서 호출되면 B가 빈 객체에 추가 되어이 빈 객체에 추가되면이 비어있는 객체의 속성과 메소드와 동일한 이름의 동일한 이름의 추론 속성 및 메소드가 방지됩니다. (창 객체 만 창 속성이 있습니다)
i = 0;
}
while (source = args [i ++]) {
(소스의 키) {
if (iscover ||! (target in target)) // 덮어 쓰기가 직접 값을 할당하십시오. 덮어 쓰지 않으면 먼저 대상 객체에 키가 존재하는지 여부를 결정하십시오. 존재하면 값이 할당되지 않습니다.
{
대상 [키] = 소스 [키];
}
}
}
반환 대상;
}
대기업의 면접관은 어레이를 확인하는 것을 좋아합니다. 당신은 그것을 확인할 수 있습니다. 배열의 각 항목은 객체 일 수 있으며 객체 A와 객체 B가 동일한 속성과 방법을 갖는 경우에도 동일하지 않습니다. 123 및 "123"과 같은 문자열과 숫자는 온라인을 검색하여 완전히 찾을 수 있습니다.
3. 소취 :
브라우저에는 많은 클래스 배열 객체가 있으며, 인수, 문서. forms, document.links, form.elements, document.getElementsByTagName, ChildNodes 등 (htmlcollection, nodelist)이 있습니다.
특별한 글쓰기 스타일의 맞춤형 개체도 있습니다.
코드 사본은 다음과 같습니다.
var arraylike = {
0 : "A",
1 : "B",
길이 : 2
}
이 개체는 jQuery 객체로 작성되었습니다.
위에서 언급 한 클래스 배열 객체를 배열 객체로 변환해야합니다.
[] .slice.call 메소드를 해결할 수 있습니다. 그러나 이전 버전의 htmlcollection 및 elselist는 객체의 서브 클래스가 아니며 [] .slice.call 메소드를 사용할 수 없습니다.
따라서 슬라이스 방법을 무시할 수 있습니다.
코드 사본은 다음과 같습니다.
a.slice = window.dispatchevent? 함수 (노드, 시작, 끝) {return [] .slice.call (노드, 시작, 끝); }
// 창에 DispatchEvent 속성이있는 경우 [] .slice.call 메소드 및 능력 감지를 지원 함을 증명합니다.
: 함수 (노드, 시작, 끝) {
var ret = [], n = nodes.length;
if (end == undefined || typeof end === "number"&& isfinite (end)) {// && 우선 순위는 ||보다 높기 때문에 끝이 쓰지 않거나 끝이 유한 번호가되어 입력합니다.
start = parseint (시작, 10) || 0; // 시작이 존재하지 않거나 숫자가 아닌 경우 값은 0에 할당됩니다.
end = end == 정의되지 않았습니까? n : parseint (끝, 10); // 끝이 존재하지 않으면 값은 n입니다.
if (start <0) start + = n;
if (end <0) end + = n;
if (end> n) end = n;
for (var i = start; i <end; i ++) {
ret [i-start] = 노드 [i]; // 낮은 버전 IE는 배열 할당 양식을 사용합니다
}
}
반품 반환;
}
4. 판단 유형 :
JS에는 5 가지 간단한 데이터 유형이 있습니다 : NULL, 정의되지 않은, 부울, 번호, 문자열이 있습니다.
복잡한 데이터 유형도 있습니다 : 객체, 함수, Regexp, 날짜, 다음과 같은 사용자 정의 객체 : 사람 등.
Typeof는 일반적으로 부울, 숫자, 문자열, 인스턴스를 판단하는 데 사용됩니다. 일반적으로 객체 유형을 판단하는 데 사용됩니다. 그러나 그들은 모두 결함이 있습니다. 예를 들어, Fireme의 배열 인스턴스는 상위 창의 배열 인스턴스가 아니며 인스턴스를 호출하면 False가 반환됩니다. (이 질문은 360 캠퍼스 모집 중에 요청되었습니다). 새로운 부울 (true) // "객체"를 입력하고 물체를 감싸십시오. 부울, 숫자 및 문자열은 JS 고급 프로그램 프로그래밍에서 논의되는 세 가지 유형의 포장 객체입니다.
많은 사람들이 Typeof Document.all을 사용하여 IE인지 확인합니다. 사실, 이것은 매우 위험합니다. Google과 Firefox는이 속성도 좋아하기 때문에이 상황은 Google Chrome : Typeof Document.All // Undefined 그러나 Document.All.all.all.all.all // htmlallcollection에서 발생하지만 유형을 사용하여 정의되지 않았지만이 속성 값을 읽을 수 있습니다.
그러나 이제 object.prototype.tostring.call 메소드를 사용하여 유형을 결정할 수 있습니다. 이 메소드는 객체 내부에서 [[class]]를 직접 출력 할 수 있습니다. 그러나 IE8 이하의 윈도우 객체는이 방법을 사용할 수 없습니다. Window == Document // true document == Window // False IE6,7,8을 사용할 수 있습니다.
Nodetype (1 : 요소 2 : 속성 3 : 텍스트 텍스트 9 : 문서)
jQuery의 유형을 판단하는 방법 :
코드 사본은 다음과 같습니다.
class2type = {}
jQuery.each ( "부울 번호 문자열 함수 배열 날짜 regexp 객체".split ( ""), function (i, name) {
class2type [ "[Object" + name + "]"] = name.tolowercase ();
// class2type = { "[Object Boolean]": boolean, "[Object Number]": 숫자 "[개체 문자열]": String, "[Object 함수]": 함수, "[Object Array]": Array ......}
});
jquery.type = function (obj) {// obj가 null, undefined 등이 있다면 문자열 "null", "undefined". 그렇지 않은 경우, Tostring 메소드를 호출하여 호출 할 수 있는지 판단하고 가능하면 객체를 반환하십시오 (IE의 하단 버전의 Window, Dom 및 기타 ActiveXobject 개체).
return obj == null? 문자열 (obj) : class2type [tostring.call (obj)] || "물체";
}
5. 도식
JS가 DOM 노드를 작동 할 때는 페이지가 DOM 트리를 작성해야합니다. 따라서 Window.onload 방법이 일반적으로 사용됩니다. 그러나 모든 리소스가로드 된 후에는 온로드 방법이 실행되지 않습니다. 페이지가 사용자 작업에 더 빠르게 응답하기 위해서는 DOM 트리를 구축 한 후에 만 JS 작업 만 사용하면됩니다. 모든 리소스가로드되기를 기다리는 대신 (이미지, 플래시).
따라서 DomContentLoaded 이벤트가 발생하여 DOM 트리가 구축 된 후 트리거됩니다. 그러나 이전 버전의 IE는이를 지원하지 않으므로 해킹이 있습니다.
코드 사본은 다음과 같습니다.
if (document.readystate === "complete") {// js 파일이 DOM 문서가로드 된 후에 만로드 된 경우. 현재 FN 메소드 (실행하려는 메소드)는이 판단을 통해 실행됩니다. 문서가로드 된 후 문서의 값이 완료되었습니다.
settimeout (fn); // 비동기 적으로 실행하고 뒤에있는 코드를 먼저 실행하도록합니다. 이것은 jQuery의 사용법입니다. 이해할 필요가 없습니다.
}
else if (document.adeventListener) {// domContentLoaded 이벤트를 지원합니다
document.addeventListener ( "domcontentloaded", fn, false); // 거품
window.addeventListener ( "load", fn, false); // DOM 트리가 구축 된 후 JS 파일이로드 된 경우. 이번에는 DomContentLoaded 이벤트가 트리거되지 않습니다 (트리거가 완료되었습니다).로드 이벤트 만 트리거됩니다.
}
또 다른{
document.attachevent ( "OnreadyStateChange", function () {// 즉, Iframes의 보안에 대해서는 Onload Execution이 우선 순위가 부여되며 때로는 그렇지 않습니다.
if (document.readystate === "완료") {
fn ();
}
});
window.attachevent ( "Onload", fn); // 다른 청취 이벤트가 검색되지 않은 경우 항상 역할을 수행하므로 최소한 FN 메소드가 Onload 이벤트에 의해 트리거 될 수 있습니다.
var top = false; // iframe에 있는지 확인
try {// window.frameElement는이 페이지가 포함 된 iframe 또는 프레임 객체입니다. 그렇지 않다면, 그것은 null입니다.
top = window.frameElement == null && document.documentElement;
} catch (e) {}
if (top && top.doscroll) {// iframe이 없으면 IE입니다.
(함수 doscrollCheck () {
노력하다{
top.doscroll ( "왼쪽"); // 즉, 돔 트리가 만들어지면 html의 doscroll 메소드를 호출 할 수 있습니다.
} catch (e) {
반환 설정 타임 아웃 (DoscrollCheck, 50); // 아직 구축되지 않은 경우 계속 듣습니다.
}
fn ();
})
}
}
FN 방법에는 모든 바인딩 이벤트를 제거해야합니다.
물론, 즉, 스크립트 연기 해킹을 사용할 수도 있습니다. 원리는 다음과 같습니다. 연기로 지정된 스크립트는 DOM 트리가 구축 된 후에 만 실행됩니다. 그러나 추가 JS 파일을 추가해야하며 별도의 라이브러리에서는 거의 사용되지 않습니다.
사용 원리 : 문서에 스크립트 태그를 추가하고 script.src = "xxx.js"를 사용하여 스크립트의 onreadyStateChange 이벤트를 들으십시오. 님이 readystate == "완료"인 경우 FN 메소드가 실행됩니다.
다시 말해, DOM이 구축 된 후에 만 xxx.js가 실행되며, 이는 완전해질 것입니다.
위의 것은 JavaScript 프레임 워크 디자인의 첫 번째 장에 대한 읽기 노트입니다. 콘텐츠는 비교적 간단하므로 모든 사람 이이 장의 기본 내용을보다 쉽게 이해할 수 있습니다.