프로토타입을 볼 시간이 없었네요. 이제 1.5 pre1로 업데이트 됐네요. ㅎㅎ 강력한 기능을 배워야겠네요
1. Prototype이 무엇인가요?
아직 사용해보지 않으셨을 수도 있겠지만, Prototype.js는 Sam Stephenson이 작성한 JavaScript 패키지입니다. 이 훌륭하게 고안되고 잘 작성되었으며 표준을 준수하는 코드 조각은 씩 클라이언트(thick client), 고도로 대화형인 웹 애플리케이션을 만드는 부담을 짊어지게 될 것입니다. Web 2.0 기능을 쉽게 추가할 수 있습니다.
최근에 이 패키지를 경험했다면 문서화가 이 패키지의 장점 중 하나가 아니라는 점을 알게 될 것입니다. 이전의 모든 개발자들과 마찬가지로 저는 프로토타입.js 소스 코드를 자세히 살펴보고 그 모든 부분을 실험했습니다. 나는 그를 연구하면서 메모를 하고 다른 사람들과 공유하면 좋겠다고 생각했습니다.
또한 이 패키지의 개체, 클래스, 메서드 및 확장에 대한 비공식 참조도 제공했습니다.
2. 범용 메서드
이 패키지에는 미리 정의된 여러 개체와 범용 메서드가 포함되어 있습니다. 이러한 메서드를 작성하는 분명한 목적은 반복적인 코딩과 관용어를 많이 줄이는 것입니다.
Prototype 1.5.x 버전부터 다음과 같이 DOM 객체를 보다 편리하게 조작할 수 있습니다.
var ele = $("myelement")
hide() / /이전 버전과 비교하여 DOM 개체 숨기기 var ele = $("myelement");
Element.hide(ele); //DOM 개체 숨기기
이러한 변경의 이점은 무엇입니까? ? 내 생각에는 첫째, 객체 지향적이며 둘째, IDE에서 향후 코드 프롬프트를 용이하게 할 것입니다.
2.1. $() 메소드 사용
$() 메소드는 DOM 메소드와 마찬가지로 DOM에서 너무 자주 사용되는 document.getElementById() 메소드의 편리한 단축형입니다. , 이 메소드는 매개변수로 전달된 ID를 가진 요소를 반환합니다.
DOM의 방식보다 더 좋습니다. 여러 ID를 매개변수로 전달할 수 있으며 $()는 모든 필수 요소가 포함된 Array 객체를 반환합니다. 다음 예에서는 이에 대해 설명합니다.
테스트 페이지 <br><script src="prototype-1.3.1.js"> </script> <br><br><script> <br/> function test1() <br/> { <br/> var d = $('myp') <br/> 🎜> } <br/><br/> function test2() <br/> { <br/> var ps = $('myp','myOtherp') <br/> for(i=0; i<ps.length; i ) <br/> { <br/> 경고(ps[i].innerHTML) <br/> } <br/> } <br/></script> <br/></HEAD> <br/> ; ;<br> <br/> <input type="button" value=Test2 onclick="test2();"><br> <br/></HTML> <br/><br/><br/><br/>이 방법의 또 다른 이점은 ID 문자열이나 요소 개체 자체를 전달할 수 있다는 것입니다. 형식 매개변수를 전달합니다. <br/><br/><br/>2.2. $F() 메서드 사용 <br/> <br/>$F() 메서드는 또 다른 인기 있는 약어입니다. 텍스트 상자나 드롭다운 상자와 같은 입력 양식 컨트롤의 값을 반환할 수 있습니다. 이 메소드는 요소의 ID 또는 요소 자체를 전달할 수 있습니다. <br/><p class="codebody"><script> <br/> function test3() <br/> { <br/> Alert( $F('userName') <br/> } <br/></script> type="text" id="userName" value="Joe Doe"><br> <br/><input type="button" value=Test3 onclick="test3();"><br> <br/><br/><p><br/>2.3. Try.these() 메소드 사용 <strong> Try.these() 메소드는 하나까지 다른 메소드를 호출하고 싶을 때 구현 가능합니다. 일반적으로 이 요구 사항은 일련의 메서드를 매개 변수로 사용하고 해당 메서드 중 하나가 성공적으로 실행될 때까지 이러한 메서드를 하나씩 순서대로 실행하고 성공적으로 실행된 메서드의 반환 값을 반환합니다. <br/><br/>아래 예에서 xmlNode.text는 일부 브라우저에서 제대로 작동하지만 xmlNode.textContent는 다른 브라우저에서 잘 작동합니다. Try.these() 메서드를 사용하면 정상적으로 작동하는 메서드의 반환 값을 얻을 수 있습니다. <br/><script> <p class="codebody">function getXmlNodeValue(xmlNode){ <br/> return Try.these( <br/> function() {return xmlNode.text;}, <br/> function() {return xmlNode .textContent;) <br/> ); <br/>} <br/></script> 일반적인 방법은 훌륭하지만 현실적으로 가장 발전된 방법은 아닙니다. 그렇습니까? 아마도 이러한 메서드를 직접 작성했거나 스크립트에 유사한 기능이 있을 수도 있습니다. 그러나 이러한 방법은 빙산의 일각에 불과합니다. <br/><br/>당신이 프로토타입.js에 관심을 갖는 이유는 아마도 AJAX 기능 때문일 것이라고 확신합니다. 이제 AJAX 로직을 완료해야 할 때 이 패키지가 어떻게 더 쉬워지는지 설명하겠습니다. <p>Ajax 객체는 AJAX 기능 작성과 관련된 까다로운 코드를 캡슐화하고 단순화하기 위해 이 패키지에서 생성된 사전 정의된 객체입니다. 이 개체에는 AJAX 논리를 캡슐화하는 일련의 클래스가 포함되어 있습니다. 그 중 일부를 살펴보겠습니다. <br/><strong>3.1. Ajax.Request 클래스 사용 <br/><br/>헬퍼 패키지를 사용하지 않는다면 아마도 XMLHttpRequest 객체를 생성하고 추적하기 위해 많은 코드를 작성하고 있을 것입니다. 비동기식으로 처리한 다음 응답을 구문 분석하여 처리합니다. 두 가지 이상의 브라우저 유형을 지원할 필요가 없다면 운이 좋을 것입니다. <br/><br/>AJAX 기능을 지원합니다. 이 패키지는 Ajax.Request 클래스를 정의합니다. <br/><br/>URL http://www.php.cn/을 통해 서버와 통신할 수 있는 애플리케이션이 있다고 가정합니다. 아래와 같은 XML 응답을 반환합니다. <br/><strong><?xml version="1.0" 인코딩="utf-8" ?> <ajax-response> <br/> <response type="object" id="productDetails" > <br/> 연월> ~ id> /직원-판매> <br/> </월별 -판매> <br/> </response> ajax 응답><br/><p><br/>Ajax.Request 객체를 사용하여 서버와 통신하고 이 XML을 얻는 것은 매우 간단합니다. 아래 예에서는 이를 수행하는 방법을 보여줍니다. <p class="codebody"><script> <br/> function searchSales() <br/> { <br/> var empID = $F('lstEmployees') <br/> var y = $F('lstYears'); 🎜> var url = 'http://yoursever/app/get_sales'; <br/> var pars = 'empID=' empID '&year=' y <br/> var myAjax = new Ajax.Request( <br/> URL, <br/> > lt; /script> <br/><br/><select id="lstEmployees" size= "10" onchange="searchSales()"> <br/> <option value="5">Buchanan, Steven</option> ; <br/> <option value="8">캘라한, 로라</ 옵션> <br/> <옵션 값="1">다볼리오, 낸시</option> 🎜><select id="lstYears" size="3" onchange="searchSales ()"> <br/> <option selected="selected" value="1996">1996</option> <option value="1997">1997</option> <br/> < ;option value="1998">1998</option> <br/></select><br/><textarea id=result cols=60 행=10 ></textarea> <br/><br/><p><br/>Ajax.Request 생성자에 전달된 두 번째 객체를 보셨나요? 매개변수 {method: 'get', 매개변수: pars, onComplete: showResponse}는 익명 객체의 실제 쓰기를 나타냅니다. 이는 전달한 객체에 값이 'get'인 method라는 속성, HTTP 요청의 쿼리 문자열이 포함된 매개변수라는 또 다른 속성, showResponse 함수가 포함된 onComplete 속성/메서드가 있다는 의미입니다. <… <br/><br/>이 매개변수는 AJAX 호출에 대한 옵션을 정의합니다. 예제에서 첫 번째 매개변수로 HTTP GET 명령을 통해 해당 URL을 요청하고 pars 변수에 포함된 쿼리 문자열을 전달하면 Ajax.Request 객체는 응답 수신이 완료되면 showResponse 메서드를 호출합니다. <br/><br/>아시다시피 XMLHttpRequest는 HTTP 요청 중에 진행 상황을 보고합니다. 이 진행 상황은 로드 중, 로드됨, 대화형 또는 완료의 네 가지 단계로 설명됩니다. 어떤 단계에서나 Ajax.Request 객체가 사용자 정의 메서드를 호출하도록 할 수 있습니다. Complete가 가장 일반적으로 사용됩니다. 사용자 정의 메소드를 호출하려면 요청의 옵션 매개변수에 있는 onXXXXX 속성/메소드에 사용자 정의 메소드 객체를 제공하기만 하면 됩니다. 우리 예의 onComplete와 같습니다. 전달한 메서드는 XMLHttpRequest 개체 자체인 하나의 매개 변수를 사용하여 호출됩니다. 이 개체를 사용하여 반환된 데이터를 가져오고 이 호출에서 HTTP 결과 코드가 포함된 상태 속성을 확인할 수도 있습니다. <br/><br/>결과를 처리하는 데 유용한 두 가지 다른 옵션이 있습니다. onSuccess 옵션에 메소드를 전달하여 AJAX가 오류 없이 실행될 때 이를 호출할 수도 있고, 반대로 서버 측에서 오류가 발생할 때 onFailure 옵션에 메소드를 전달하여 호출할 수도 있습니다. onXXXXX 옵션에 전달된 메소드와 마찬가지로 이 두 가지도 호출 시 AJAX 요청과 함께 XMLHttpRequest 객체를 전달합니다. <br/><br/>우리의 예에서는 XML 응답을 흥미로운 방식으로 처리하지 않고 단지 XML을 텍스트 필드에 넣었습니다. 이 응답에 대한 일반적인 응용 프로그램은 원하는 정보를 찾은 다음 페이지의 일부 요소를 업데이트하거나 일부 XSLT 변환을 수행하여 페이지에서 일부 HTML을 생성하는 것일 수 있습니다. <br/><br/><br/>3.2. Ajax.Updater 클래스 사용 <br/> <strong>서버의 다른 쪽 끝에서 반환된 정보가 이미 HTML인 경우 이 패키지의 Ajax.Updater 클래스를 사용하면 됩니다. 당신의 삶이 더 쉬워집니다. 이를 통해 AJAX 요청에 의해 반환된 HTML로 채워야 하는 요소를 제공하기만 하면 됩니다. 이 예는 제가 작성한 것보다 더 명확합니다. <br/><script> function getHTML() <p class="codebody"> { <br/> var url = 'http://yourserver/app/getSomeHTML' <br/> var pars = 'someParameter=ABC' ; <br/><br/> var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', 매개변수: pars}) <br/></script> 🎜><input type=button value=GetHtml onclick="getHTML()"> <br/><p id="placeholder"></p> <br/><br/><br/><br/> 이 코드는 이전 예제보다 더 간결하고 onComplete 메서드를 포함하지 않지만 생성자에 요소 ID가 전달되는 것을 볼 수 있습니다. 클라이언트 측에서 서버 분할 오류를 처리하는 방법을 설명하기 위해 코드를 약간 수정해 보겠습니다. <br/><br/>오류 처리 방법을 지정하는 옵션을 더 추가할 예정입니다. 이는 onFailure 옵션을 사용하여 수행됩니다. <p>요청이 성공한 후에만 채워지는 자리 표시자도 지정합니다. 이를 달성하기 위해 첫 번째 매개변수를 간단한 요소 ID에서 성공(모든 것이 정상일 때 사용됨)과 실패(뭔가 잘못되었을 때 사용됨)의 두 가지 속성이 있는 객체로 변경했습니다. 다음 예에서는 실패 속성이 사용되지 않지만 onFailure에서는 reportError 메소드만 사용됩니다. <br/><p class="codebody"><script> <br/> 함수 getHTML() <br/> { <br/> var url = 'http://yourserver/app/getSomeHTML' <br/> var pars = 'someParameter=ABC'; > var myAjax = new Ajax.Updater( <br/> {success: 'placeholder'}, <br/> url, <br/> {method: 'get', 매개변수: pars, onFailure: reportError}) <br/><br/> } <br/><br/> function reportError(request) <br/> { <br/> Alert('죄송합니다. 오류가 발생했습니다.') <br/> } <br/></script> input type=button value=GetHtml onclick="getHTML()"> <br/><p id="placeholder"></p> <br/><br/><br/>서버가 논리는 단순한 HTML 마크업 대신 JavaScript 코드를 반환하는 것이며 Ajax.Updater 객체는 해당 JavaScript 코드를 실행할 수 있습니다. 이 객체가 응답을 JavaScript로 처리하도록 하려면 객체 생성자의 마지막 매개변수에 evalScripts: true 속성을 추가하기만 하면 됩니다. <p><br/><br/></script>
