1. 소개
최근에 저는 대규모 온라인 뱅킹 프로젝트의 프론트 엔드 최적화를하고 있습니다. 뚱뚱한 클라이언트 최적화를 사용해야합니다. 일반적인 아이디어는 프론트 엔드가 AJAX 요청을 사용하여 백엔드에서 데이터를 얻고 Jason 형식으로 반환 한 다음 페이지에 표시한다는 것입니다. 이 시스템은 매우 크기 때문에 Fat Client Solution은 필연적으로 클라이언트에 많은 JS 코드를 작성해야합니다. 나는 모든 팀이 많은 양의 구조화되지 않은 코드를 유지하는 것이 매우 불편하다고 생각합니다. 그래서 백본이 내 시야에 들어 왔습니다.
JS 코드를 구조화하는 방법을 제공하여 프론트 엔드 JS 코드를 객체 지향 방식으로 구성 할 수 있습니다. 이것은 우리가 프론트 엔드에 도메인 구동 설계를 적용하는 것과 같습니다. 모듈별로 매우 큰 프로젝트를 분할 할 수 있습니다. 각 모듈은 백본 요구 사항에 따라보기, 모델 및 라우터로 나눌 수 있습니다.
백본을 사용하면 데이터를 모델로 처리 할 수 있습니다. 모델을 사용하면 데이터를 작성하고 데이터를 확인하고 서버에 파괴하거나 저장할 수 있습니다. 인터페이스에서의 작업으로 인해 모델의 속성이 변경 될 때 모델은 변경 이벤트를 트리거합니다. 모델 상태를 표시하는 데 사용되는 뷰는 모델이 변경 사항을 트리거 한 다음 해당 응답을 발행 한 다음 새 데이터를 인터페이스에 다시 렌더링한다는 메시지를받습니다. 완전한 백본 응용 프로그램에서는 DOM의 특수 ID를 통해 노드를 얻거나 HTML 페이지를 수동으로 업데이트하기 위해 접착제 코드를 작성할 필요가 없습니다. 모델이 변경되면보기가 쉽게 업데이트되기 때문입니다.
2. 기능
Backbone은 페이지에서 많은 수의 JS 관리를 구조화하고 서버 및 뷰와 완벽한 연결을 설정하며 복잡한 애플리케이션을 구축하기위한 기본 프레임 워크를 제공하는 데 사용되는 가벼운 프론트 엔드 프레임 워크입니다.
백본의 주요 특징과 특성을 간단히 설명하겠습니다.
2.1 경량
백본의 소스 코드는 약 1000 줄 (분해 및 빈 줄 후)에 불과하고 파일 크기는 16KB에 불과하며 종속성 라이브러리 밑줄은 29KB에 불과합니다.
백본의 내부 구현을 쉽게 이해하기 위해 약간의 시간을 소비하면됩니다. 또는 백본의 일부 메커니즘을 과부하시키기 위해 소량의 코드를 작성하십시오. 백본을 기반으로 2 차 개발을하고 싶다면 복잡한 일이 아닙니다.
2.2 구조
백본은 페이지에서 데이터, 논리 및보기를 쉽게 분리하고 백본에 따라 코드 구조를 구성 할 수 있습니다. 프로젝트의 데이터 상호 작용, 비즈니스 로직, 사용자 인터페이스 및 기타 작업을 여러 동료에게 동시에 개발하여 순서대로 구성 할 수 있습니다. 동시에, 이것은 크고 복잡한 프로젝트의 유지 보수 및 개발에 매우 도움이됩니다.
2.3 상속 메커니즘
백본에서는 모듈을 상속받을 수 있습니다. 응용 프로그램의 데이터 모델, 컬렉션 및보기를 객체 지향적 인 방식으로 구성하여 전체 아키텍처를 더 명확하게 만들 수 있습니다. 사용자 정의 메소드를 쉽게 과부하하고 확장 할 수도 있습니다.
2.4 서버와 원활한 연결을 설정합니다
Backbone에는 서버 데이터와 함께 내장 된 상호 작용 규칙이 내장되어 있으며 (REST 아키텍처를 이해하는 경우 쉽게 이해할 수 있음) 데이터 동기화가 모델에서 자동으로 수행됩니다. 프론트 엔드 개발자는 클라이언트 데이터에서만 작동하면되며 백본은 작동 데이터를 서버와 자동으로 동기화합니다.
서버 데이터 인터페이스가 프론트 엔드 개발자에게 투명하고 더 이상 서버와 상호 작용하는 방법에 대해 신경 쓰지 않기 때문에 이것은 매우 흥미로운 일입니다.
그러나 서버가 제공하는 데이터 인터페이스도 백본 규칙과 호환되어야합니다. 새로운 프로젝트의 경우이 규칙 세트를 사용하여 인터페이스를 구축 할 수 있습니다. 그러나 프로젝트에 이미 안정적인 인터페이스 세트가 있다면 인터페이스 수정의 위험에 대해 걱정할 수 있습니다.
문제가되지 않습니다. Backbone.sync 메소드를 과부하시켜 기존 데이터 인터페이스에 적응할 수 있습니다. 다른 클라이언트 환경의 경우 다른 데이터 상호 작용 방법을 구현할 수도 있습니다. 예를 들어, 사용자가 PC 브라우저를 통해 서비스를 사용하면 데이터가 실시간으로 서버와 동기화됩니다. 사용자가 모바일 터미널을 통해 서비스를 사용하면 네트워크 환경 문제를 고려할 때 먼저 데이터를 로컬 데이터베이스에 동기화 한 다음 적절한 경우 서버에 동기화 할 수 있습니다. 그리고 이것들은 하나의 방법을 과부하로 인해 달성 할 수 있습니다.
2.5 인터페이스 이벤트 관리
MVC에서는 인터페이스 프리젠 테이션 및 비즈니스 로직을 완전히 분리하기를 희망하지만 사용자가 생성 한 대화식 이벤트 (예 : 클릭 이벤트)의 경우 종종 jQuery와 유사한 바인드 방법을 통해이를 얻고 바인딩합니다.
백본의보기는 사용자 이벤트 및 실행 방법을 질서있게 구성하는 데 도움이되므로 다음과 같은 간단한 표현을 선언해야합니다.
이벤트 : {// id "저장"으로 요소를 클릭하면 뷰의 추가 메소드를 실행합니다.표현식에서 이벤트 이름은 모든 DOM 이벤트 (예 : 클릭, 마우스 오버, 키 프레스 등) 일 수 있으며 요소는 jQuery (예 : TAG 선택기, ID 선택기, 클래스 선택기 등)에서 지원하는 선택기 일 수 있습니다.
보기는 표현식의 이벤트를 선택기 요소에 자동으로 바인딩합니다. 요소의 이벤트가 트리거되면,보기는 표현식의 바운드 메소드를 자동으로 호출합니다.
2.6 경량 템플릿 분석
템플릿 구문 분석은 밑줄에 제공된 방법입니다. 백본 기능을 도입 할 때 밑줄에서 방법을 소개하는 이유는 무엇입니까? 이 방법은 우리가 더 나은 별도의보기 구조와 논리를 도울 수 있기 때문에 밑줄은 백본이 의존 해야하는 라이브러리입니다.
템플릿 구문 분석 방법은 JSP 페이지에 포함 된 Java 코드와 마찬가지로 HTML 구조에 JS 코드를 혼합하고 포함시킬 수 있습니다.
<ul> <%(var i = 0; i <len; i ++) {%> <li> <%= data [i] .Title%> </li> <%}%> </li>템플릿 구문 분석을 통해 HTML 구조를 동적으로 생성 할 때 문자열을 스플 라이스 할 필요가 없습니다. 더 중요한 것은보기에서 독립적으로 HTML 구조를 관리 할 수 있습니다 (예 : 다른 상태는 다른 HTML 구조를 표시 할 수 있으며, 여러 별도의 템플릿 파일을 정의하고 필요에 따라로드 및 렌더링 할 수 있습니다).
2.7 맞춤형 이벤트 관리
백본에서는 ON 또는 OFF 메소드를 사용하여 사용자 정의 이벤트를 바인딩하고 제거 할 수 있습니다. 어디서나 트리거 메소드를 사용하여 이러한 바운드 이벤트를 트리거 할 수 있으며 이벤트를 바인드 한 모든 메소드가 실행됩니다.
var model = new backbone.model (); // 모델 객체 모델에서 두 가지 함수를 사용자 정의 이벤트 사용자 정의에 바인딩합니다 ( 'custom', function (p1, p2) {// todo}); model.on ( 'custom', function (p1, p2) {// todo}); // 사용자 정의 이벤트를 트리거하면 위의 두 기능은 model.trigger ( 'custom', 'value1', 'value2')라고합니다. // 사용자 정의 이벤트 모델에 바인딩 된 모든 메소드를 제거합니다 .Off ( 'Custom'); // 사용자 정의 이벤트를 트리거하지만 기능은 실행되지 않습니다. 이벤트의 함수는 이전 단계 모델에서 제거되었습니다 .trigger ( 'Custom');jQuery에 익숙하다면 jQuery에서 Bind, Unbind 및 트리거 방법과 매우 유사하다는 것을 알게됩니다.
또한 백본은 특별한 이벤트 "All"을 지원합니다. "All"이라는 이벤트가 객체에 바인딩되면 "All"이벤트에 바인딩 된 메소드도 트리거 될 때 트리거됩니다. 때때로이 방법은 매우 유용 할 수 있습니다. 예를 들어, "모든"이벤트를 통해 객체 상태의 변경 사항을들을 수 있습니다.
3. 라우터
단일 페이지 응용 프로그램에서는 JavaScript를 통한 인터페이스의 전환 및 프리젠 테이션을 제어하고 AJAX를 통해 서버에서 데이터를 얻습니다.
발생할 수있는 문제는 사용자가 이전 작업으로 돌아 가기를 원할 때 브라우저의 "뒤로"및 "전방"버튼을 습관적으로 사용할 수 있지만 결과는 사용자가 같은 페이지에 있음을 알지 못하기 때문에 전체 페이지가 전환됩니다.
이 문제의 경우, 우리는 종종 해시 (앵커 포인트)를 사용하여 사용자의 현재 위치를 기록하고 OnhashChange 이벤트를 통해 사용자의 "전진"및 "반환"액션을 듣지 만 IE6과 같은 일부 버전의 브라우저가 OnhashChange 이벤트를 지원하지 않는다는 것을 발견했습니다.
백본은 라우팅 제어 기능을 제공합니다. 백본에서 제공하는 라우터를 통해 간단한 표현식을 통해 라우팅 주소와 이벤트 기능을 함께 바인딩 할 수 있습니다.
var customRouter = backbone.router.extend ({lours : { '': 'index', // url hash가 루트 디렉토리에있을 때 : url# 'list'. Query 메소드에 대한 매개 변수로 전달하십시오. URL#list/1001 '*오류': '샤워러'// URL HASH가 위의 규칙과 일치하지 않을 때 : alert ( 'index'), getlist () {alert (getList}); : function (error) {alert ( 'error hash :' + error); var custom = new CustomRouter (); backbone.history.start ();이 코드를 페이지에 복사하고 다음 주소에 다음 주소에 액세스하십시오 (URL이 페이지 주소를 표시하는 경우).
urlurl#listurl#detail/1001url#hash1url#hash2
브라우저의 "뒤로"및 "전방"버튼을 사용하여 방금 입력 한 주소로 앞뒤로 전환하십시오.
URL 해시가 변경되면 바운드 메소드가 실행된다는 것을 알 수 있습니다. 정의되지 않은 해시가 발생하면 샤워러 방법이 실행되고 정의되지 않은 해시가 방법으로 전달됩니다.
백본은 기본적으로 해시를 통해 주소 변경을 기록합니다. OnhashChange를 지원하지 않는 버전 브라우저의 경우 해시 변경 사항은 SetInterval 하트 비트를 통해 모니터링되므로 브라우저 호환성 문제에 대해 걱정할 필요가 없습니다.
HTML5 PushState 기능을 지원하는 브라우저의 경우 Backbone을 사용하면 FushState를 통해 개인화 된 URL을 생성 할 수 있지만 웹 서버의 일부 적응이 필요합니다.
3. 백본의 적용 가능성
백본은 jQuery만큼 해당되지 않으며, 크거나 복잡한 단일 페이지 웹 응용 프로그램을 구축하려는 경우 백본이 더 적합합니다.
웹 사이트 페이지에 백본을 적용하려면 페이지에 복잡한 논리와 구조가 없으면 페이지를 더욱 번거롭고 유지 관리하기가 어렵습니다.
프로젝트가 복잡하지는 않지만 특정 기능 (데이터 모델,보기 관리 또는 라우터 일 수 있음)을 깊이 좋아하는 경우 백본에서 모듈 간의 종속성이 그다지 강하지 않기 때문에 백본에서 소스 코드 의이 부분을 추출 할 수 있으며, 그 중 하나를 쉽게 얻고 사용할 수 있기 때문입니다.
4. 종속성 라이브러리
기본 기능, DOM 운영 및 AJAX는 모두 타사 라이브러리에 의존하기 때문에 백본을 독립적으로 사용할 수 없습니다.
4.1 밑줄
(필수의)
밑줄은 개발 효율성을 향상시키기위한 기본 기능 라이브러리입니다. 세트, 어레이, 객체 및 기능에서 공통 작업을 캡슐화합니다. jQuery가 DOM 객체를 캡슐화하는 것처럼 밑줄을 통해 JavaScript 내부 객체에 쉽게 액세스하고 조작 할 수 있습니다.
밑줄은 또한 기능 스로틀링, 템플릿 분석 등과 같은 매우 실용적인 기능 방법을 제공합니다.
다음 장에서 밑줄의 주요 방법에 대한 자세한 내용은 설명하지만, 그 전에는 이해해야합니다. 밑줄은 백본의 많은 구현이 밑줄을 기반으로하기 때문에 백본이 의존 해야하는 라이브러리입니다.
4.2 jQuery와 Zepto
(선택 과목)
나는 당신이 jQuery에 익숙 할 것이라고 믿습니다. 그것은 크로스 브라우저 Dom 및 Ajax 프레임 워크입니다.
Zepto의 경우 "jQuery의 모바일 버전"으로 이해할 수 있습니다. 모바일 장치의 브라우저에서 실행하는 데 작고 빠르며 더 적합하기 때문에 jQuery와 동일한 구문이므로 jQuery와 같이 사용할 수 있습니다.
Zepto는 현재 WebKit 커널을 사용하여 브라우저를 지원하므로 iOS, Adnroid, Symbian, BlackBerry 및 Meego와 같은 대부분의 모바일 시스템과 호환되며 Windows Phone 또는 Firefox OS의 경우 아직 지원되지 않습니다.
jQuery와 Zepto 구문은 동일하기 때문에 백본의 경우 jQuery 또는 Zepto를 사용하는 데 아무런 문제가 없습니다 (물론 두 가지 모두 동시에 사용할 수 없습니다).
백본에서 DOM 선택기, DOM 이벤트 및 Ajax는 모두 jQuery 방법을 사용합니다. 여기서 선택 사항 인 이유는 백본에서 View 및 Ajax 데이터 동기화 기능을 사용하지 않으면 가져올 필요가 없기 때문입니다.
jQuery 또는 Zepto를 사용하고 싶지 않지만 라이브러리가 jQuery 구문과 동일한 DOM 선택기, 이벤트 관리 및 AJAX 메소드를 구현하는 한 다른 사람 또는 사용자 정의 라이브러리를 사용하려면 문제가 없습니다.
백본은 다음에 사용되는 SetDomlibrary 방법을 통해 사용해야하는 타사 라이브러리를 동적으로 구성 할 수 있습니다.
사용자 정의 라이브러리에는 jQuery와 동일한 구문이있는 메소드가 포함되어 있지만 전역 변수는 $가 아니며 기존 이름을 유지하려고합니다. 현재 SetDomlibrary 메소드에 의해 내부적으로 참조 된 객체로 설정할 수 있습니다.
사용하기에 더 적합한 라이브러리를 결정하기 위해 사용자의 환경을 확인하려고합니다. 예를 들어, 사용자가 PC 브라우저를 사용하여 액세스하는 경우 jQuery를로드하고 사용자가 모바일 터미널을 통해 액세스하는 경우 Zepto를로드하십시오.