TypeScript 샘플을 만들어보는 10가지
12124 단어 Node.jsJavaScriptTypeScriptVSCode
입문
ToDo 어플리케이션 샘플의 메모입니다.
MVC(Model, View, Controller)는 모델의 응용 프로그램입니다.
웹 상의 ajax 라이브러리를 참조하는 진정한 제작입니다.
기술적으로 유형 스크립트 클래스핵심를 사용하여 모델과 보기를 만듭니다.
DOM 조작 사용에 관하여JQuery.
Python 간이 서버를 사용하여 로컬에서 실행합니다.
수준 높은 세계에 진입한 느낌은 부인할 수 없지만 공략할 곳이 있을 거라고 믿는다. "해보자!"
전제 조건
Visual Studio Code 설치됨
Node.js/npm 설치됨
python 설치 완료
샘플 todomvc
Backbone.js의 ToDo 샘플을 사용합니다.
디렉토리 구성
./
├─css/
└─js/
파일 구성
경로
파일 이름
설명
.
index.html
ToDo 화면 html
.
README.md
이 예제의 설명과 사용 방법
.
server.py
Python 간이 서버 스크립트(신규)
.
tsconfig.json
유형 스크립트 컴파일 프로필
css
destroy.png
×버튼 이미지 파일
css
todos.css
스타일 시트
js
todos.js
todos.ts 컴파일에서 만든 JavaScript 파일
js
todos.js.map
todos.ts에서 만든 맵 파일 컴파일하기
js
todos.ts
ToDo 예제 TypeScript 파일
새로 만들기
server.py
import http.server
import socketserver
PORT = 8000
Handler = http.server.SimpleHTTPRequestHandler
with socketserver.TCPServer(("", PORT), Handler) as httpd:
print("serving at port", PORT)
httpd.serve_forever()
분류도
실행
cd ./todomvc
tsc --sourcemap js\todos.ts
python server.py
결과
브라우저에서 URL 지정: http://127.0.1:8000/.
What needs to be done?텍스트 상자에 car wash 입력
목록에cawash를 추가합니다.
"모두 complete 표시"체크 상자를 선택하십시오.
Clear1 completed item 및 출력에 대한 명령 단추를 표시합니다.
명령 단추를 누르면 추가된 car wash를 삭제합니다.
ToDo(해야 할 일) 목록을 만들고 완성된 항목을 삭제하며 ToDo 프로젝트의 잔재를 관리하는 단순한 응용 프로그램입니다.
득점
이 복잡한 동작은 어떻게 실현됩니까?
index.html 참조.
script에서 지정한 외부 참조는 5개의 JavaScript입니다.
index.발췌하다
<head>
<title>Backbone.js</title>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="js/todos.js"></script>
</head>
프로그램 라이브러리파일 이름
기능
json2
json2.js
json 라이브러리
jquery
jquery.min.js
jQuery 라이브러리(경량급)
underscore
underscore-min.js
수조 처리 라이브러리 (경량)
backbone
backbone-min.js
VC 프레임워크(경량급)
backbone.localStorage
backbone.localStorage-min.js
VC 클라이언트 프레임워크(경량급)
※ 경량 - 설명, 줄 바꿈, 들여쓰기 등 논리적 외의 모든 코드를 삭제하고 파일 크기를 줄입니다.
ToDo 응용 프로그램의 뼈대는 MVCbackbone를 실현하는 데 있다.backbone.js의 사이트에서 발췌하다.
입문
Backbone에서 데이터를 모델로 표시하고 이를 생성, 검증 및 제거하여 서버에 저장할 수 있습니다.사용자 인터페이스에서 모델 속성을 변경하면 모델이 변경 이벤트를 트리거합니다.모델 상태를 표시하는 모든 뷰는 변경 사항을 알려 주기 때문에 응답하고 새 정보를 사용하여 자신을 다시 그릴 수 있습니다.완료된 Backbone 응용 프로그램에서 HTML을 수동으로 업데이트하기 위해 특정 ID를 가진 요소를 찾고 DOM을 찾을 필요가 없습니다.모델을 변경하면 뷰만 업데이트됩니다.
Backbone은 사용자 인터페이스에서 비즈니스 논리를 분리합니다.논리는 사용자 인터페이스에 의존하지 않기 때문에 인터페이스는 더욱 사용하기 쉽다.
Models and Views
Model
➋ 데이터와 업무 논리를 조정하다.
서버에서 로드하고 저장합니다.
➋ 데이터 변경 시 이벤트 종료.
View
➋ 변경 대기, UI 표시.
사용자 입력과 상호작용 기능을 처리합니다.
➋ 가져온 입력을 모델에 보냅니다.
Collections
➋ 모델을 서버에 로드하고 저장합니다.
➋ 모델 목록을 합산하고 계산합니다.
➋ 모델에서 발생하는 모든 이벤트를 관리합니다.
설명 보고도 안 오지?
TypeDoc에서
todos.ts
문서를 작성합니다.TypeDoc 설치는 다음을 참조하십시오(로컬 설치 시 생략-g)
npm install -g typedoc --save
todos.ts
에 대한 문서 출력명령:
typedoc --out 出力ディレクトリ 対象ソース.ts
cd ./todomvc/js
typedoc --out ./doc/ todos.ts
typedoc는 출력 디렉터리입니다./doc/를 생성합니다../doc/로 출력된
index.html
브라우저에 표시됩니다.todos.ts
의 구성원은 다음과 같이 정리한다.핑크 AppView는
todos.ts
의 마지막에 인스턴스를 작성합니다.이 AppView는
todos.ts
의 주요 프로세스입니다.나머지는 모두 종속 구성원이다.module
interface
class
Varibles
Backbone
Model
Collection
View
JQuery
$
_
Store
todos
Todo
ToDoList
ToDoView
AppView
어쨌든 등장인물은 일람화되었다.
이 등장인물의 관계
todos.tsのAppViewクラス
에 힌트가 있다.todos.발췌하다
// Delegated events for creating new items, and clearing completed ones.
events = {
"keypress #new-todo": "createOnEnter",
"keyup #new-todo": "showTooltip",
"click .todo-clear a": "clearCompleted",
"click .mark-all-done": "toggleAllComplete"
};
events
중 index.html의 id에 대응하는 AppView류의 Mesod는 json 형식으로 정의됩니다.index.html
의 이벤트 구동 처리 AppView의 Mesodo.event
id
AppView.method
keypress
new-todo
createOnEnter
keyup
new-todo
showTooltip
click
todo-clear
clearCompleted
click
mark-all-done
toggleAllComplete
현재
todos.ts
이벤트 구동의 시퀀스 맵을 만듭니다.todos.ts
백본과의 혼돈관계가 드디어 드러났다.공책
TypeScript 소스 해커
총결산
Backbone.js 샘플입니다.Backbone.js 사이트의 샘플도 이번에 언급한 샘플을 소개했다.
Hello world!이 견본의 수준을 보면 천양지차를 부인할 수 없다.
이런 응용 프로그램을 만들고 싶은데 어떻게 설치합니까?
이번 노트는 힌트가 있습니다.
이상
Reference
이 문제에 관하여(TypeScript 샘플을 만들어보는 10가지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pooshikin/items/7bbe3f672e0ea138f035텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)