JavaScript 프레임워크 디자인 읽기 노트 시드 module_javascript 기술

1. 네임스페이스 :

js의 네임스페이스는 객체의 속성을 사용하여 확장됩니다. 예를 들어, 사용자가 A 객체를 정의하면 B 속성과 C 속성이 동시에 객체가 됩니다. 따라서 A={B:{},C:{}}이면 사용자는 B 객체와 C 객체에서 동일한 메서드와 속성을 정의할 수 있습니다. 따라서 B와 C는 서로 다른 네임스페이스에 속합니다. 객체 B와 C의 메소드를 호출할 때 A.B.like() 및 A.C.like()를 통해 호출할 수 있습니다. 물론 A는 창 개체의 속성에 속합니다.

그러나 다음과 같은 상황이 있습니다. 예를 들어 boke.jsp 페이지에 jquery.js 및 프로토타입.js가 도입되면(창 객체에 $ 속성이 추가됨) 충돌이 발생합니다.

따라서 jquery.js에는 충돌을 처리하기 위한 noContribute()가 있습니다. 실행 프로세스: 페이지에서는 먼저 프로토타입을 소개합니다. 이 때 프로토타입은 window의 $ 속성을 차지합니다. 그런 다음 jquery가 도입되면 jquery는 이전 창의 $ 속성을 _$에 저장한 다음 $ 속성 자체를 사용합니다. 이때 $를 통해 jquery 메소드를 호출할 수 있습니다. 지금은 jquery를 사용할 필요가 없지만 프로토타입을 사용하고 싶은 경우 $.noContric()을 호출하면 $가 프로토타입 객체로 복원됩니다. 이때 $를 통해 프로토타입 방식을 사용할 수 있습니다.

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

var _$ = window.$, _jQuery= window.jQuery
noConflect:기능(깊은){
                창.$ = _$;
   if(deep) window.jQuery = _jQuery;
                                  jQuery를 반환합니다.
}

2. 객체 확장 :

이제 네임스페이스 개체가 있으므로 기능을 확장해야 합니다. 예: 개체 A의 모든 속성과 메서드를 개체 B에 복사해야 합니다. B 객체에 코드를 하나씩 작성할 필요가 없습니다.

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

함수 혼합(타겟, 소스){
var args = [].slice.call(인수),i=1,
IScover = Typeof ARGS [ARGS.Length-] == "Boolean"? Args.pop (): True; // 쓰지 않습니다. 기본값은 true이며 기본값은 적용됩니다.
if(args.length == 1){                                       대상 = !this.window? 이:{};
//객체 매개변수가 하나만 있는 경우 이 객체를 확장합니다. 예를 들어 A 객체의 컨텍스트에서 mix(B)를 호출하면 이것이 A이므로 B의 속성과 메서드가 A 객체에 추가됩니다. 그러나 window에서 mix(B)가 호출되면 B 객체의 속성과 메서드가 빈 객체에 추가되고, window 객체에서 동일한 이름을 가진 속성과 메서드를 덮어쓰는 것을 방지하기 위해 빈 객체가 반환됩니다. (window 객체에만 window 속성이 있습니다)
나는 =0;
}
​while((소스 = args[i ])){
　　for(소스 키){
If (iSCOVER ||! (Key in target) // 덮여 있으면 바로 할당됩니다. 덮지 않으면 먼저 대상 객체에 키가 있는지 확인하고, 존재하면 할당하지 않습니다. 가치
　　  {
　　　　　대상[키] = 소스[키];
                      }
           }
}
복귀대상;
}

대기업 면접관들이 배열의 중복 검사에 관해 질문하는 것을 좋아합니다. 배열의 각 항목은 객체가 될 수 있으며 객체 A와 객체 B가 동일한 속성과 메서드를 가지고 있어도 그렇지 않습니다. 동일한. 123, "123" 등과 같은 문자열과 숫자는 온라인에서 검색하여 완전한 방법을 찾을 수 있습니다.

3. 배열 :

브라우저 아래에는 인수, document.forms, document.links, form.elements, document.getElementsByTagName, childNodes 등(HTMLCollection, NodeList)과 같은 배열과 유사한 객체가 많이 있습니다.

특별한 방법으로 작성된 커스텀 개체도 있습니다

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

var arrayLike = {
​​ 0:"a",
1:"b",
길이:2
}

이 객체가 작성되는 방식은 jQuery 객체가 작성되는 방식과 같습니다.

위의 배열 유사 객체를 배열 객체로 변환해야 합니다.

[].slice.call 메소드를 사용하면 이 문제를 해결할 수 있습니다. 그러나 이전 IE 버전의 HTMLCollection과 NodeList는 Object의 하위 클래스가 아니므로 [].slice.call 메서드를 사용할 수 없습니다.

그래서 우리는 슬라이스 메소드를 재정의할 수 있습니다.

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

A.slice = window.dispatchEvent ? function(nodes,start,end){ return [].slice.call(nodes,start,end) }
//창에 dispatchEvent 속성이 있으면 [].slice.call 메서드와 기능 감지를 지원함을 증명합니다.
:함수(노드,시작,끝){
                      var ret = [],n=nodes.length;
​​​​ Start = PARSEINT (Start, 10) || 0; // 시작이 존재하지 않거나 숫자가 아닌 경우 0이 할당됩니다.
| 　　　　　if(start < 0) 　　 start = n;
　　　　if(end<0) end = n;
　　　　if(end>n) end = n;
　　　　　for(var i = start;i RET [I-Start] = NODES [i] // 낮은 버전의 IE는 배열 할당 형식을 사용합니다
~ ~              　　　　}
　　　　return ret;
}

4. 유형 판단 :

　js의 5가지 단순 데이터 유형은 null, 정의되지 않음, 부울, 숫자 및 문자열입니다.

객체, 함수, RegExp, 날짜, 개인과 같은 사용자 정의 객체 등 복잡한 데이터 유형도 있습니다.

Typeof는 일반적으로 부울, 숫자, 문자열을 결정하는 데 사용되며, 인스턴스of는 일반적으로 객체 유형을 결정하는 데 사용됩니다. 그러나 그들은 모두 결함이 있습니다. 예를 들어, firame의 배열 인스턴스는 상위 창의 배열 인스턴스가 아니며, instanceof를 호출하면 false가 반환됩니다. (이 질문은 360학교 모집때 받은 질문입니다.) typeof new Boolean(true) // "object" , 패키징 객체. js 고급 프로그래밍에서 논의되는 부울, 숫자 및 문자열의 세 가지 패키징 개체가 있습니다.

많은 사람들이 IE인지 확인하기 위해 typeof document.all을 사용합니다. 사실 이는 매우 위험합니다. Google과 Firefox도 이 속성을 좋아하기 때문에 Google Chrome에서는 이런 상황이 발생합니다. typeof document.all // 정의되지 않음 , document.all //HTMLAllCollection, typeof에 의해 정의되지 않은 것으로 판단되지만 이 속성 값은 읽을 수 있습니다.

하지만 이제 Object.prototype.toString.call 메소드를 사용하여 유형을 결정할 수 있습니다. 이 메소드는 객체 내부에 [[클래스]]를 직접 출력할 수 있습니다. 단, IE8 이하에서는 윈도우 객체에 대해서는 이 메소드를 사용할 수 없습니다. IE6,7,8에서는 window == document // true document == window // false를 사용할 수 있습니다.

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 ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object 　　Array ]":array . .....}
　　});
jQuery.type = function(obj){ //obj가 null이거나 정의되지 않은 경우 문자열 "null", "undefine"을 반환합니다. 그렇지 않은 경우 toString 메소드를 호출하여 호출 가능 여부를 판단한 후 객체(IE 하위 버전에서는 window 및 Dom과 같은 ActiveXobject 객체)를 반환합니다.
return obj == null ? String(obj) : class2type [ toString.call(obj) ] || "객체";
}

5.domReady

js가 dom 노드를 작동할 때 페이지는 dom 트리를 구축해야 합니다. 따라서 일반적으로 window.onload 메서드를 사용합니다. 그러나 onload 메소드는 모든 리소스가 로드될 때까지 실행되지 않습니다. 페이지가 사용자 작업에 더 빠르게 응답하도록 하려면 DOM 트리가 구성된 후에 js 작업만 사용하면 됩니다. 모든 리소스(사진, 플래시)가 로드될 때까지 기다릴 필요가 없습니다.

따라서 Dom 트리가 빌드된 후 트리거되는 DOMContentLoaded 이벤트가 나타납니다. 하지만 이전 버전의 IE에서는 이를 지원하지 않기 때문에 해킹이 발생합니다.

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

if(document.readyState === "complete"){ //Dom 문서가 로드된 후에야 js 파일이 로드되는 경우입니다. 이때, 이 판단을 통해 fn 메소드(실행하려는 메소드)가 실행됩니다. 문서가 로드된 후에는 document.readyState의 값이 완료되기 때문입니다
>                  setTimeout(fn);    jQuery의 사용법은 다음과 같습니다. 이해할 필요는 없습니다.
}
else if(document.addEventListener){//DOMContentLoaded 이벤트 지원
              document.addEventListener("DOMContentLoaded",fn,false) // 버블
window.addEventListener("load",fn,false); //DOM 트리가 빌드된 후 js 파일이 로드되는 경우입니다. 이때 DOMContentLoaded 이벤트는 트리거되지 않고(트리거됨) 로드 이벤트
만 트리거됩니다. }
그렇지 않으면{
document.attachEvent("onreadystatechange",function(){//IE에서 iframe 보안을 위해 onload 실행에 우선순위가 부여되는 경우도 있고 그렇지 않은 경우도 있습니다.
　　if(document.readyState ==="완료"){
　　　fn();
　　}
});
window.attachEvent("onload",fn); //다른 모니터링 이벤트가 발생하지 않는 경우에도 항상 작동하므로 최소한 onload 이벤트를 통해 fn 메서드가 트리거될 수 있습니다.
var top = false;//iframe에 있는지 확인
Try{//window.frameElement는 이 페이지를 포함하는 iframe 또는 프레임 개체입니다. 그렇지 않은 경우 null입니다.
              top = window.frameElement == null && document.documentElement;
}잡기(e){}
If(top && top.doScroll){ //iframe이 없고 IE인 경우
(함수 doScrollCheck(){
                  시도해 보세요{
　　　　top.doScroll("left");//IE에서 Dom 트리가 생성되면 html의 doScroll 메소드를 호출할 수 있습니다　　　
　　　　}잡다(e){
Return settimeout (doscrollcheck, 50); // 빌드되지 않은 경우 계속해서 들어보세요
                 }
                                  fn();
             })
}
}

fn 메소드에는 바인딩된 모든 이벤트 제거가 포함되어야 합니다.

물론 IE에서는 스크립트 연기 해킹을 사용할 수도 있습니다. 원칙은 연기가 지정된 스크립트는 DOM 트리가 구축될 때까지 실행되지 않는다는 것입니다. 하지만 이를 위해서는 별도의 라이브러리에서 거의 사용되지 않는 추가 js 파일을 추가해야 합니다.

사용 원리: 문서에 스크립트 태그를 추가하고 script.src = "xxx.js"를 사용하여 스크립트의 onreadystatechange 이벤트를 수신합니다. this.readyState == "complete"인 경우 fn 메서드를 실행합니다.

즉, DOM이 빌드된 후 xxx.js가 실행되고 해당 this.readyState가 완료됩니다.

위 내용은 JavaScript 프레임워크 디자인의 첫 번째 장에 대한 읽기 노트입니다. 내용이 비교적 간결하여 누구나 이 장의 기본 내용을 더 잘 이해할 수 있습니다.