jQuery.clean 사용 방법 및 ideas_jquery 분석

1. jQuery.clean 사용법
jQuery.clean(elems, context,fragment,scripts);
2. 아이디어 분석
1 . 매개변수 컨텍스트를 처리하고 문서 루트 노드 문서인지 확인합니다
2. 매개변수 elems 배열 처리(배열 순환)
2.1 elem은 숫자이므로 문자열로 변환합니다
2.2 . elem은 잘못된 값입니다. 두 번째 루프
2.3. elem은 문자열입니다.
2.4. 문자열에 엔터티 번호나 html 태그가 없으면 텍스트 노드를 만듭니다.
2.5. 문자열은 엔터티 번호 또는 html 태그입니다.

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

div 요소를 생성하여 문서 조각에 삽입
xhtml 스타일 태그 처리
elem을 래핑하고 래핑된 문자열을 div의 innerHTML로 사용
래핑 깊이가 1보다 큰 경우 첫 번째 요소만 래핑 요소 레이어는 남습니다.
ie6 및 7의 빈 테이블 태그에 자동으로 추가된 tbody를 지웁니다.
IE9 이하 브라우저에서 제거되는 시작 부분의 빈 문자열을 div의 첫 번째 텍스트 하위 노드로 사용합니다. 요소
elem을 div(nodeList 객체)의 하위 노드 컬렉션에 재할당합니다.
이번에 제거 루프의 문서 조각에 있는 div는 다음 루프에서 깨끗한 div 요소를 유지합니다.

2.3. elem이 텍스트 노드인 경우 ret 배열에 직접 추가하여 반환하고, 그렇지 않으면 elem(nodeList Object)을 배열에 병합합니다
　2.4. IE6 및 7에서 선택 상태(체크됨)가 나타나는 버그를 수정합니다. ) 라디오 유형 및 체크박스 유형의 노드가 유효하지 않습니다
3. 매개변수 조각 처리
　3.1.ret의 각 노드는 문서 조각 조각에 추가됩니다
3.2. ret 배열에 추가합니다. 추가된 스크립트 위치는 원래 상위 요소 위치 뒤에 있습니다.
4. ret 배열로 돌아갑니다
3. 소스 코드 주석 분석
1. 및 함수에 사용되는 함수

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

var nodeNames = "abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|Figure|footer|"
         "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
     WrapMap = {
         옵션: [ 1, "", "" ],
         범례: [ 1, "

", "

" ],
         thead: [ 1, "", "" ],
         tr: [ 2, "", "" ],
         td: [ 3, "", "" ],
         col: [ 2, "", "" ],
         지역: [ 1, "" ],
         _default: [ 0, "", "" ]
     },
     rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta| param)(([w:] )[^>]*)/>/gi,
     rtagName = /<([w:] )/,
     rtbody = /     rhtml = /<|&#?w ;/,
     rleadingWhitespace = /^s /,
     rcheckableType = /^(?:checkbox|radio)$/,
     rscriptType = // (java|ecma)script/i;
 // 设置复选框checkbox或单选框radio表单态
 function fixDefaultChecked( elem ) {
     if ( rcheckableType.test( elem. type ) ) {
         elem.defaultChecked = elem.checked;
     }
 }
 // 创建一个안전한 文档碎文
 function createSafeFragment( document ) {
     var list = nodeNames .split( "|" ),
     safeFrag = document.createDocumentFragment(); // ie6,7,8浏览器把safeFrage작성HTMLDocument类型
     // 针对ie9以下浏览器
     if ( safeFrag.createElement ) {
         while ( list.length )          safeFrag.createElement (
                list.pop()
             );
         }
     }
     return safeFrag;
 }
 //功能
 // 该函数API：http://www.css88.com/jqapi-1.8/#p=jQuery.grep
 jQuery.extend({
     grep: function( elems, callback, inv ) {
         var retVal ,
             ret = [],
             i = 0,
             length = elems.length;
         inv = !!inv;
         // 배열을 탐색하고 항목만 저장
         // 유효성 검사기 함수를 전달합니다
         for ( ; i < length; i ) {
             retVal = !!callback( elems[ i ], i );
             if ( inv !== retVal ) {
                ret.push( elems[ i ] );
             }
        }
         return ret;
     }             > });


2、源码分析

复代码 代码如下:

jQuery.extend({
clean: function( elems, context,fragment, scripts ) {
// 변수 선언
var i, j, elem, tag, Wrap, Depth, ; ( !context || typeof context.createDocumentFragment === "정의되지 않음" ) {
                                                                               0; (elem = elems[i]) != null; i ) {
                // elem이 숫자인 경우 변환 문자열로 변환 🎜>              elem = "";                                                          계속;
}
// HTML 문자열을 DOM 노드로 변환
// 배열 항목(문자열)을 DOM 노드로 변환
if ( typeof elem = == "string" ) {
텍스트 노드
if ( !rhtml.test( elem ) ) {
elem = context.createTextNode( elem );

                                                                                                                          . ie9 아래의 #document-fragment 유형입니다. 브라우저에서 safe는 HTMLDocument 유형 노드이고 nodeNames 배열은 비어 있습니다.      div = context.createElement("div");
                                                               열,삽입 ,hr, img, input, link, Meta, param의 레이블 외에
// 레이블의 시작과 끝을 나타내는 레이블의 레이블
elem = ELEPLACE (rxhtmltag, "& lt; $ 1 & gt; ");
                                                               | ) | ["", ""] )[1].toLowerCase();
                                                                                                                                                        _기본값;
깊이 = Wrap[0];
div.innerHTML = Wrap[1] elem Wrap[2];
// 오른쪽 깊이로 이동
                                                        1. 가장 가까운 소포 요소의 값을 재할당하는 DIV( 즉, 소포 요소의 첫 번째 레이어 포함)
While (깊이--) {
DIV = DIV.LastChild
}}
                                                                                                    if ( ! jQuery.support.tbody ) {
                       // 문자열은 이므로 *아마도 가짜(伪造的)
                       // 判断符串中是否拥유 공tbody标签
hasBody = rtbody.test(elem);
// 가장 바깥쪽 레이블이 테이블이고 tbody가 테이블에 수동으로 추가되지 않은 경우
🎜> tbody = tag === "table" && !hasBody ?
div.firstChild && div.firstChild.childNodes:
// 문자열은 또는
입니다.                               / 빈 THEAD 또는 TFOOT 태그가 하나만 있는 경우 문자열
// 변수 tBody는 div.childNodes " && !hasBody ?
                                               for ( j = tbody.length - 1; j >= 0 ; --j ) {
tfoot 태그
if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
빈 테이블 태그 자동 지우기 Joined tbody
tbody [ j ].parentNode.removeChild( tbody [ j ];
                                                             
                                                                       // IE는 innerHTML이 사용될 때 선행 공백을 완전히 제거합니다. ~                       >           } // 처리된 DIV 하위 노드 컬렉션 가져오기(Nodelist)
Elem = DIV.CHILDNODES
// 가져오기; 조각 컨테이너(매번 새로운 DIV가 필요함)
// 다음에 문자열 배열 항목을 반복하기 전에 생성된 div 요소를 지웁니다
div.parentNode.removeChild(div);
// elem이 다음과 같은 경우 DOM 노드(텍스트 노드)
if ( elem.nodeType ) {
ret.push( elem );
}
// nodeList 객체의 노드를 반환된 배열에 병합
else {
                                                                                                         > > ~                                           // 재설정 defaultChecked 모든 라디오 및 체크박스에 대해 단일 버튼을 다른 태그에 삽입한 후 선택한 상태가 실패합니다(다음 코드 이 버그 수정)
if (!Jquery.support.appendchecked) {
for (i = 0; (elem = 0; (elem = 0; (elem = 0; ret[i])) != null; i ) {
                                                                                                      elem.getElementsByTagName != = "정의되지 않음" ) {
                                                           ~          }
// 제공된 문서 조각에 요소 추가
// ret 배열의 각 DOM 노드를 제공된 문서 조각에 삽입
// dom 노드에서 스크립트 노드를 추출하여 ret 배열에 추가 , 위치는 원래 상위 요소의 인덱스 위치 뒤에 있습니다.
if (fragment ) {
// 각 스크립트 요소의 특수 처리
handlerScript = function( elem ) {
// 우리가 실행 가능한 것으로 간주하세요
// ELEM 요소가 존재하지 않거나 Type 값이 JavaScript 또는 ECMAScript인 경우
if (! Elem.type || RScripttype.test (elem.type)) {
// IPT를 분리하고 스크립트 배열(제공된 경우) 또는 조각에 저장합니다
// 처리되었음을 나타내기 위해 진실을 반환합니다
스크립트 반환 ?
scripts.parent Node?elem.parentNode .removeChild ( elem ) : elem ) :
                                     fragment.appendChild(                             = ret[i]) != null; {
                                                                                                                                                     포함된 스크립트 처리
// 문서 조각에 요소 요소를 추가하고 포함된 스크립트를 처리합니다. (스크립트 태그 요소)
fragment.appendChild( elem );
if ( typeof elem.getElement sByTagName !== "undefine ") {> // Handlescript Dom을 변경하므로 jquery.merge를 사용하여 enterSure를 사용하세요. 스냅샷 반복
jstags = jquery.grep (jQuery.merge ([], Elem.GetelementsBytagnam e ("script")), Handlescript) ;
                                                         // 스크립트를 상위 항목 다음에 ret로 연결하고 색인을 그 이상으로 발전시킵니다. ret.splice.apply ( ret, [i 1, 0].concat( jsTags ) );
             }
         }
         return ret;
     }
 });

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：jQuery.buildFragment 사용 방법 및 ideas_jquery 분석다음 기사：jQuery.buildFragment 사용 방법 및 ideas_jquery 분석

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved