JavaScript에서 5 가지 유용한 기능이 누락되었습니다-JS 튜토리얼-php.cn

JavaScript의 핵심 기능이 지속적으로 개선되고 있으며, 프로그래머의 작업을 돕기 위해 많은 새로운 클래스와 기능이 추가되었습니다. 그러나 일부 기본적인 실제 기능은 여전히 누락되었으며 jQuery, 프로토 타입 및 Mootools와 같은 라이브러리를 사용하여 구현해야합니다. 이러한 도구는 훌륭하지만 경우에 따라 사용하는 것이 약간 번거로운 것 같습니다. 이 기사는 JavaScript를 구축해야한다고 생각하는 5 가지 실용적인 기능을 소개합니다.

키 포인트 :

JavaScript에는 기본적인 실용적 기능이 부족하며, 일반적으로 jQuery, 프로토 타입 및 Mootools와 같은 라이브러리와 함께 구현해야합니다. 그러나 일부 요구 사항의 경우 이러한 라이브러리를 사용하는 것이 너무 번거 롭습니다. 모든 버전의 Internet Explorer에서 기능은 지원되지 않지만 래퍼 기능은 이전 버전과 호환되는 데 사용할 수 있습니다. 이 함수는 클래스 이름을 사용하여 요소를 검색합니다.이 기능은 HTML5가 이전에 없었던 기능입니다.

기능은 플러그인을 작성할 때 종종 필요한 두 개 이상의 객체를 병합하는 데 사용됩니다. 이 기능은 기본 JavaScript 기능이 아니지만 쉽게 구축 할 수 있습니다.

함수를 사용하여 두 개의 객체가 동일한 속성과 값을 가질 때 일치하는 기능을 얻기 위해 향상 될 수 있습니다.
getElementsByClassName() getElementsByClassName ()

javaScript를 사용하면

기능을 사용하여 ID로 요소를 검색 할 수 있지만 HTML5 이전에는 클래스 이름을 사용하여 하나 이상의 요소를 얻을 수있는 기본 기능이 없었습니다. 새로운 기능은 라고하며, 이는 Firefox 3, Opera 9.5, Safari 3.1 및 모든 버전의 Chrome에서 사용할 수 있습니다. 불행히도, 웹 디자이너를위한 최고의 적 브라우저 인 모든 버전의 Internet Explorer에서 지원하지는 않습니다. Internet Explorer 9 만 지원하므로 이전 버전의 경우 래퍼 기능이 필요합니다. 내가 찾은 최고의 기능은 Robert Nyman이 작성했습니다. 그의 구현은 MIT 라이센스에 따라 릴리스되었으며 Whatwg가 추천했습니다. 이를 지원하는 브라우저에서 기본 메소드를 사용한 다음 덜 알려진 extend() 메소드로 돌아가서 이전 버전의 Firefox (적어도 버전 1.5)와 오페라 (적어도 버전에서 나온 버전에서 나옵니다. 9.27) 시작) 지원. 모든 메소드가 실패하면 스크립트는 DOM의 재귀 적 트래버스로 돌아와 주어진 클래스 이름과 일치하는 요소를 수집합니다. 코드는 다음과 같습니다.

extend () 플러그인을 작성한 적이 있다면 두 개 이상의 객체를 합병하는 데 거의 확실하게 문제가있었습니다. 기본 설정이 있고 사용자가 기본값 값을 교체 할 수 있기를 원할 때 종종 발생합니다. jQuery를 사용하는 경우

를 사용할 수 있지만, 기본 JavaScript에 대해 이야기하고 있기 때문에 나쁜 소식은 기본 기능이 없다는 것입니다. 다행히도 쉽게 직접 만들 수 있습니다. 다음 예제는 jQuery 메소드와 동일한 기능으로 코드를 만드는 방법을 보여줍니다. 모든 객체가 동일한 메소드를 공유 할 수 있도록 extend() 메소드를 프로토 타입에 추가했습니다. extend() Object equals () 객체 비교는 매우 일반적인 작업입니다. 이 테스트는 엄격한 평등 연산자 (===)를 사용하여 수행 할 수 있지만 때로는 두 변수가 메모리의 동일한 객체를 참조하는지 여부를 테스트하고 싶지 않습니다. 대신 두 객체의 속성과 동일한 값이 있는지 알고 싶습니다. 이것이 바로 다음 코드가하는 일입니다. 다음 코드는 저에 의해 작성되지 않았습니다. 다시, 가 에 추가되었습니다.

var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};

로그인 후 복사

<<> inarray () <🎜 🎜> <🎜 🎜> JavaScript 값이 배열에 있는지 테스트 할 기본 방법이 없습니다. 값이 존재하는 경우 True를 반환하는 함수를 작성합니다. 그렇지 않으면 False. 이 함수는 주어진 값을 배열의 각 요소와 비교합니다. 이전 두 예제와 마찬가지로 는 <🎜 🎜> 클래스의 프로토 타입 특성에 추가됩니다.

이 기능은 단순성으로 인해 예상대로 작동하지 않습니다. 문자열과 숫자와 같은 원시 유형에 대해 작동하지만 객체를 비교하면 함수가 동일한 객체를 찾는 경우에만 True가 반환됩니다. 그것이 어떻게 작동하는지 더 잘 이해하려면 다음 예를 살펴 보겠습니다.

equals() <<> 개선 된 <🎜 🎜> 함수는 다음과 같습니다 Object.prototype <🎜 🎜> <<> toggleclass () <🎜 🎜>

jQuery에서 자주 사용되는 또 다른 함수는 <🎜

Object.prototype.extend = function() {
  // ... (代码与原文相同) ...
};

로그인 후 복사

입니다. 클래스 이름이 존재하는지 여부에 따라 요소의 클래스 이름을 추가하거나 삭제합니다. 간단한 버전은 다음과 같습니다.

개선 된 함수는 다음과 같습니다 결론

이 기사는 JavaScript에서 누락 된 것으로 생각되는 가장 중요한 기능 중 일부에 중점을 둡니다. 물론 JavaScript는 다른 몇 주 안에 볼 수있는 다른 것을 놓치고 있습니다. 하지만 이제 다음과 같은 점을 지적하고 싶습니다 : inArray()

jQuery와 같은 프레임 워크에는 많은 유용한 기능이 있지만 오버 헤드를 증가시킵니다. 따라서 몇 가지 함수 만 있으면 기본 JavaScript를 사용하고 필요한 기능을 외부 파일로 그룹화하십시오.
새 JavaScript 버전에서 소개 된 함수를 사용하는 경우 삭제하지 마십시오. 조건부 명세서로 마무리하여 지원되는지 테스트하고 지원되지 않으면 에 표시된대로 이전 코드를 사용하십시오. 이렇게하면 이전 브라우저를 계속 지원할 것입니다.
에 표시된 것처럼 객체의 프로토 타입에 기능을 추가하십시오. 모든 인스턴스는 동일한 방법을 공유하고 더 잘 수행합니다. getElementsByClassName()

의 두 번째 버전에서 볼 수 있듯이 코드를 가능한 한 많이 재사용하십시오.

extend()

그림은 원래 형식으로 유지되며 위치가 변경되지 않습니다. toggleClass()

위 내용은 JavaScript에서 5 가지 유용한 기능이 누락되었습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!