Fengfeng 무성-데이터 지향 프런트 엔드 프로그래밍 방법

1 명사 설명

통 화 Wanli 댄 중산도로, Feng 당나라 Li Shangyin "독특한 2에 대 한 시로 한 Dongrong"

다른 전통적인 프런트 엔드 프로그래밍 방법,으로 젊은 이름 바람.
데이터 지향 프로그래밍 방법, 프런트 엔드 데이터 모델 프로그래밍을 직접 성가신 UI 코드를 더 명확 하 고 간단한 프로그램 될 수 있습니다. 무성 음의 이름입니다.

2는 인스턴스

로 시작

우리는 예제에서 시작, 우리는 예를 들어 그룹 관리 바이 Webim 걸릴 너무 지루한 문 하지 마십시오.

이 경우에, 우리가 해야 하 사용자 그룹의 목록: 추가, 삭제, 수정, 저장, 취소, 정렬, 6 개의 기능 등.

이것은 일반적인 요구 사항, 다음, 우리는 일반적으로 이전 단락에서이 기능을 구현 일반 디자인 하는 방법? 얼마나 많은 코드? 얼마나 오래?

생각 하는 시간.........

===================================================

좋아, 이제 가자이 할 수 있는 간단한 방법을 보여:

프로그램 코드:

var 데이터 = {"목록": [{" ID ": 1,"이름":"내 그룹 1"}, 없음 "id": 2, "이름": "내 그룹 2" {"id": 3, "이름": " 내 그룹 3"}, {"id": 4, "이름": "내 그룹 4"}]} var 작업 없음 = 정렬: 함수 (목록, inc) {$ ("종류"). Classname = inc ? "아래로": "최대"; List.sort (함수 (a, b) {& nbsp; 반환 (inc? 1:-1) * a.name.localecomp(b.name);}); (데이터)를 렌더링;}, & nbsp; 만들기: 함수 (이름) {Data.list.push 없음 Id: + 새로운 날짜 (), 이름: 이름 &NBSP); (데이터)를 렌더링;}, 편집: 기능 (ID) 없음 각 (data.list, 함수 (값, 나) 없음 data.list[i].state = value.id = id? "편집": "정상";   &NBSP}); (데이터)를 렌더링; 델: 함수 (ID) {각 (data.list, 함수 (값, 나) 없음경우 (value.id = id) 없음 Data.list.splice (i, 1);}}) & nbsp; 렌더링 (데이터);}, 저장: 기능 (ID) 없음 각 (data.list, 함수 (값, 나) 없음 경우 (value.id = id) 없음 value.name = $ ("G_" + id).value; value.state = "정상";} nbsp; 렌더링 (데이터);}, 취소: 없음; (ID) 기능 각 (data.list, 함수 값i) {data.list[i].state = "정상"; & nbsp;}); 렌더링 (데이터);}} $ (ID) {반환 기능 document.getelementbyid (ID); 각 기능 (OBJ,   FN) {대 한 (var i = 0; 나 & lt; obj.length; i + +) {Fn.call (obj [i], [i], obj 나); (데이터)를 렌더링 하는}} 함수 {$ ("컨테이너"). Innerhtml = teamlist (데이터);

템플릿 코드:

< div 클래스 "${item.state}" = >< 사업부 클래스 = "cell1" >< 입력된 id = "g_${item.id}" 값 = "${item.name}"/ >< / 사업부 >< 사업부 클래스 = "cell2" >< 단추 onclick = "Action.submit (${item.id})" > 제출 < / 버튼 >< /div >< div class = "Cell3" >< 단추 onclick = "Action.cancel (${item.id})" > 취소 < / 버튼 >< / div > < div class = "Cell1 >$ {item.name} < / 사업부 >< 사업부 클래스 =" cell2 ">< img onclick =" Action.edit (${item.id} "Src =" Images/edit.gif "alt =" "/ >< / 사업부 >< 사업부 클래스 =" Cell3 ">< img onclick =" Action.del (${item.id}) " Src = "Images/delete.gif" alt = "" / >< / div >< / div >

전통적인 프로그래밍 방법, 달리 우리 하지 않습니다 직접 조작 HTML 또는 문서 개체 모델, 하지만 오히려 더 간단한 데이터 모델을 자바 스크립트 배열 개체 밖으로 추상.

모든 우리의 작업의이 간단한 원시 데이터 및 데이터 모델을 수정 하는 후 서식 파일 렌더링 함수를 호출 하 고 프런트 엔드 지역 새로 고침 UI에 표시 됩니다. 작업 완료입니다.

모든 우리의 작업의이 간단한 원시 데이터 및 데이터 모델을 수정 하는 후 서식 파일 렌더링 함수를 호출 하 고 프런트 엔드 지역 새로 고침 UI에 표시 됩니다. 작업 완료입니다.

이 방법으로 얼마나 많은 코드를 단순화할 수 있습니다? 더 유명한의 일부를 통해 갈 수 있습니다 자바 스크립트 책, 일반적으로 주제, 즉, 설명 하는 섹션을가지고는 테이블 정렬.

테이블을 여기에 따라 정렬 된 코드의 7 라인을 설명 하는 장 필요 하십니까?

3 핵심 아이디어 3.1 모든 소스

에서 시작

그의 수정 개체는 문서 개체 모델, 하지만 우리가 매우 성가신 그것을 제어 하는 프로그램은 복잡 한, 문서 개체 모델은 종종 간단, 거기는 너무 많은 중복 또는 너무 많은 정적 디스플레이 논리, 전통적인 프로그래밍 방법에 대 한 문제 중 하나입니다. 글쎄, 문서 객체 모델을 수용할 필요가 없습니다, 그리고 우리는 중복 없이 간단한 프런트 엔드 모델을 디자인 하 고 싶다.

모든 소스, 간단한 작업 뿐만 아니라 데이터 불일치 및 오류 축적의 해 피하에서 시작 합니다.

만약 그것이 전통적인 문서 데이터 모델, 뿐만 아니라 그는 많은 중복. 우리의 이전 작업 코드 중복의 여지가 또한 쉽습니다. 앞의 예제에서는 전통적인 방법에서 초기 디스플레이 그룹 목록 및 나중 그룹화 추가 편집, 생성 될 수 있습니다 다른 방법, 다양 한 코드, 배포 단일 변화, 스타일의 프레 젠 테이 션에 관련 된 편집 동기화, 이것은 프로그래밍에서 큰 금기 이다. 그리고 우리가 위에서 설명한 메서드를 사용 하면, 우리는 논리, 즉, 전체 범위에의 한 표현. 아직도, 전통적인 방식은 증분 수정 ui,가 감소는 많은, 그것은 작은 문제, 그리고이 문제만을, 추가할 수 있습니다 피할 수 하지만 우리의 새로운 프로그래밍 방법, 때마다 우리는 전체 범위 때문에 그렇게 있을 것입니다 오류 누적 문제.

3.2 프레 젠 테이 션 레이어는 아무 컨텍스트

이후 우리는 우리 자신의 데이터 모델, 우리 그냥 문서 개체 모델에 대 한 모든 상태 계속 하지, 모든 변경 데이터 모델, 상태 변경, 동기화 데이터 모델에 반영 되 고 데이터 모델에서 시작 완전히 커버 프런트 엔드 디스플레이.

4 성능 문제

얼마나 많은 데이터 위의 예제에서 연락처 그룹 관리 부담 될 수 있습니다?

우리는 먼저 우리의 통계 방법을 설명 해야 합니다.

사람의 시각적 보존 시간은 0.1 초, 또는 100 밀리초입니다. 즉, 100 밀리초 간격으로 인 간에 게 보이지 않습니다. 그리고 우리의 웹 작업입니다. 그것은 지연 시간, 간격, 그리고 얼마나 많은 시간 수 있는 인간 인식? 우리는 일반적으로 300 밀리초로 간주 됩니다 신뢰할 수 있는 데이터를 필요가 없습니다. 우리는 300 밀리초 이내 지연 인식 수 없습니다.

그래서 얼마나 많은 데이터 300 밀리초에 우리가 만들 수 있다? IE8, FF3 (방화 범 열, 오픈 방화 400 번을 렌더링할 수 있습니다) 약 1000을 지원할 수 있습니다, 크롬 3000 번을 지원할 수 있습니다.

또한, 경우에 따라 데이터 지향 프로그래밍 방법, 성능 수 있습니다 또한 몇 가지 장점이 있다. 예를 들어, 바이 툴바 위젯 목록 디자인, 우리 한 번에 많은 위젯 데이터를 로드 하지만 우리 단지는 DOM 노드의 자동차 메서드의 데이터 면 크기 순서는 전통적인 방법 보다 훨씬 적은 작은 횟수 표시. 알다시피, DOM 노드는 매우 메모리 소모...

말 조금 덜

애니메이션, 그래, 우리 한다 사용 하지이 이렇게 할 브러시 요구의 애니메이션은 너무 높은 때문에 애니메이션, 웹, 서식 파일 시작 하는이 방법은 다시 더 이상 적용 됩니다.

그래서, 정말 JS 애니메이션 효과 사용 하려면, 당신은 여전히 스크립트 라이브러리를 지원 해야 한다.

개인 보기의 포인트를 만들기 위해 동시에 사용자 경험은 애니메이션의 개선 그래서 눈길을 끄는 효과. 더 많은 사용자를 만들기 위해 더 많은 고려 되어야 작동을 편리 하 게 되지 않습니다 공제 포인트.

5 경험 하는 방법?

1. 실행 jside 디버그 서버: HTTP://WWW.XIDEA.ORG/WEBSTART/JSIDE.JNLP

Webstart 프로그램 Jside 부팅 색상 레이어 (국경 창문 없음, java6u10 +,이 창 하는 경우 투명 디스플레이 될 것 이다)에 떠 있는 윈도우의 오른쪽에 표시 됩니다.

2. 테스트 프로그램을 다운로드 하 고 그것을 압축 해제. Http://lite.googlecode.com/files/Example-20091219.zip

그것을 다운로드 하 고 디렉토리에 압축을 풉니다.

3. 디버그 웹 사이트 디렉터리를 설정 합니다.

테스트 서버는 테스트의 편의 위해 설계 되었습니다, 그리고 당신은 그냥 Jside 떠 있는 레이어를 끌어 대상 디렉터리를 압축, 테스트 서버는 자동으로 사이트 디렉터리를 전환.

4. 테스트 프로그램을 확인 합니다.

사이트 디렉터리를 전환할 때마다 프로그램 홈 페이지를 열 것인지 묻는 메시지가 나타납니다, 그리고 당신은 그것을 열. 홈 페이지 파일의 목록을 기본적 으로합니다. 보면 그것에 클릭을 기쁘게 하는 파일 (*. s.js는 Jside 테스트 서버에서 실행 될 수 있는 자바 스크립트 작성 서비스 측 애플릿)

5. 프로그램 코드를 수정 합니다.

Jside 부동 레이어 오른쪽 버튼, 파일, 그것을 수정.

소스: http://www.baiduux.com/blog/2010/01/14/data_oriented_programing_in_web_frontend/