JavaScript의 마법을 드러냅니다

우리는 매일 수많은 도구를 사용합니다. 다양한 라이브러리와 프레임 워크가 우리의 일상의 일부입니다. 우리는 후드 아래에서 무슨 일이 일어나고 있는지 이해하지 않더라도 모든 프로젝트마다 휠을 재발 명하지 않기 때문에 사용합니다. 이 기사에서는 가장 인기있는 라이브러리에서 일어나는 마법의 과정 중 일부를 공개 할 것입니다. 우리는 또한 그들의 행동을 복제 할 수 있는지 볼 것입니다 키 테이크 아웃

jQuery와 같은 JavaScript 라이브러리는 중첩 요소와 같은 복잡한 케이스를 올바르게 처리하여 문자열에서 요소를 만드는 것과 같은 DOM 조작을 단순화합니다. AngularJS의 종속성 주입 시스템은 명시 적 통과없이 의존성을 마술처럼 관리합니다. 인젝터 패턴을 사용하여 런타임에 동적으로 종속성을 제공합니다. ember.js는 계산 된 속성으로 JavaScript 객체를 향상시켜 속성이 함수와 유사하게 작동하여 종속성이 변경되면 자동으로 업데이트됩니다. react의 JSX 구문은 JavaScript에 HTML을 포함시킨 다음 React의 JSX 변압기에 의해 처리되어 동적 UI 구성 요소를 생성합니다. 이 기사는 종속성 주입 및 계산 속성을위한 맞춤형 솔루션을 보여 주며 개발자가 프로젝트에서 유사한 기능을 구현할 수있는 방법을 보여줍니다. 인기있는 JavaScript 프레임 워크의 기본 역학을 이해하면 개발자가보다 효율적이고 유지 관리 가능한 코드를 작성할 수 있도록 강화할 수 있습니다.

문자열에서 DOM 요소 생성 단일 페이지 응용 프로그램의 부상으로 JavaScript로 많은 일을하고 있습니다. 응용 프로그램 논리의 큰 부분이 브라우저로 옮겨졌습니다. 페이지에서 요소를 생성하거나 교체하는 것이 일반적인 작업입니다. 아래에 표시된 것과 유사한 코드는 매우 흔해졌습니다.

결과는 문서 본문에 추가 된 새로운

요소입니다. 이 간단한 작업은 한 줄의 jQuery만으로 수행됩니다. jQuery가 없으면 코드는 조금 더 복잡하지만 그다지 많지는 않습니다. 우리는 임시

요소를 생성하는 자체 유틸리티 방법 StringTodom을 정의했습니다. 우리는 그 내부 재산을 변경했고 결국 우리는 단순히 첫 번째 자녀를 반환했습니다. 실제로 우리는 필요한 것입니다. 그것은 같은 방식으로 작동했습니다. 그러나 다음 코드에서는 다른 결과를 관찰 할 것입니다.

시각적으로 페이지에는 차이가 없습니다. 그러나 Chrome의 개발자 도구로 생성 된 마크 업을 확인하면 흥미로운 결과를 얻을 수 있습니다.
StringTodom 함수가 실제 태그가 아닌 텍스트 노드 만 만든 것처럼 보입니다. 그러나 동시에, jQuery는 어떻게 든 그렇게 할 수있었습니다. 문제는 HTML 요소를 포함하는 문자열이 브라우저의 구문 분석기를 통해 실행된다는 것입니다. 이 파서는 올바른 컨텍스트에 배치되지 않은 태그를 무시하고 텍스트 노드 만 얻습니다. 테이블이없는 테이블 행은 브라우저에 유효하지 않습니다.

jQuery는 올바른 컨텍스트를 생성하여 문제를 성공적으로 해결하고 필요한 부분 만 추출합니다. 우리가 라이브러리의 코드를 조금 파헤 치면 우리는 이와 같은지도를 볼 수 있습니다 :

특별 처리가 필요한 모든 요소에는 배열이 할당되어 있습니다. 아이디어는 올바른 DOM 요소를 구성하고 우리가 필요한 것을 가져 오기 위해 중첩 수준에 의존하는 것입니다. 예를 들어, 요소의 경우 child가있는 테이블을 만들어야합니다. 그래서 우리는 두 가지 레벨의 둥지가 있습니다. 지도가 있으면 결국 원하는 태그의 종류를 찾아야합니다. 다음 코드는 간단한 텍스트에서 TR을 추출합니다

<span>var text = $('<div>Simple text</div>');
</span>
<span>$('body').append(text);</span>

나머지는 적절한 컨텍스트를 찾고 DOM 요소를 반환합니다. 다음은 StringTodom 함수의 최종 변형입니다

문자열에 태그가 있는지 확인하고 있습니다 - 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>

우리는 태그를 컨텐츠 홀더로 사용합니다. AjaxWrapper는 요청을 시뮬레이션하는 객체이며 DataMockup은 사용자를 포함하는 배열입니다. 우리가 사용할 함수는 다음과 같습니다.

물론 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>

그리고 Ajax 매개 변수가 정의되지 않기 때문에 정상입니다 종속성 주입을위한 메커니즘을 제공하는 대부분의 프레임 워크에는 일반적으로 인젝터 라는 모듈이 있습니다. 종속성을 사용하려면 여기에 등록해야합니다. 나중에 어느 시점에서, 우리의 리소스는 동일한 모듈로 응용 프로그램의 논리에 제공됩니다. 인젝터를 만들어 봅시다 : 우리는 두 가지 방법 만 필요합니다. 첫 번째는 등록하고 우리의 리소스 (종속성)를 받아들이고 내부적으로 저장합니다. 두 번째는 주입의 대상을 받아들입니다 - 종속성을 가지고 있고 그것을 매개 변수로 수신 해야하는 함수. 여기서 중요한 순간은 인젝터가 우리의 기능을 호출해서는 안된다는 것입니다. 그것이 우리의 일이며 우리는 그것을 통제 할 수 있어야합니다. 우리가 Resolve 방법에서 할 수있는 것은 목표를 감싸고 그것을 호출하는 폐쇄를 반환하는 것입니다. 예를 들면 :

<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>

argdecl 배열의 두 번째 요소를 얻으면 필요한 종속성의 이름을 찾을 수 있습니다. 이름을 갖는 것은 인젝터 저장에서 자원을 전달할 수 있기 때문에 바로 우리가 필요로하는 것입니다. 다음은 우리의 목표를 성공적으로 다루고 성공적으로 다루는 버전입니다.

우리는 .split (/,?/g)를 사용하여 문자열 domel, ajax를 배열로 변환하고 있습니다. 그 후 우리는 종속성이 등록되었는지 확인하고 있으며 그렇다면 대상 기능으로 전달합니다. 인젝터 외부의 코드는 다음과 같습니다

<span>var text = $('<div>Simple text</div>');
</span>
<span>$('body').append(text);</span>

이러한 구현의 이점은 많은 기능으로 DOM 요소와 Ajax 래퍼를 주입 할 수 있다는 것입니다. 우리는 그런 응용 프로그램의 구성을 배포 할 수도 있습니다. 객체를 수업에서 수업으로 전달할 필요는 없습니다. 그것은 단지 레지스터와 해결 방법입니다.

물론 우리의 인젝터는 완벽하지 않습니다. 예를 들어 범위 정의 지원과 같은 개선의 여지가 여전히 있습니다. 현재 대상 기능은 새로 생성 된 범위로 호출되지만 일반적으로 우리는 우리 자신의 전달을 원할 것입니다. 우리는 또한 의존성과 함께 사용자 정의 인수를 보내야합니다.

미수 후 코드를 유지하려면 인젝터가 더욱 복잡해집니다. 우리가 알고 있듯이, 미니 퍼가 함수, 변수 및 방법의 인수의 이름을 대체합니다. 그리고 우리의 논리는 이러한 이름에 의존하기 때문에 해결 방법에 대해 생각해야합니다. 가능한 솔루션 중 하나는 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>

디스플레이 서서 대신 실제 종속성의 이름을 전달하고 있습니다. 우리의 예제 : Codepen의 Krasimir tsonev (@krasimir)의 펜 bxdar를 참조하십시오. Ember의 계산 된 속성 채택 ember는 요즘 가장 인기있는 프레임 워크 중 하나입니다. 유용한 기능이 많이 있습니다. 특히 흥미로운 속성이 있습니다. 요약하면, 계산 된 속성은 속성 역할을하는 함수입니다. Ember의 문서에서 가져온 간단한 예를 보자 :

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>

object.defineProperty는 정확히 필요한 것이지만 개발자가 매번 작성하도록 강요하고 싶지는 않습니다. 폴리 필드를 제공하거나 추가 논리를 실행해야 할 수도 있습니다. 이상적인 경우 Ember와 유사한 인터페이스를 제공하고자합니다. 하나의 기능 만 클래스 정의의 일부입니다. 이 섹션에서는 Computize라는 유틸리티 함수를 작성하여 객체를 처리하고 어떻게 든 이름 함수를 동일한 이름의 속성으로 변환합니다.

우리는 이름 메소드를 세터로, 동시에 게터와 동시에 사용하려고합니다. 이것은 Ember의 계산 속성과 유사합니다 이제 기능 객체의 프로토 타입에 자신의 논리를 추가합시다 :

.

위의 줄을 추가하면 모든 함수 정의의 끝에 .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>

원래 속성 이름을 삭제하고 있음을 알 수 있습니다. 일부 브라우저 객체에서는 아직 정의되지 않은 속성에서만 작동합니다. 다음은 .computed () 함수를 사용하는 사용자 객체의 최종 버전입니다.

전체 이름을 반환하는 함수는 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>

다음 코드 펜은 실제로 우리의 작업을 보여줍니다 Codepen에서 Krasimir tsonev (@krasimir)의 펜 AHPQO 참조. 미친 반응 템플릿

당신은 아마도 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>

아이디어는 템플릿의 ID를 지적하고 적용 해야하는 데이터를 정의한다는 것입니다. 우리의 구현의 마지막 부분은 두 요소를 병합하는 실제 엔진입니다. 엔진이라고 부르고 시작해 봅시다 :

우리는 이제 구문 분석 기능을 작성해 봅시다. 우리의 첫 번째 임무는 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>

좋아요? 우리의 구성 요소의 맥락에서 실행 된 올바르게 형식화 된 작업 JavaScript는 원하는 HTML 마크 업을 생성합니다. 마지막으로 남은 것은 사실상 생성 된 기능의 실제 실행입니다.

우리는 구성 요소의 맥락에서 실행하기 위해 코드를 문으로 랩핑했습니다. 그 없이는 제목과 색상 대신 컬러와 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의 마법에 대한 자주 묻는 질문 (FAQ) JavaScript의 마법 방법이란 무엇이며 어떻게 작동합니까?

JavaScript의 마술 방법은 클래스의 행동에 고리를 제공하는 특별한 방법입니다. 직접 호출되지는 않지만 특정 조치가 수행 될 때 호출됩니다. 예를 들어, toString () 메소드는 객체를 텍스트 값으로 표시해야 할 때 자동으로 호출되는 마법 메소드입니다. 또 다른 예는 () 메소드의 값입니다. 객체가 기본 값으로 표시 될 때 호출됩니다. javaScript에서 마법 방법을 어떻게 사용할 수 있습니까?

javaScript의 마법 방법은 객체 또는 클래스에서 정의하여 사용할 수 있습니다. 예를 들어, 객체의 toString () 메소드를 정의하여 객체가 문자열로 표시되는 방식을 사용자 정의 할 수 있습니다. 간단한 예는 다음과 같습니다. firstName : "John", lastName : "doe",

toString : function () {

return this.firstName " "this.lastname; console.log (person.toString ()); // "John Doe"

JavaScript에서 마법 기능의 중요성은 무엇입니까?
JavaScript의 마술 함수는 특정 상황에서 객체의 행동을 제어하고 사용자 정의 할 수 있기 때문에 중요합니다. 그들은 당신의 코드를보다 직관적이고 이해하기 쉽게 만들 수있을뿐만 아니라 데이터를 캡슐화하고 보호하는 방법을 제공 할 수 있습니다.
JavaScript에서 마법 기능의 몇 가지 예를 제공 할 수 있습니까?
확실합니다. JavaScript의 마법 기능의 몇 가지 예는 다음과 같습니다. TOSTRING () :이 메소드는 객체를 나타내는 문자열을 반환합니다. valueof () :이 메소드는 객체의 원시 값을 반환합니다. hasownProperty () :이 메소드는 객체에 지정된 속성이 있는지 여부를 나타내는 부울을 반환합니다.



JavaScript에서 마법 메소드를 사용하는 데 필요한 제한 사항이나 단점이 있습니까? 마법 방법은 매우 유용 할 수 있으며 몇 가지 제한 사항도 있습니다. 우선, 특히 코드가 더 복잡하고 디버깅하기가 더 어려워 질 수 있습니다. 특히 작동 방식에 익숙하지 않은 경우. 또한 올바르게 사용하지 않으면 예기치 않은 행동으로 이어질 수 있습니다.

JavaScript는 다른 프로그래밍 언어와 비교하여 마법 방법을 어떻게 처리합니까?

다른 프로그래밍 언어와 달리 JavaScript는 공식적인 개념이 없습니다. "마법 방법". 그러나 toString () 및 valueOf ()와 같이 유사하게 작동하는 특정 방법이 있습니다. 이 방법은 다른 언어의 마법 방법과 매우 유사한 특정 상황에서 자동으로 호출됩니다.

JavaScript에서 마법 방법을 사용하기위한 몇 가지 모범 사례는 무엇입니까?

JavaScript에서 마술 방법을 사용하기위한 몇 가지 모범 사례는 무엇입니까? 언제 어떻게 사용 해야하는지 이해하고, 복잡성을 피하기 위해 간단히 사용하고, 항상 코드를 철저히 테스트하여 예상대로 행동 할 수 있도록 코드를 철저히 테스트하십시오. React 또는 vue와 같은 프레임 워크?

예, 마술 방법은 React 또는 Vue와 같은 JavaScript 프레임 워크와 함께 사용할 수 있습니다. 그러나 사용되는 방식은 프레임 워크에 따라 다를 수 있습니다. 지침에 대한 특정 프레임 워크의 문서를 참조하는 것이 가장 좋습니다.
JavaScript에서 마술 방법에 대해 더 많이 배울 수 있습니까?

JavaScript에서 마법 방법에 대해 더 많이 배울 수있는 많은 리소스가 있습니다. 공식 JavaScript 문서와 온라인 자습서 및 과정으로 시작할 수 있습니다. 또한 자신의 프로젝트에서 실습 경험을 얻기 위해 연습 할 수 있습니다.

JavaScript에서 마법 방법을 사용하는 데 도움이되는 도구 나 라이브러리가 있습니까?

많은 라이브러리가 있고 라이브러리가 많고 많은 라이브러리가 있습니다. JavaScript에서 마법 방법을 사용하는 데 도움이되는 도구. 예를 들어 Lodash는 인기있는 JavaScript 유틸리티 라이브러리로 배열, 객체 및 기타 유형의 데이터를 사용하는 데 유용한 방법을 제공합니다.

위 내용은 JavaScript의 마법을 드러냅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!