태그가 아닌 텍스트 노드 만 만든 것처럼 보입니다. 그러나 동시에, jQuery는 어떻게 든 그렇게 할 수있었습니다. 문제는 HTML 요소를 포함하는 문자열이 브라우저의 구문 분석기를 통해 실행된다는 것입니다. 이 파서는 올바른 컨텍스트에 배치되지 않은 태그를 무시하고 텍스트 노드 만 얻습니다. 테이블이없는 테이블 행은 브라우저에 유효하지 않습니다.
jQuery는 올바른 컨텍스트를 생성하여 문제를 성공적으로 해결하고 필요한 부분 만 추출합니다. 우리가 라이브러리의 코드를 조금 파헤 치면 우리는 이와 같은지도를 볼 수 있습니다 :
특별 처리가 필요한 모든 요소에는 배열이 할당되어 있습니다. 아이디어는 올바른 DOM 요소를 구성하고 우리가 필요한 것을 가져 오기 위해 중첩 수준에 의존하는 것입니다. 예를 들어, 요소의 경우
child가있는 테이블을 만들어야합니다. 그래서 우리는 두 가지 레벨의 둥지가 있습니다.
지도가 있으면 결국 원하는 태그의 종류를 찾아야합니다. 다음 코드는 간단한 텍스트에서 TR을 추출합니다
<span>var text = $('<div>Simple text</div>');
</span>
<span>$('body').append(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
문자열에 태그가 있는지 확인하고 있습니다 - match! = null. 그렇지 않다면 단순히 텍스트 노드를 반환합니다. 임시 의 사용이 여전히 있지만 이번에는 올바른 태그를 전달하여 브라우저가 유효한 DOM 트리를 생성 할 수 있습니다. 결국 while 루프를 사용하여 우리는 원하는 태그에 도달 할 때까지 더 깊고 깊어지고 있습니다.
여기에 우리의 구현을 보여주는 코드 펜이 있습니다 :
Codepen에서 Krasimir tsonev (@krasimir)의 펜 xlcgn을 참조하십시오.
멋진 Angularjs 의존성 주입을 탐색하여 계속합시다
계
AngularJS를 사용하기 시작하면 양방향 데이터 바인딩에 깊은 인상을줍니다. 우리가 알아 차리는 두 번째는 마법 의존성 주입입니다. 간단한 예는 다음과 같습니다.
전형적인 AngularJS 컨트롤러입니다. HTTP 요청을 수행하고 JSON 파일에서 데이터를 가져와 현재 범위로 전달합니다. 우리는 todoctrl 함수를 실행하지 않습니다 - 우리는 어떤 주장도 전달할 기회가 없습니다. 프레임 워크가 있습니다. 그렇다면이 $ 범위와 $ HTTP 변수는 어디에서 왔습니까? 흑 마법과 매우 유사한 매우 멋진 기능입니다. 그것이 어떻게 끝났는지 봅시다.
우리는 시스템에 사용자를 표시하는 JavaScript 기능이 있습니다. 동일한 함수는 생성 된 HTML을 넣기 위해 DOM 요소에 액세스하고 데이터를 얻기 위해 AJAX 래퍼를 넣을 필요가 있습니다. 예제를 단순화하기 위해 데이터와 HTTP 요청을 모킹합니다.<span>var text = $('<div>Simple text</div>');
</span>
<span>$('body').append(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
물론 DisplayUsers (Body, AjaxWrapper)를 실행하면 콘솔에 요청 된 페이지 및 /API /사용자에 세 가지 이름이 표시됩니다. 우리의 방법에는 신체와 ajaxwrapper의 두 가지 종속성이 있다고 말할 수 있습니다. 따라서 이제 아이디어는 인수를 전달하지 않고 기능을 작동시키는 것입니다. 지금까지 코드로 그렇게하면 결과는 다음과 같습니다.
<span>var stringToDom = function(str) {
</span> <span>var temp = document.createElement('div');
</span>
temp<span>.innerHTML = str;
</span> <span>return temp.childNodes[0];
</span><span>}
</span><span>var text = stringToDom('<div>Simple text</div>');
</span>
<span>document.querySelector('body').appendChild(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 <span>var tableRow = $('<tr><td>Simple text</td></tr>');
</span><span>$('body').append(tableRow);
</span>
<span>var tableRow = stringToDom('<tr><td>Simple text</td></tr>');
</span><span>document.querySelector('body').appendChild(tableRow);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사
그 접근법을 사용하면 필요한 종속성으로 기능을 호출 할 수 있습니다. 그리고 동시에 우리는 응용 프로그램의 워크 플로를 변경하지 않습니다. 인젝터는 여전히 독립적이며 논리 관련 기능을 보유하지 않습니다.
물론 DisplayUsers 기능을 Resolve 메소드에 전달하는 것은 도움이되지 않습니다.
우리는 여전히 같은 오류가 발생합니다. 다음 단계는 통과 된 대상이 무엇이 필요로하는지 알아내는 것입니다. 의존성은 무엇입니까? 그리고 여기 AngularJS에서 우리가 채택 할 수있는 까다로운 부분이 있습니다. 나는 다시 프레임 워크의 코드를 조금 파고 이것을 찾았다 :
우리는 구현 세부 사항과 비슷하기 때문에 의도적으로 일부 부품을 건너 뛰었습니다. 그것이 우리에게 흥미로운 코드입니다. 주석 기능은 우리의 해상도와 같은 것입니다. 전달 된 대상 함수를 문자열로 변환하고 주석을 제거하고 인수를 추출합니다. 그것을 사용하고 결과를 봅시다 :
여기 콘솔의 출력은 다음과 같습니다
<span>var wrapMap = {
</span> <span>option: [1, '<select multiple="multiple">', '</select>'],
</span> <span>legend: [1, '<fieldset>', '</fieldset>'],
</span> <span>area: [1, '<map>', '</map>'],
</span> <span>param: [1, '<object>', '</object>'],
</span> <span>thead: [1, '<table>', '</table>'],
</span> <span>tr: [2, '<table><tbody>', '</tbody></table>'],
</span> <span>col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
</span> <span>td: [3, '<table><tbody><tr>', '</tr></tbody></table>'],
</span> <span>_default: [1, '<div>', '</div>']
</span><span>};
</span>wrapMap<span>.optgroup = wrapMap.option;
</span>wrapMap<span>.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
</span>wrapMap<span>.th = wrapMap.td;</span>로그인 후 복사 로그인 후 복사
우리는 .split (/,?/g)를 사용하여 문자열 domel, ajax를 배열로 변환하고 있습니다. 그 후 우리는 종속성이 등록되었는지 확인하고 있으며 그렇다면 대상 기능으로 전달합니다. 인젝터 외부의 코드는 다음과 같습니다
<span>var text = $('<div>Simple text</div>');
</span>
<span>$('body').append(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
물론 우리의 인젝터는 완벽하지 않습니다. 예를 들어 범위 정의 지원과 같은 개선의 여지가 여전히 있습니다. 현재 대상 기능은 새로 생성 된 범위로 호출되지만 일반적으로 우리는 우리 자신의 전달을 원할 것입니다. 우리는 또한 의존성과 함께 사용자 정의 인수를 보내야합니다.
미수 후 코드를 유지하려면 인젝터가 더욱 복잡해집니다. 우리가 알고 있듯이, 미니 퍼가 함수, 변수 및 방법의 인수의 이름을 대체합니다. 그리고 우리의 논리는 이러한 이름에 의존하기 때문에 해결 방법에 대해 생각해야합니다. 가능한 솔루션 중 하나는 AngularJS에서 다시 발생합니다
<span>var stringToDom = function(str) {
</span> <span>var temp = document.createElement('div');
</span>
temp<span>.innerHTML = str;
</span> <span>return temp.childNodes[0];
</span><span>}
</span><span>var text = stringToDom('<div>Simple text</div>');
</span>
<span>document.querySelector('body').appendChild(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
FirstName 및 LastName Properties가있는 클래스가 있습니다. 계산 된 속성 풀 이름은 사람의 전체 이름을 포함하는 연결된 문자열을 반환합니다. 이상한 점은 풀 이름에 적용되는 함수에 대해 .property 메소드를 사용하는 부분입니다. 나는 개인적으로 다른 곳을 보지 못했습니다. 그리고 다시, 프레임 워크 코드의 빠른 모습은 마술을 드러냅니다 :
라이브러리는 새 속성을 추가하여 글로벌 기능 객체의 프로토 타입을 조정합니다. 클래스의 정의 중에 논리를 실행하는 것은 좋은 방법입니다. Ember는 getters와 setter를 사용하여 객체의 데이터로 작동합니다. 실제 변수에 도달하기 전에 하나 더 레이어가 있기 때문에 계산 된 속성의 구현을 단순화합니다. 그러나 일반 JavaScript 객체와 함께 계산 된 속성을 사용할 수 있다면 더욱 흥미로울 것입니다. 예를 들어 :
이름은 일반 속성으로 사용되지만 실제로는 FirstName 및 LastName을 가져 오거나 설정하는 함수입니다.
아이디어를 실현하는 데 도움이되는 JavaScript의 빌드 인 기능이 있습니다. 다음 스 니펫을 살펴보십시오
객체 .DefineProperty 메소드는 범위, 속성 이름, getter 및 setter를 허용 할 수 있습니다. 우리가해야 할 일은 두 가지 방법의 몸을 쓰는 것입니다. 그리고 그게 다야. 위의 코드를 실행할 수 있으며 예상 결과를 얻을 수 있습니다.
<span>var text = $('<div>Simple text</div>');
</span>
<span>$('body').append(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
.
위의 줄을 추가하면 모든 함수 정의의 끝에 .computed ()를 추가 할 수 있습니다.
결과적으로 이름 속성에는 더 이상 기능이 포함되어 있지 않지만 이전 기능으로 채워진 True 및 Func 속성과 동일한 속성을 계산 한 객체입니다. 진정한 마법은 컴퓨팅 도우미의 구현에서 발생합니다. 그것은 객체의 모든 속성을 거치고 객체를 사용합니다.
<span>var stringToDom = function(str) {
</span> <span>var temp = document.createElement('div');
</span>
temp<span>.innerHTML = str;
</span> <span>return temp.childNodes[0];
</span><span>}
</span><span>var text = stringToDom('<div>Simple text</div>');
</span>
<span>document.querySelector('body').appendChild(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
전체 이름을 반환하는 함수는 FirstName 및 LastName을 변경하는 데 사용됩니다. 그것이 통과 된 인수를 점검하고 첫 번째 인수를 처리하는 아이디어입니다. 그것이 존재한다면 우리는 그것을 분할하고 값을 일반 속성에 적용합니다.
우리는 이미 원하는 사용법을 언급했지만 한 번 더 보자.
<span>var tableRow = $('<tr><td>Simple text</td></tr>');
</span><span>$('body').append(tableRow);
</span>
<span>var tableRow = stringToDom('<tr><td>Simple text</td></tr>');
</span><span>document.querySelector('body').appendChild(tableRow);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사
당신은 아마도 Facebook의 프레임 워크 반응에 대해 들었을 것입니다. 모든 것이 구성 요소라는 생각을 중심으로 구축되었습니다. 흥미로운 것은 구성 요소의 정의입니다. 다음 예를 살펴 보겠습니다
우리가 생각하기 시작한 첫 번째 것은 이것이 JavaScript이지만 유효하지 않은 것입니다. 렌더링 함수가 있으므로 오류가 발생할 수 있습니다. 그러나이 코드는이 코드가 사용자 정의 유형 속성과 함께 태그에 넣는다는 것입니다. 브라우저는이를 처리하지 않으므로 오류로부터 안전하다는 것을 의미합니다. React에는 당사가 작성한 코드를 유효한 JavaScript로 변환하는 자체 파서가 있습니다. Facebook의 개발자는 XML Like Langu JSX 변압기는 390K이며 약 12000 줄의 코드가 포함되어 있습니다. 따라서 조금 복잡합니다. 이 섹션에서는 간단하지만 여전히 강력한 것을 만들 것입니다. 반응 스타일로 HTML 템플릿을 구문 분석하는 JavaScript 클래스.
Facebook이 취한 접근 방식은 JavaScript 코드를 HTML Markup과 혼합하는 것입니다. 따라서 다음 템플릿이 있다고 가정 해 봅시다 :
및 그것을 사용하는 구성 요소 :
<span>var text = $('<div>Simple text</div>');
</span>
<span>$('body').append(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
우리는
이제 구문 분석 기능을 작성해 봅시다. 우리의 첫 번째 임무는 HTML을 표현식과 구별하는 것입니다. 표현에 의해, 우리는 문자열이
위 코드의 결과는 다음과 같습니다
표현식은 하나 뿐이며 내용은 제목입니다. 우리가 취할 수있는 첫 번째 직관적 인 접근법은 JavaScript의 교체 함수를 사용하고 를 전달 된 comp 객체의 데이터로 바꾸는 것입니다. 그러나 이것은 간단한 속성으로 만 작동합니다. 객체를 중첩했거나 함수를 사용하려는 경우에는 어떻습니까? 예를 들어 :
복잡한 파서를 만드는 대신 거의 새로운 언어를 발명하는 대신 순수한 자바 스크립트를 사용할 수 있습니다. 우리가해야 할 유일한 일은 새로운 함수 구문을 사용하는 것입니다. <span>var stringToDom = function(str) {
</span> <span>var temp = document.createElement('div');
</span>
temp<span>.innerHTML = str;
</span> <span>return temp.childNodes[0];
</span><span>}
</span><span>var text = stringToDom('<div>Simple text</div>');
</span>
<span>document.querySelector('body').appendChild(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
우리는 나중에 실행되는 함수의 본문을 구성 할 수 있습니다. 그래서 우리는 표현의 입장과 그 뒤에 정확히 무엇이 있는지 알고 있습니다. 임시 배열과 커서를 사용하면 while 사이클은 다음과 같습니다.<span>var text = $('<div>Simple text</div>');
</span>
<span>$('body').append(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
코드 배열은 함수의 본문이 될 문자열로 변환해야합니다. 예를 들면 :
<span>var stringToDom = function(str) {
</span> <span>var temp = document.createElement('div');
</span>
temp<span>.innerHTML = str;
</span> <span>return temp.childNodes[0];
</span><span>}
</span><span>var text = stringToDom('<div>Simple text</div>');
</span>
<span>document.querySelector('body').appendChild(text);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사 로그인 후 복사
우리는 표현을 연결할 수 없으며 색상이 나열 될 것으로 기대합니다. 따라서 문자열에 문자열을 추가하는 대신 배열로 수집합니다. 다음은 구문 분석 기능의 업데이트 된 버전입니다
코드 배열이 채워지면 기능 본문을 구성하기 시작합니다. 템플릿의 모든 줄은 배열 r에 저장됩니다. 라인이 문자열 인 경우 인용문을 피하고 새 라인과 탭을 제거하여 약간 지우고 있습니다. 푸시 메소드를 통해 배열에 추가됩니다. 코드 스 니펫이있는 경우 유효한 JavaScript 연산자가 아닌지 확인합니다. 그렇다면 우리는 그것을 배열에 추가하지 않고 단순히 새로운 라인으로 떨어 뜨립니다. 끝 출력의 콘솔
<span>var tableRow = $('<tr><td>Simple text</td></tr>');
</span><span>$('body').append(tableRow);
</span>
<span>var tableRow = stringToDom('<tr><td>Simple text</td></tr>');
</span><span>document.querySelector('body').appendChild(tableRow);</span>로그인 후 복사 로그인 후 복사 로그인 후 복사
우리는 구성 요소의 맥락에서 실행하기 위해 코드를 문으로 랩핑했습니다. 그 없이는 제목과 색상 대신 컬러와 this.colors를 사용해야합니다.
여기에 최종 결과를 보여주는 코드 펜이 있습니다 :
Codepen의 Krasimir Tsonev (@krasimir)의 펜 Gahej 참조.
요약
큰 프레임 워크와 라이브러리 뒤에는 스마트 개발자가 있습니다. 그들은 사소하지 않고 심지어 마법 같은 까다로운 솔루션을 발견하고 사용합니다. 이 기사에서 우리는 그 마법의 일부를 공개했습니다. JavaScript 세계에서 우리는 최고로부터 배우고 그들의 코드를 사용할 수 있다는 것이 좋습니다.
이 기사의 코드는 github <span>var wrapMap = {
</span> <span>option: [1, '<select multiple="multiple">', '</select>'],
</span> <span>legend: [1, '<fieldset>', '</fieldset>'],
</span> <span>area: [1, '<map>', '</map>'],
</span> <span>param: [1, '<object>', '</object>'],
</span> <span>thead: [1, '<table>', '</table>'],
</span> <span>tr: [2, '<table><tbody>', '</tbody></table>'],
</span> <span>col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
</span> <span>td: [3, '<table><tbody><tr>', '</tr></tbody></table>'],
</span> <span>_default: [1, '<div>', '</div>']
</span><span>};
</span>wrapMap<span>.optgroup = wrapMap.option;
</span>wrapMap<span>.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
</span>wrapMap<span>.th = wrapMap.td;</span>로그인 후 복사 로그인 후 복사 JavaScript의 마술 방법은 클래스의 행동에 고리를 제공하는 특별한 방법입니다. 직접 호출되지는 않지만 특정 조치가 수행 될 때 호출됩니다. 예를 들어, toString () 메소드는 객체를 텍스트 값으로 표시해야 할 때 자동으로 호출되는 마법 메소드입니다. 또 다른 예는 () 메소드의 값입니다. 객체가 기본 값으로 표시 될 때 호출됩니다.
|
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
