프로토타입1.5 첫 경험_프로토타입-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

프로토타입1.5 첫 경험_프로토타입

PHP中文网

May 16, 2016 pm 07:25 PM

프로토타입을 볼 시간이 없었네요. 이제 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 객체를 반환합니다. 다음 예에서는 이에 대해 설명합니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7342

자바 튜토리얼

1627

Cakephp 튜토리얼

1352

라라벨 튜토리얼

1265

PHP 튜토리얼

1210

Related knowledge

JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

예제 색상 JSON 파일 Mar 03, 2025 am 12:35 AM

이 기사 시리즈는 2017 년 중반에 최신 정보와 새로운 예제로 다시 작성되었습니다. 이 JSON 예에서는 JSON 형식을 사용하여 파일에 간단한 값을 저장하는 방법을 살펴 봅니다. 키 값 쌍 표기법을 사용하여 모든 종류를 저장할 수 있습니다.

8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다