JS 애플리케이션 개발에 대한 예비 연구(mootools)

JS 애플리케이션 개발에 대한 예비 연구(mootools)_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:38:43

원래의

1396명이 탐색했습니다.

세 개의 작은 데모를 만들었습니다. 원래는 Gmail과 유사한 인터페이스를 만들고 싶었지만 갑자기 컴퓨터에 Office가 없다는 것을 알게 되었기 때문에 간단히 PPT 프리젠테이션과 유사한 가젯을 만들었습니다.

JS 기반 애플리케이션 개발의 주요 포인트는 다음과 같습니다.

Encapsulation granularity
공용 기능을 재사용 가능한 컴포넌트로 캡슐화하는 컴포넌트 encapsulation granularity를 합리적으로 선택해야 합니다. 입도가 너무 크면 재사용이 쉽지 않고, 입도가 너무 작으면 이득이 손실보다 크다.

코드 구조 계획
전통적인 소프트웨어 개발 아이디어를 흡수하고 기능에 따라 코드를 여러 블록으로 나눕니다: 초기화, 이벤트 바인딩, 이벤트 로직 처리, 외부 콜백 호출

Js 객체 지향
간단함을 위해 생성자(실제로는 일반 함수) 프로토타입 정의를 사용할 수 있습니다. 비록 매우 우아해 보이지는 않지만 보다 직접적인 솔루션입니다. Mootools 클래스 라이브러리는 jQuery와 비교할 때 개인적으로 사용하기 더 좋습니다. 물론 자체 클래스 선언 방법을 사용하여 자신만의 클래스를 작성할 수도 있습니다. >

코드 복사 코드는 다음과 같습니다.

Meta.Controls.Pager = new Class({ 
Implements : [Events, Options], 
options: { 
pageIndex :1, // 현재 페이지 번호, 1부터 시작
size : 10, //각 페이지에 표시되는 레코드 수
maxButtons : 5,/ / 표시되는 페이징 버튼 수 
showPageSize:true, // 페이징 크기 옵션 표시 
sizeArray:[10, 25] 
}, 
initialize: 함수 (A) { 
this.setOptions(A); 
this.pageIndex = this.options.pageIndex; 
this.size = this.options.size; 
this.maxButtons; 
this.itemCount = 0; 
this.pageCount =0; 
}, 
... 
} 

 

이 방법도 좋은 선택입니다. 코드 논리 구조 한눈에 보기

유닛 테스트
일반적으로 브라우저에서 js 애플리케이션의 유닛 테스트는 DOM과 너무 밀접하게 관련되어 있기 때문에 어렵다고 알려져 있지만, Google의 Closure는 Mock 객체를 사용하여 Dom 요소를 시뮬레이션하고 코드 논리와 Dom 객체 작업을 분리하는 등 완전히 불가능한 것은 아닙니다.
이 예제에 대한 코드는 다음과 같습니다. 🎜>다운로드하세요
.