프로토타입 JavaScript 프레임워크
Prototype JavaScript Framework| 원저작자 | 샘 스티븐슨 |
|---|---|
| 개발자 | 시제품 핵심팀 |
| 초기 릴리즈 | 2005년 2월, 전( |
| 안정된 릴리스 | 1.7.3 / 2015년 9월 , 전( |
| 저장소 | |
| 기입처 | 자바스크립트 |
| 유형 | 자바스크립트 라이브러리 |
| 면허증. | MIT 라이선스 |
| 웹 사이트 | prototypejs |
프로토타입 JavaScript Framework는 2005년 2월 Sam Stephenson에 의해 Ruby on Rails에서 Ajax 지원의 일부로 작성된 JavaScript Framework입니다.보통 이름이 붙은 JavaScript 코드의 단일 파일로 구현됩니다.prototype.js시제품은 독립형으로 배포되지만 Ruby on Rails, script.aculo.us 및 Rico와 같은 대규모 프로젝트의 일부이기도 합니다.2021년 3월 현재 w3techs에 따르면 시제품은 전체 웹사이트의 [1]0.6%에서 사용되고 있다.
특징들
프로토타입은 JavaScript 어플리케이션 개발을 위한 다양한 기능을 제공합니다.기능은 프로그래밍 바로 가기부터 XMLHttpRequest를 처리하기 위한 주요 함수까지 다양합니다.
프로토타입은 클래스 및 클래스 기반 [2]개체를 지원하는 라이브러리 기능도 제공합니다.JavaScript에서 객체 생성은 프로토타입 기반이다: 객체 생성 함수는 다음을 가질 수 있다.prototype속성 및 해당 속성에 할당된 객체는 해당 함수로 작성된 객체의 프로토타입으로 사용됩니다.프로토타입 프레임워크는 이 언어 기능과 혼동해서는 안 됩니다.
유틸리티 함수 예시
$() 함수
달러 함수 $()는 getElementById 함수의 약자로 사용할 수 있습니다.HTML 페이지의 Document Object Model(DOM)에서 요소를 참조하기 위해 요소를 식별하는 일반적인 함수는 다음과 같습니다.
문서.요소 취득 기준아이디("id_of_internal").스타일..색. = "#ffffff"; $() 함수는 코드를 다음과 같이 줄입니다.
$("id_of_internal").set Style({색.: '#ffffff'}); $() 함수는 또한 요소를 매개 변수로 수신할 수 있으며 이전 예시와 같이 확장 개체 프로토타입을 반환합니다.
변화하다 돔 요소 = 문서.요소 취득 기준아이디("id_of_internal"); // 일반 개체 참조가 반환되었습니다. 변화하다 시제품 Enhanced DomainElement = $(돔 요소); // 프로토타입 확장 객체 참조 - 주의: 밑줄처럼(
_),$character는 JavaScript 식별자의 합법적인 "워드 문자"이며 언어에는 다른 의미가 없습니다.이는 정규 표현에 대한 지원과 동시에 언어에 추가되어 다음과 같은 Perl 유사 일치 변수를 에뮬레이트할 수 있게 되었습니다.프로토타입 JavaScript 프레임워크 - 요다위키
$F() 함수
위에 구축$()기능:$F()함수는 요청된 폼 요소의 값을 반환합니다.'텍스트' 입력의 경우 함수는 요소에 포함된 데이터를 반환합니다.'선택' 입력 요소의 경우 함수는 현재 선택된 값을 반환합니다.
F달러("id_of_input_module") $() 함수
달러 기능은 시제품의 CSS 셀렉터 엔진이다.CSS 스타일시트의 셀렉터와 같은 규칙에 따라 일치하는 모든 요소를 반환합니다.예를 들어, 모든 것을 얻으려면<a>클래스 "containate"의 요소는 다음과 같습니다.
$("a.certificate") 요소의 컬렉션을 반환합니다.핵심 프로토타입 라이브러리의 script.aculo.us 확장 버전을 사용하는 경우 다음과 같이 "인증"(예:) 효과를 적용할 수 있습니다.
$("a.certificate").각각(영향.맥동); Ajax 객체
크로스 브라우저 실행에 필요한 코드 양을 줄이기 위해XMLHttpRequest기능, 프로토타입을 통해Ajaxobject를 사용하여 여러 브라우저를 추상화합니다.여기에는 주로 두 가지 방법이 있습니다.Ajax.Request()그리고.Ajax.Updater()에는 두 가지 형식이 있습니다.Ajax물건. Ajax.RequestAJAX 콜로부터의 원시 XML 출력을 반환하고,Ajax.Updater는 지정된 DOM 오브젝트 내부에 반환을 주입합니다.그Ajax.Request아래는 2개의 HTML 형식 입력 요소의 현재 값을 찾아 이러한 요소 이름과 값의 쌍을 사용하여 서버에 HTTP POST 요구를 발행하고 커스텀 함수(콜명)를 실행합니다.showResponse서버로부터 HTTP 응답을 수신했을 경우:
신규 아약스.부탁한다("http://localhost/server_script", { 파라미터: { 값 1: F달러("form_form_id_1"), 값 2: F달러("form_form_id_2") }, 성공 시: show Response(show Response), 장애 발생 시: show Error(표시 오류) }); 객체 지향 프로그래밍
또한 프로토타입은 기존의 객체 지향 프로그래밍을 지원합니다.그Class.create()method를 사용하여 새 클래스를 만듭니다.그런 다음 클래스가 할당됩니다.prototype클래스 인스턴스의 Blueprint 역할을 합니다.
변화하다 퍼스트 클래스 = 학급.만들다( { // 초기화 메서드는 생성자 역할을 합니다. 초기화하다: 기능. () { 이것..데이터. = '헬로 월드'; } }); 다른 클래스 확장:
아약스.부탁한다 = 학급.만들다( 아약스.기초, { // 초기화 메서드 재정의 초기화하다: 기능.(url, 옵션들) { 이것..운송 = 아약스.get Transport(트랜스포트)(); 이것..set옵션(옵션들); 이것..부탁한다(url); }, //...추가 메서드 추가... }); 프레임워크 기능Object.extend(dest, src)는 2개의 오브젝트를 파라미터로 하여 두 번째 오브젝트의 속성을 첫 번째 오브젝트에 복사하여 상속을 시뮬레이트합니다.결합된 개체도 함수의 결과로 반환됩니다.위의 예시와 같이 첫 번째 파라미터는 보통 기본 객체를 생성하고 두 번째 파라미터는 추가 속성을 정의하기 위해 사용되는 익명 객체입니다.서브 클래스 선언 전체가 함수 호출의 괄호 안에서 발생합니다.
문제
jQuery와 같은 다른 JavaScript 라이브러리와 달리 프로토타입은 DOM을 확장합니다.라이브러리의 다음 [3]주요 버전에서 이를 변경할 계획이 있습니다.
2010년 4월, 블로거 Jury 'kangax' Zaytsev(프로토타입 코어)는 원숭이가 W3C [3]DOM에 의해 정의된 오브젝트에 새로운 메서드와 속성을 패치할 때 발생할 수 있는 문제를 상세히 설명했습니다.이 아이디어들은 야후 개발자인 니콜라스 C[4]. Zakas에 의해 2010년 3월에 출판된 생각들을 반영한다.그것들은 다음과 같이[5] 요약된다.
- 크로스 브라우저 문제: 호스트 개체는 규칙, IE DOM 비준수 동작 등의 영향을 받지 않습니다.
- 이름 충돌 가능성
- 퍼포먼스 오버헤드
2008년 이전 버전의 프로토타입에서 DOM 확장 메서드를 사용할 때의 특정 문제가 현재 브라우저의 새 버전과 결합되어 이미 [6]문서화되었습니다.기존 '호스트' DOM 오브젝트에 새로운 메서드와 속성을 추가하는 것이 아니라Element,맘에 들다element.hide()이러한 문제에 대한 해결책은 이러한 호스트 오브젝트 주위에 래퍼 오브젝트를 제공하고 이러한 오브젝트에 새로운 메서드를 실장하는 것입니다. jQuery는 [3]같은 이름의 라이브러리에 있는 래퍼 객체입니다.
이제 이러한 아이디어와 문제의 대부분은 프로토타입 2.0 릴리스에서 해결될 것으로 예상되지만 프로토타입 개발자들은 변경된 구문과 함께 작업하는 법을 배워야 하며, 기존의 프로토타입 코드는 시대에 [5]뒤떨어질 것입니다.
「 」를 참조해 주세요.
- Ajax(프로그래밍)
- JavaScript 프레임워크 비교
- Mootools JavaScript 프레임워크
- j쿼리
- 자바스크립트 프레임워크
- 자바스크립트 라이브러리
레퍼런스
- ^ "Usage Statistics and Market Share of JavaScript Libraries for Websites, March 2021". w3techs.com. Retrieved 27 March 2021.
- ^ "Prototype JavaScript Framework Defining classes and inheritance". prototypejs.org. Retrieved 5 June 2020.
- ^ a b c kangax (5 April 2010). "What's wrong with extending the DOM". Retrieved 6 April 2010.
- ^ Zakas, Nicholas C. (2 March 2010). "Maintainable JavaScript: Don't modify objects you don't own". Retrieved 6 April 2010.
- ^ a b Almaer, Dion (6 April 2010). "Prototype 2.0 will not extend the DOM". Retrieved 6 April 2010.
- ^ Resig, John (26 March 2008). "getElementsByClassName pre Prototype 1.6". Retrieved 6 April 2010.
참고 문헌
- Orchard, Leslie M.; Pehlivanian, Ara; Koon, Scott; Jones, Harley (31 August 2009). Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools (1st ed.). Wrox Press. p. 888. ISBN 978-0-470-38459-6.
외부 링크
리스트