는 한 객체에서 다른 객체에서 다른 객체와 "혼합"하는 데 가장 일반적으로 사용됩니다. 예를 들어, 특정 DOM 요소를 정렬 할 수 있도록하는 기능 세트를 만들 수 있습니다.
그러면 돔형을 위에서 정렬 할 수있게 만들고 싶다면 이러한 방법을 Domtable 객체와 혼합 할 수 있습니다.<%= javascript_include_tag 'prototype' %>
이제 우리는 테이블에서 해당 메소드를 호출 할 수 있습니다 :
<br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3") 함수 바인딩
프로토 타입은 또한 기능 객체에 두 가지 유용한 두 가지 방법을 추가합니다 : bind and bindaseventlistener. 이 키워드가 해당 객체를 가리 키도록 함수를 특정 객체에 바인딩하는 데 주로 사용됩니다. 이벤트 핸들러 기능을 설정할 때 매우 유용합니다. 다음과 같이 시도해보십시오 :
전통적으로, 이벤트가 핸들러 함수를 트리거 할 때, 이것은 myObject가 아닌 myDiv 요소를 지칭하기 때문에 오류가 발생하므로 message는 정의되지 않았습니다. 다음과 같은 바인드 메소드를 사용 하여이 문제를 해결할 수 있습니다.
이제이 키워드가 myObject에 바인딩되기 때문에 이제 모두 잘 작동합니다. 또한 BindaseventListener는 동일한 작업을 수행하지만 이벤트 객체를 크로스 브라우저 호환 방식으로 기능으로 전달하므로 더 이상 Window.event에 대해 걱정할 필요가 없습니다. 이것을 시도하십시오 :
이제 EventHandler 함수는 이벤트 객체에 액세스 할 수 있습니다. 이 두 가지 방법에 대한 자세한 내용은 제작자 사이트에서 사용할 수 있습니다.
// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav")) 새로운 문자열 및 숫자 메소드
프로토 타입은 내장 문자열 객체에 엄청난 수의 유용한 방법을 추가했습니다. 최고 중 일부를 간단히 살펴 보겠습니다.
// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")
프로토 타입은 숫자에도 훌륭한 방법을 추가합니다. 루프에 대해 작별 인사를하십시오!
$F takes an ID and returns the value of any form field, for instance, a select box like this:
여기서, Times Method는 주어진 횟수라고 불리는 함수를 취하고 현재 반복 번호를 인수로 전달합니다. 이 반복 기능을 사용하는 것은 열거 가능을 사용할 때 일반적입니다. 다음에 논의 할 것입니다.
Ruby Way를 반복 : 열거 가능하고 해시
프로토 타입의 숨겨진 보석 중 하나는 열거 가능한 믹스 인과 해시 물체로, 루비에서 똑바로 데친다. 루비에 익숙하지 않다면 걱정하지 마십시오. 여기에 모두 설명하겠습니다.
우리는 열거 가능한 것으로 시작합니다. 요컨대, Object.Extend를 사용하여 객체에 열거 가능한 추가 할 때, 해당 객체에 속성을 사용하는 데 정말 유용한 기능을 제공합니다. 열거 가능한 배열의 프로토 타입에 열거 가능이 추가되었으므로 모든 배열에는 이러한 새로운 방법이 있습니다. 다음은 새로운 "열거 된"어레이로 할 수있는 일에 대한 몇 가지 예입니다.
해시를 만들려면 모든 객체에서 Magic 함수 $ H를 호출하십시오. 이것은 객체의 모든 속성을 열거 가능한 혼합 된 키 값 쌍 세트로 바꿉니다.<%= javascript_include_tag 'prototype' %>
<br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")
처음에는 루바이저가 아니라면 열거 할 수 있고 해시가 약간 번거 로워 보일 수 있지만, 일단 사용하기 시작하면 루프를 위해 RSI를 쓰는 데 왜 RSI를 쓰지 않았는지 궁금 할 것입니다! 하나 이상을 함께 사용하면이 새로운 방법의 대규모 힘을 알게 될 것입니다. 당신은 할 수 있습니다
"> Encyte Media에서 열거 및 해시에 대해 자세히 읽어보십시오. // all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))
이벤트 개체는 많은 사람들에게 JavaScript의 성배를 제공하는 데 도움이됩니다. 간단한 크로스 브라우저 이벤트 처리 :
다소 즐거운 방식으로 프로토 타입은 페이지가 내릴 때 모든 관찰자를 자동으로 제거하여 성가신 메모리 누출을 피하려고 시도합니다.
내 생각에, 이것은 현재 다소 저개발 된 이벤트 처리 솔루션이므로 Dean Edwards의 Addevent와 같은 약간 더 풍부한 것을 사용하는 것을 고려하는 것이 좋습니다.
처리 양식 // an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")
양식 및 필드 객체는 프로토 타입의 Ajax 구현을 지원하는 코드뿐만 아니라 양식 및 입력 필드로 작업하기위한 여러 가지 간단하지만 편리한 기능을 제공합니다.
형태 객체
일반적으로 양식 객체의 메소드는 요소에 대한 ID 또는 객체 참조를 취합니다.
필드 객체
필드 객체는 개별 양식 요소를 다루며, 그 방법은 일반적으로 양식 객체와 유사한 방식으로 요소에 대한 ID 또는 객체 참조를 취합니다.
형식 직렬화
프로토 타입 용어에서 양식을 직렬화한다는 것은 모든 양식의 요소를 읽고 양식을 제출하면 전송 될 것과 동일한 URL에 인코딩 된 문자열 (거의)으로 전환하는 것을 의미합니다. 예를 들어,이 양식을 고려하십시오 :
<.> 형식은 다른 양식 요소에 액세스하는 방식의 차이점을 영리하게 부드럽게하여 입력, 선택, 확인란 및 라디오 버튼이 올바르게 처리됩니다. Form.serialize는 여러 작업에 유용하지만 곧 알 수 있듯이 Ajax와 함께 작업 할 때 자체적으로 제공됩니다.
이 관찰자들은 데이터가 변경되었는지 여부를 확인하고, 그렇다면 MyCallbackFunction을 호출 할 것입니다.
두 번째 유형의 관찰자는 이벤트 기반이며 요소에 대한 변경 또는 클릭 이벤트가 생성 될 때만 확인을 수행합니다. 다음과 같이 사용할 수 있습니다 :
형식의 모든 필드가 이벤트 핸들러를 지원하는 경우 양식을 관찰하는 훨씬 더 효율적인 방법입니다. 그러나 이러한 이벤트를 지원하지 않는 요소의 변경 사항을 확인하려면 정기적 인 관찰자를 사용하십시오. Dom 작동
프로토 타입에는 4 개의 객체 (요소, 삽입, 관찰자 및 위치)가있어 다양한 형태의 DOM 조작을 허용하고 DOM을 다루는 많은 브라우저 차이에 비해 매끄럽게 화면으로 화면이 분노하게됩니다. 컴퓨터를 창 밖으로 던지는 대신이 섹션을 살펴보십시오.
요소 객체
요소 객체는이 시점에서 아마도 기대할 수있는 방식으로 작동합니다. 대부분의 요소 방법은 단순히 조작하려는 요소에 대한 ID 또는 객체 참조를 가져옵니다. 다음은 가장 유용한 방법 중 일부를 엿볼 수 있습니다 :
Sergio Pereira 사이트의 전체 목록을 참조하십시오
삽입 객체
나는 당신이 생각하는 것을 알고 있습니다. 이것은 조금 이상하게 들립니다. 글쎄, 삽입 객체는 요소 안팎에서 html 덩어리를 추가합니다. 삽입에는 4 가지 유형이 있습니다 : 전, 후, 상단 및 하단. 다음은 ID "Myelement"가있는 요소 전에 HTML을 추가하는 방법입니다.
이 다이어그램은 각 유형의 삽입이 주어진 요소와 관련하여 HTML 컨텐츠를 떨어 뜨릴 위치를 보여줍니다.
<%= javascript_include_tag 'prototype' %>
위치 객체
위치 객체는 화면에 주어진 위치에 대해 알려주고 다른 요소와 관련하여 해당 위치에 대한 정보를 크로스 브라우저 호환 방식으로 제공 할 수있는 많은 방법을 제공합니다. 이것은 애니메이션, 효과 및 드래그 앤 드롭 코드를 작성하는 데있어 많은 충실도를 가져야합니다. 자세한 내용은 위치 참조를 살펴보십시오.
웹 2.0을 로 가져옵니다
“마침내!” 당신은 "그는 우리가 정말로 알고 싶은 것에 대해 계속하고 있습니다." 그렇습니다. 프로토 타입의 Ajax 헬퍼에 들어가기 위해 끝까지 남겨 두었습니다. 왜냐하면 우리가 겪은 다른 모든 것들 위에 세워 졌기 때문에 Ajax에 대해 이야기 할 때 프로토 타입의 양식 직렬화, 관찰자 및 삽입을 이해하는 데 도움이됩니다.
ajax, 지난 몇 년 동안 매우 깊은 구멍에 묻힌 경우, 페이지를 다시로드하지 않고 서버와 통신하기 위해 브라우저의 xmlhttprequest 객체 (또는 이와 동등한)를 사용하는 것을 말합니다. 프로토 타입은 대부분의 세부 사항을 부드럽게하지만 Xmlhttprequest에 대한 약간의 배경을 얻는 것이 좋습니다.
그래서 이제 웹 2.0 조치를 취하기 위해 모두 펌핑되었습니다. 정말 간단한 Ajax 요청을 살펴 보겠습니다.
ajax.request 생성자는 URL과 옵션 객체를 가져옵니다. 이 경우 매개 변수 (이름)를 hello.php로 보내고 응답을 경고하거나 작동하지 않으면 오류를 알립니다). 사용 가능한 옵션에 익숙해지기 위해 시간을 할애 할 가치가 있습니다. 다음은 기본값과 함께 옵션에 대한 개요입니다. 프로토 타입은 모든 AJAX 요청에 사용자 정의 HTTP 헤더를 추가하여 서버 응용 프로그램이 일반 호출이 아닌 AJAX 호출인지 감지 할 수 있도록합니다. 헤더는 다음과 같습니다.
다음은 Ajax 호출을 감지하는 데 사용되는 PHP 기능 예입니다.
이 방법을 사용하면 사용자가 이전 브라우저를 사용하고 있거나 JavaScript가 비활성화되어 있어도 작동하는 Ajax 응용 프로그램을 작성할 수 있지만 다른 기사입니다.
form.serialize를 사용하여 데이터를 ajax.request로 전달합니다
위에서 볼 수 있듯이 매개 변수 옵션은 URL 인코딩 된 변수 문자열을 전달하는 데 사용됩니다. 전송해야 할 데이터가 대부분의 Ajax 응용 프로그램과 마찬가지로 양식으로 설정되면 양식을 사용하여 모든 양식 필드에서 URL 인코딩 된 문자열을 생성하고 매개 변수 옵션으로 전달할 수 있습니다.
<%= javascript_include_tag 'prototype' %>
ajax 이벤트 처리기 쓰기
위의 예에서 onsuccess와 onfailure는 Ajax 이벤트 처리기의 두 가지 예입니다. ajax.request 호출의 옵션 개체에 제공된 이벤트 핸들러 함수는 하나의 인수입니다. 이는 ajax 호출에 대한 xmlhttprequest 객체입니다. 나는 일반적 으로이 인수 응답 또는 resp라고 부릅니다. 이 인수를 사용하여 서버에서 응답을 얻을 수 있습니다.
그러나 resp는 xmlhttprequest 객체 일 뿐이라는 것을 기억하십시오. 따라서 모든 속성을 사용할 수 있습니다. .
X-JSON 응답 헤더에 JSON 데이터를 추가하여 서버에서 JSON으로 데이터를 보낼 수 있습니다. 그러면 자동으로 프로토 타입에 의해 평가되고 두 번째 인수로 전송됩니다. <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3") .
ajax.updater and ajax.periodicalupdater
많은 ajax 작업에는 서버에서 HTML이 반환 된 HTML을 사용하여 페이지의 일부 HTML을 업데이트하는 것입니다. ajax.updater 객체는 ajax를 감싸고 Quest.request를 랩 하고이 공통 사용 사례를 단순화합니다. 간단한 예는 다음과 같습니다.
위의 스 니펫은 단순히 "mydiv"인 요소의 내용을 서버에서 반환 한 내용으로 대체합니다. ajax.periodicalupdater는 비슷하지만 Ajax를 설정 한 간격으로 반복적으로 호출합니다.
Decay 옵션을 사용하면 동일한 응답을 많이 반환하면 서버에 약간의 휴식을 취할 수 있습니다. 기본적으로 정기적 인 Updater가 요청을합니다. 결과는 지난번에 서버가 반환 한 것과 결과를 비교합니다. 값이 동일하면 간격에 붕괴 값을 곱합니다. 따라서 위의 예를 들어, 다음 요청은 2 초 후, 4 초 후에 서버와 다른 결과를 얻을 때까지 이어집니다. 이 시점에서 간격은 1 초까지 재설정됩니다.
응답자가있는 ajax
AJAX 응답자를 사용하면 페이지에서 발생하는 모든 AJAX 요청에 대해 트리거 된 글로벌 이벤트 핸들러를 등록 할 수 있습니다. AJAX 활동이 다량의 응용 프로그램을 관리하는 데 매우 유용합니다. 예를 들어 AJAX 요청이 발생할 때마다 표준로드 애니메이션을 표시 할 수 있습니다.
프로토 타입으로 Ajax의 작업 예제를 찾고 있다면이 기사를 사용해보십시오.
> 다음 어디에?
이 기사를 통해 보았 듯이 프로토 타입은 자체적으로 유용 할뿐만 아니라 다른 전문 라이브러리를 작성하기위한 훌륭한 출발점을 제공합니다. 그것이 바로 점점 더 많은 사람들이하고있는 일입니다.
script.aculo.us 및 moo.fx <%= javascript_include_tag 'prototype' %>
Thomas Fuchs의 script.aculo.us는 현재 whiz-bang 효과와 영리한 UI 위젯에 대해 많은 관심을 받고 있습니다. 그것은 원래 핵심 프로토 타입 라이브러리의 일부 였지만 곧 통제에서 벗어나 부모가 없어졌습니다.
프로토 타입을 기본으로 사용하는 Script.aculo.us는 애니메이션 효과, 사용하기 쉬운 드래그 및 드롭 기능 및 강력한 UI 구성 요소를 통해 풍부한 사용자 경험을 제공하는 전문입니다. 이 사이트에는 멋진 위키가 있으며, 빠르게 성장하는 품질의 문서 저장소가 있으며, 창의적 주스가 흐르기위한 페이지를 예제합니다. Script.aculo.us가 파일 크기가 다소 커지면 여러 파일로 분할되어 사용자가 전체 라이브러리를 다운로드 할 필요가 없으므로 몇 가지 슬라이드 효과를 사용할 수 있습니다. 그러나 개별 파일조차도 상당히 부피가 커집니다.
간단한 효과를 낸 경우 moo.fx를 정말로 추천합니다. 크기는 3k에 불과하며 간단한 Ajax 응용 프로그램에서 필요한 전부가되는 전환 슬라이드 및 페이드 효과를 제공합니다. 자신의 효과를 쓰고 싶다면 좋은 출발점입니다. 프로토 타입의 개체를 사용하여 프로그래밍의 훌륭한 예를 보려면 코드를 살펴보십시오. Valerio는 스크립트 파일 크기를 낮추는 데 매우 중점을두고 있으므로 프로토 타입의 '라이트'버전 (약 10K로 잘게 썬)과 린 버전의 Ajax.request도 있습니다. 볼만한 가치가 있습니다.
동작
동작은 CSS 선택기를 사용하여 문서에 동작을 추가 할 수있는 DOM 스크립팅 툴킷에 큰 도움이됩니다. 다음은 수행 할 수있는 샘플입니다.
행동 사이트에서 이것에 대해 자세히 알아보십시오. 앞에서 논의한 새로운 $$ 함수를 사용하여 비슷한 유형의 일을 달성 할 수 있으므로 결국 중복 될 수 있습니다.
jQuery jQuery는 프로토 타입으로 잘 작동하는 소형 작은 라이브러리이며 XPath 및 CSS 3 Selector를 사용할 수있는 $ 함수의 슈퍼 히어로 버전을 만듭니다. 그것은 매우 간결한 코드를 만드는 매우 영리한 방법 체인 접근법과 그 기능을 연결합니다. 이것을 조심하십시오.
랩 업
프로토 타입은 웹 애플리케이션에 DOM 스크립트 향신료를 추가 할 때 강력한 키트입니다. 불행히도, 그 기능과 도구는 문서보다 훨씬 빠른 속도로 성장했습니다! 우리는이 기사에서 프로토 타입의 모든 구석을 다루었지만 모든 방법은 아닙니다. 그러나 필요한 추가 정보를 얻기 위해 어디로 가야할지 알기를 바랍니다.
더 알고 싶다면 Ronnie Roller의 Prototypedoc.com을 사용해보십시오. 재미있어!
고통없는 JavaScript 프로토 타입에 대한 자주 묻는 질문 (FAQ)
Painless JavaScript 프로토 타입이란 무엇입니까?
고통스러운 JavaScript 프로토 타입은 자체 특성과 방법으로 새로운 객체를 생성 할 수있는 JavaScript의 독특한 기능입니다. 다른 객체를 만들 수있는 청사진입니다. 이 기능은 동일한 속성과 방법으로 여러 객체를 생성하려는 경우 특히 유용합니다. 그것은 코드 재사용 성과 효율성을 촉진합니다.
고통없는 JavaScript 프로토 타입은 다른 JavaScript 기능과 어떻게 다릅니 까?
다른 JavaScript 기능과 달리 고유 한 JavaScript 프로토 타입은 고유 한 특성과 방법으로 객체를 생성 할 수 있습니다. 즉, 동일한 프로토 타입에서 고유 한 특성과 방법으로 여러 객체를 생성 할 수 있습니다. 이것은 단일 객체의 생성 만 허용하는 다른 JavaScript 기능과 다릅니다. 고통없는 JavaScript 프로토 타입을 만드는 방법 고통없는 JavaScript 프로토 타입을 만드는 방법은 프로토 타입으로 작용하는 기능을 정의하고 해당 프로토 타입에서 새로운 객체를 만드는 기능을 정의하는 것이 포함됩니다. 간단한 예는 다음과 같습니다. function car (make, model, year) { 생성 된 후 고통없는 JavaScript 프로토 타입에 특성을 추가 할 수 있습니까?
예, 제작 된 후 고통없는 JavaScript 프로토 타입에 특성을 추가 할 수 있습니다. 이것은 '프로토 타입'속성을 사용하여 수행됩니다. 예는 다음과 같습니다. car.prototype.color = 'black'; 이 예에서는 'Color'속성이 '자동차'프로토 타입에 추가됩니다. 통증이없는 JavaScript 프로토 타입에 메소드를 추가 할 수 있습니까? 예, 고통없는 JavaScript 프로토 타입에 메소드를 추가 할 수 있습니다. 이는 '프로토 타입'속성을 사용하여 속성을 추가하는 것과 같은 방식으로 수행됩니다. 예는 다음과 같습니다. car.prototype.start = function () {
고통없는 자바 스크립트 프로토 타입을 사용하는 것의 이점은 무엇입니까? 프로토 타입은 코드 재사용 성과 효율성입니다. 프로토 타입을 만들면 각 객체에 대한 속성과 메소드를 재정의하지 않고도 동일한 속성과 메소드로 여러 객체를 만들 수 있습니다. 이로 인해 많은 시간을 절약하고 코드를보다 효율적으로 만들 수 있습니다. Painless JavaScript 프로토 타입을 사용하는 데 필요한 단점이 있습니까? Painless JavaScript 프로토 타입을 사용하는 데있어서 한 가지 잠재적 인 단점이 다른 JavaScript 기능보다 이해하고 사용하는 것이 조금 더 복잡 할 수 있다는 것입니다. 그러나 어떻게 작동하는지 이해하면 매우 강력한 도구가 될 수 있습니다.
다른 JavaScript 기능과 함께 고통스러운 JavaScript 프로토 타입을 사용할 수 있습니까? 예, 다른 JavaScript 기능과 함께 Painless JavaScript 프로토 타입을 사용할 수 있습니다. 실제로, 그것은 종종 다른 기능과 함께보다 복잡하고 강력한 애플리케이션을 만들기 위해 사용됩니다. 는 모든 브라우저에서 지원되는 통증없는 JavaScript 프로토 타입입니까? 그러나 사용중인 JavaScript 기능에 대한 특정 브라우저 지원을 확인하는 것이 항상 좋습니다.
통증이없는 JavaScript 프로토 타입에 대해 더 많이 배울 수있는 곳은 어디입니까? 온라인에서 온라인으로 사용할 수있는 많은 리소스가있어 고통없는 JavaScript 프로토 타입에 대해 더 많이 배울 수 있습니다. 시작하기에 좋은 곳은 MDN (Mozilla Developer Network) 및 Codecademy 및 Udemy와 같은 사이트에서 사용할 수있는 다양한 JavaScript 자습서 및 코스를 포함합니다.
이제 들어가자!
