jQuery 원본 읽기 노트

7442 단어
익명 함수 실행:
  • 일반 형식: (function () ();
  • 설명: 포위 함수 (function () {}) 의 첫 번째 괄호는 스크립트에 이름이 없는 함수를 되돌려주고, 그 다음에 빈 괄호는 이름이 없는 함수를 되돌려줍니다. 괄호 안에 익명 함수의 매개 변수가 있습니다.
  • 작용: 명명 공간을 만들 수 있습니다. 자신의 모든 코드를 이 특수한 함수 패키지에 쓰기만 하면 외부에 접근할 수 없습니다. (변수 앞에 윈도우를 추가하면 이 함수나 변수가 전역이 됩니다.)
  • 기타 쓰기
  • (function(){// 
        ...
    })(); 
    
    ( function(){// 2
        ...
    }() );
    
    !function(){// 3
        ...
    }();
    (function(window,undefined){
        var jQuery = (function(){
            ...
        })();
        window.jQuery = window.$ = jQuery;
    })(window);
  • jQuery의 모든 코드는 즉시 실행되는 익명 함수 표현식에 싸여 있습니다. jQuery 파일을 불러오면 익명 함수를 호출하면 바로 실행되고 jQuery의 각 모듈을 초기화합니다.
  • 익명 함수를 만들어서 특수한 작용역을 만듭니다. 이 작용역의 코드는 기존의 동명 함수, 방법과 변수, 제3자 라이브러리와 충돌하지 않습니다.
  • 방법의 마지막 수동으로 변수 jQuery를 윈도우 대상에 추가하여 변수 jQuery를 공개된 전역 변수로 명확하게 하고 다른 부분은 개인적인 것이다.

  • 왜 윈도우즈에 전송해야 하는지 윈도우즈 대상을 전송함으로써 윈도우즈 대상을 국부 변수로 변경할 수 있습니다. 이렇게 하면 JQ 코드 블록에서 윈도우즈 대상에 접근할 때 역할역을 맨 위 역할역으로 되돌릴 필요가 없기 때문에 윈도우즈에 더욱 편리하게 접근할 수 있습니다.그리고 이렇게 하면 코드가 압축될 때 최적화할 수 있다.
    매개 변수undefined 1을 설정하는 이유특수값undefined는 윈도우 대상의 속성으로 국부 변수로 사용하면 undefined를 찾을 때의 작용역 체인을 단축할 수 있다.2. 코드를 압축할 때 최적화할 수 있다.3. 매개 변수undefined의 값이 다시 바뀌지 않도록 합니다.
  • undefined ='hahah'를 통과할 수 있다.undefined의 값을 바꾸지만 브라우저에 따라alert(undefined)의 결과가 다릅니다.
  • alert(“undefined” in window); 득true
  • 익명 함수의 마지막 번호를 호출하는 것을 주의하십시오.JS의 경우 문장이 각각 다른 줄에 배치되면 세미콜론;선택할 수 있지만, 익명 함수를 호출하는 데 있어서, 이전이나 이후에 번호를 생략하면 문법 오류를 일으킬 수 있다.
    구조 함수 jQuery () 에는 다음과 같은 7가지 방법이 있습니다.
    1.jQuery(selector [,context])는 CSS 선택기 표현식과 선택적 선택기 상하문을 받아들여 일치하는 DOM 요소가 포함된 jQuery 객체를 반환합니다.
    $('div.foo').click(function(){
      $('span',this).addClass('bar');
    })
     span this , span bar

    2.jQuery(html [,ownerDocument], jQuery(html,props))는 제공된 HTML 코드로 DOM 요소를 만듭니다.
    $('

    My new text

    '
    ).appendTo('body'); document.createElement() DOM ; , innerHTML DOM 。 div , , click , body , , test: $("
    ",{ "class":"test", text:"Click me!", click:function(){ $(this).toggleClass("test"); } }).appendTo("body");

    3.jQuery( element ),jQuery( elementArray )封装DOM元素为JQ对象

    this DOM JQ , JQ jQuery 。
    $('div.foo').click(function(){
        $(this).slideUp();
    });
     $(this) div JQ , slideUp() div 。

    4.jQuery(object) 일반 객체는 JQ 객체로 봉인됨
     JS 。
    var foo = { foo:'bar',hello:'world' };// JS 
    var $foo = $(foo); // JQ 
    $foo.on('custom',function(){
        console.log('custom event was called');
    });// 
    $foo.trigger('custom');// 

    5.jQuery(callback) 귀속ready 이벤트 감청 함수, DOM 구조 로드가 완료되면 실행
    ready 이벤트는 브라우저 원본 이벤트가 아니라 DOMContentLoaded 이벤트, onreadystatechange 이벤트와 함수 doScrollCheck()의 통칭입니다.
    6. jQuery(jQuery object)는 jQuery 대상을 받아들여 이 JQ 대상의 복사본을 되돌려줍니다.
    전송된 JQ 객체와 동일한 DOM 요소를 참조하는 복사본
    7.jQuery() 빈 JQ 객체 만들기
    이 기능은 JQ 대상을 복용하는 데 사용할 수 있다.예를 들어 빈 JQ 대상을 만들고 필요할 때 요소를 수동으로 수정한 다음 JQ 방법을 호출하여 JQ 대상을 반복적으로 만들지 않도록 한다.
    JQ 대상 모듈의 전체 원본 구조 구성
    (function(window,undefined){
    
        // JQ 
        var jQuery = (function(){
            var jQuery = function(selector,context){
                return new jQuery.fn.init(selector,context,rootjQuery);
            },
            // 
            jQuery.fn = jQuery.prototype = {
                constructor:jQuery,
                init:function(selector,context,rootjQuery){...},
                // 
            };
            jQuery.fn.init.prototype = jQuery.fn;
            jQuery.extend = jQuery.fn.extend = function(){...};
            jQuery.extend({
                // 
            });
            return jQuery;
        })();
    
        window.jQuery = window.$ = jQuery;
    })(window);
    

    구조 함수 내용에 연산자 new를 사용하여 다른 구조 함수 실례를 만들고 되돌려줍니다
    일반적으로 우리가 대상이나 실례를 만드는 방법은 연산자 new 뒤에 구조 함수를 따라가는 것이다.단, 구조 함수에 반환 값이 있으면, 연산자 new가 만든 대상은 버려지고, 반환 값은 new 표현식의 값이 됩니다.JQ는 구조 함수 jQuery () 내부에서 연산자 new로 다른 구조 함수의 실례를 만들고 되돌려줍니다. 구조 함수 jQuery () 앞의 연산자 new를 생략합니다. 즉, 우리가 jQuery 대상을 만들 때 연산자 new를 생략하고 jQuery () 를 직접 쓸 수 있습니다.
    jQuery.fn = jQuery.prototype?
    jQuery를 설정합니다.fn은 구조 함수 jQuery () 의 원형 객체 jQuery를 가리킵니다.prototype.jQuery.fn은 jQuery입니다.prototype의 약자
    계속 업데이트 중...

    좋은 웹페이지 즐겨찾기