jQuery에서 기능을 선언하는 5 가지 방법

이 기사에서는 JavaScript 기능 블록을 정의하는 몇 가지 방법을 조사합니다. JavaScript 함수를 선언 할 방법을 선택하는 것은 초보자에게 혼란 스러울 수 있으며 여러 구문 옵션이 있습니다. 각각은 당신을 붙잡을 수있는 장점, 단점 및 적절한 용도가 있습니다.

1. 정기적 인 JavaScript 함수

JavaScript에서 함수를 선언하는 첫 번째이자 가장 명백한 방법은 함수 선언을 사용하는 것입니다. 두 개의 매개 변수 x와 y를 취하는 multiply ()라는 함수는 곱하고 값을 반환하고 다음 구문으로 값을 구현할 수 있습니다 :

이러한 방식으로 정의 된 함수 (함수 선언)는 현재 범위의 상단에 를 hoisted합니다. Console.log ()는 함수 전에 배치 할 수 있으며 여전히 작동합니다.

2. JavaScript 함수 표현식

동일한 함수는 다음 예에서 볼 수 있듯이 변수를 명시 적으로 설정하는 표현식으로 작성할 수 있습니다.

함수는 들어오지 않으므로 정의 된 후에 만 ​​사용할 수 있습니다.

.

<span>function multiply(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

3. 객체 문자 그럴 메소드 정의

기능은 JavaScript의 다른 값 유형과 동일하게 처리되므로 다른 객체에서 하나를 정의 할 수 있습니다. 예를 들면 :

4. ES2015 화살표 함수

화살표 함수에는 기능 키워드가 필요하지 않지만 변수에만 할당되거나 익명으로 사용될 수 있습니다 (예 : 콜백 또는 이벤트 핸들러). 둥근 브래킷 (())에 동봉 된 매개 변수 뒤에 화살표 (=>)가 뒤 따릅니다. 다음 코드 블록에서 함수를 나타냅니다.

우리는 하나의 진술 만 가지고 있으므로 반환은 암시 적이며 더 짧은 구문으로 동일한 기능을 위해 괄호를 생략 할 수 있습니다.

함수에 단일 매개 변수가있는 경우 해당 브래킷을 제거 할 수도 있습니다.

<span>const multiply = function(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

단일 매개 변수에는 여전히 브래킷이 필요하지만 화살표 함수는 직접 외부 범위의 값에 자동으로 할당하므로 .bind (this)를 사용할 필요가 없습니다.

5. jQuery 확장 기능 jQuery는 JavaScript 라이브러리이므로 기능을 만드는 것은 거의 동일합니다. 그러나 자신의 사용자 정의 방법을 추가하여 JQuery의 기능을 확장 할 수 있습니다. jQuery.fn.extend () 메소드는 jQuery 프로토 타입 ($ .fn) 객체를 확장하여 새로운 기능을 기본 jQuery () 함수에 연결할 수 있습니다. 예를 들어, 다음 코드는 새 확인 및 체크 박스 입력 필드를 수정하기위한 jQuery 메소드를 선택 해제합니다.

<span>function multiply(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

기능 유지 기능 구문은 종종 개인적인 취향의 문제이지만 코드를 읽을 수 있도록하십시오. 몇 주 안에 자신을 혼란스럽게하는 것보다 기능 문을 사용하는 것이 더 낫습니다. jQuery 함수를 선언하는 것에 대한 자주 묻는 질문 (FAQ) jQuery 함수 선언이란 무엇입니까?

jQuery 함수 선언은 jQuery 라이브러리를 사용하여 사용자 정의 기능을 만드는 프로세스입니다. 이러한 기능은 특정 작업을 수행하거나 DOM을 조작하거나 웹 페이지의 요소와 상호 작용하는 데 사용될 수 있습니다.

jQuery 함수를 어떻게 선언 하는가?

jQuery 함수를 선언하려면, 귀하는 귀하가 $ .fn 구문을 사용한 다음 함수 이름을 사용하십시오. 예를 들면 다음과 같습니다. > $. fn.myCustOmFunction = function () {// 함수 코드};

$ (document) .ready () function?

예, $ (document) .ready () 함수 외부에서 jQuery 함수를 선언 할 수 있습니다. 그러나 DOM이 조작하기 전에 DOM이 완전히로드되도록 $ (Document) .ready () 함수 내에서 함수를 정의하는 것이 좋습니다.

jQuery 함수를 선언 한 후 어떻게 사용할 수 있습니까? jQuery 함수를 선언 한 후에는 선택한 DOM 요소에서 사용할 수 있습니다. 예 : > $ ( "#mylement"). myCustOmFunction ();

인수를 내 사용자 지정 jQuery 함수에 전달할 수 있습니까?

예, 인수를 사용자 정의에 전달할 수 있습니다. jQuery 함수. 함수 선언 내에서 인수를 선언하고 기능 본문 내에서 사용하십시오 : $. fn.myCustOmFunction = function (arg1, arg2) {// arg1 및 arg2를 여기에서 사용}; 내 사용자 정의 함수가 포함 된 jQuery 메소드?

예, 사용자 정의 기능으로 다른 jQuery 메소드를 체인 할 수 있습니다. 선택한 요소를 반환하여 메소드 체인을 활성화하기 위해 선택한 요소를 반환해야합니다. // 메소드 체인에 중요};

사용자 정의 jQuery 함수 내에서 특정 요소를 대상으로하는 방법은 무엇입니까?

사용자 정의 jQuery 함수 내에서 선택한 dom 요소를 참조하는 데 사용될 수 있습니다 ( 에스). 그런 다음 jQuery 메소드를 사용하여 원하는 조작을 적용 할 수 있습니다.

선언 할 수있는 jQuery 함수의 수에는 제한이 있습니까?

jQuery 함수 수에는 고유 한 제한이 없습니다. 선언 할 수 있습니다. 그러나 코드를 정리하고 가독성 및 유지 보수에 대한 과도한 기능 선언을 피하는 것이 좋습니다.

jQuery 함수를 동적으로 또는 조건부로 선언 할 수 있습니까? 예, jQuery 함수를 동적으로 또는 조건부로 선언 할 수 있습니다. 응용 프로그램의 요구에 따라. 다른 JavaScript 함수와 마찬가지로 조건부 명령문이나 루프를 사용하여 필요에 따라 함수를 만들 수 있습니다. 기존 jQuery 함수를 재정의하거나 확장 할 수 있습니까?

예, 기존 jQuery 함수를 재정의하거나 확장 할 수 있습니다. 내장 된 jQuery 기능을 덮어 쓰는 것은 의도하지 않은 결과를 초래할 수 있으므로 사용자 정의 함수를 사용하여 기능을 확장하는 것이 일반적으로 더 안전합니다.

일반 JavaScript 기능을 선언하는 것과 jQuery 함수의 차이점은 무엇입니까? 주된 차이점은 jQuery 함수가 jQuery Selectors를 사용하여 선택한 DOM 요소와 직접 작동하도록 설계되었다는 것입니다. 정기적 인 자바 스크립트 함수는 더 넓은 범위의 작업을 처리 할 수 ​​있지만, 내 사용자 지정 jquery 함수를 네임 스페이스 할 수 있습니까?

예, 사용자 정의 jquery 함수를 네임 스페이스 할 수 있습니다. 다른 라이브러리 또는 코드와의 충돌을 방지합니다. 예를 들면 다음과 같습니다. $. fn.myplugin_myfunction = function () {// 기능 코드};

jQuery 함수를 선언하기위한 모범 사례가 있습니까?

예, 여기에 있습니다. 몇 가지 모범 사례 : DOM 준비에 대한 $ (document) .ready () 함수 내에서 기능을 정의하십시오.

기능을 모듈화하고 잘 문서화하십시오.

해당되는 경우 메소드 체인을 위해이 내용을 반환하십시오. > 예상치 못한 행동을 방지하기 위해 핵심 jquery 기능을 덮어 쓰거나 수정하지 마십시오.

의미있는 이름을 사용하고 일관된 이름 지정 규칙을 따르십시오.

위 내용은 jQuery에서 기능을 선언하는 5 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!