TypeScript 샘플을 만들어보는 10가지

12124 단어 Node.jsJavaScriptTypeScriptVSCode

입문


ToDo 어플리케이션 샘플의 메모입니다.
MVC(Model, View, Controller)는 모델의 응용 프로그램입니다.
웹 상의 ajax 라이브러리를 참조하는 진정한 제작입니다.
기술적으로 유형 스크립트 클래스핵심를 사용하여 모델과 보기를 만듭니다.
DOM 조작 사용에 관하여JQuery.
Python 간이 서버를 사용하여 로컬에서 실행합니다.
수준 높은 세계에 진입한 느낌은 부인할 수 없지만 공략할 곳이 있을 거라고 믿는다. "해보자!"

전제 조건


  • Visual Studio Code 설치됨

  • Node.js/npm 설치됨
  • git샘플 다운로드에서 모든 디렉터리로 압축 해제

  • python 설치 완료
  • OS는 Windows7/10
    • 으로 가정합니다.

    샘플 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 소스 해커

  • 문서 도구 TypeDoc을 통해 등장 인물 추출
  • 주인공 확정
  • 등장인물이 이벤트에 의해 구동되는 것처럼 보이기 (시퀀스)

    • 총결산


    Backbone.js 샘플입니다.Backbone.js 사이트의 샘플도 이번에 언급한 샘플을 소개했다.
    Hello world!이 견본의 수준을 보면 천양지차를 부인할 수 없다.
    이런 응용 프로그램을 만들고 싶은데 어떻게 설치합니까?
    이번 노트는 힌트가 있습니다.
    이상
    Express-node.js 프레임워크 학습 노트
    vue.js, 유닉스 타임 스탬프를 사용자 정의 시간 형식으로 변환

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage