Scribd Logo
Upload

Welcome to Scribd!

  • (2023) (簡報) (課程) CH7. MVC框架之設計

    Uploaded by

    t0985403827
    3 views14 pages

    Original Title

    [2023][簡報][課程]CH7. MVC框架之設計

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views14 pages

    (2023) (簡報) (課程) CH7. MVC框架之設計

    Uploaded by

    t0985403827

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 14

    CH7.

    MVC框架之設計
    深 度 學 習 跨 平台計 算及應 用

    46
    介紹
    MVC不是一種程式語言，也不是一種技術。

    MVC是開發時所使用的一種「架構」或稱框架，也
    Controller
    可以說是已存在許久的設計樣式(Design Pattern)。

    MVC最早是在1979年由Trygve Reenskaug所提出。
    View
    MVC的主要目的於簡化軟體開發的複雜度，以一種
    概念簡單又權責分明的架構，貫穿整個軟體開發流
    Model
    程。

    47
    MVC
    模型 (Model)
    ◦ 所有需要被使用到的「參數」、「變數」放置處。
    ◦ let message: string;

    ◦ let count: number;

    檢視 (View)
    ◦ 有關介面與視覺上的操作、控制、方法，都在此處。
    ◦ CreateView( )

    ◦ UpdateView( )

    控制 (Controller)
    ◦ 邏輯方法，方法提供，都在此處。
    ◦ Main( )

    ◦ SubscrubeEvents( )

    48
    案例
    1. 設計一個按鈕，按下後會對count的數值遞增。

    2. 安排一個標籤，標籤顯示count的數值內容。

    49
    專案準備
    資料夾準備 開發環境準備

    建立專案資料夾 備妥TypeScript專案
    ◦ mkdir mvc_ex01 ◦ tsc -init

    進入專案資料夾 備妥npm專案
    ◦ cd mvc_ex01 ◦ npm init -y

    以code開啟 安裝套件工具
    ◦ code . ◦ npm install @types/jquery --save-dev

    安裝靜態網頁伺服器
    ◦ npm install live-server --save-dev

    備註：tsc指令不存在時，需使用npm安裝套件「npm install -g typescript」 50


    Npm文件設定
    package.json
    "scripts": {
    啟動靜態網頁伺服器
    "test": "echo \"Error: no test specified\" && exit 1",
    ◦ npm run start
    "start": "live-server"

    }, 啟動TSC編譯監看模式
    ◦ tsc -watch

    51
    jQuery CDN
    https://code.jquery.com/

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    52
    index.html (網頁樣式)
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
    </body>
    </html>

    53
    app.ts – 儲存模型
    class appModel {
    App Model
    public count: number = 0;
    } ◦ 模型用來放置各種參數。

    ◦ 每一參數建議設定初始值。

    54
    app.ts – 互動介面
    class appView {
    App View
    protected Model: appModel;

    public Form!: JQuery; ◦ 檢視區塊用來作為介面顯示。


    constructor(m: appModel) { ◦ 在建構函式中至少包含
    this.Model = m;
    this.CreateView();
    this.UpdateView(); ◦ 產生介面元素(CreateView)。
    }
    ◦ 更新介面內容(UpdateView)。
    private CreateView() {
    this.Form = $('<div/>').attr('id', 'FromUI').appe
    ndTo($('body'));
    }

    public UpdateView() {
    this.Form.text('HELLO');
    }
    }

    55
    app.ts – 邏輯控制
    class appController {
    App Controller

    protected Model: appModel; ◦ 網頁與JS進行邏輯互動的部分。


    protected View: appView;
    ◦ 在建構函式中貫穿Model與View。
    ◦ 建構出Model與建構出View。
    constructor() {
    this.Model = new appModel();
    this.View = new appView(this.Model);
    }
    }

    56
    載入後啟動Function
    $(document).ready(function () {
    在網頁讀取到JavaScript的程式碼之後，通常會直接執
    let myapp = new appController();
    }); 行並處理。

    在MVC的架構裡，已經將所有的方法模組化了，因此
    可以等候網頁載入完畢後，再告知要從哪一個入口放
    法進入。

    57
    class appModel {
    public count: number = 0;
    }

    class appView {

    案例參考 protected Model: appModel;

    public Form!: JQuery;


    public Label!: JQuery;
    public Button1!: JQuery;

    constructor(m: appModel) {
    this.Model = m;
    this.CreateView();
    this.UpdateView();
    }
    private CreateView() {
    this.Form = $('<h4/>').attr('id', 'FromUI').appendTo($('body'));
    this.Label = $('<label/>').attr('id', 'Label1').appendTo($('body'));
    this.Button1 = $('<button/>').attr('id', 'Button1').text('touch me').appendTo($('body'));
    }

    public UpdateView() {
    this.Form.text('HELLO');
    this.Label.text('count: ' + this.Model.count);
    }
    } 58
    class appController {

    protected Model: appModel;


    protected View: appView;

    constructor() {

    案例參考 this.Model = new appModel();


    this.View = new appView(this.Model);
    this.SubscribeEvents();
    }

    private SubscribeEvents() {
    this.View.Button1.click(() => this.Button1_Clicked());
    }

    private Button1_Clicked() {
    this.Model.count = this.Model.count + 1;
    this.View.UpdateView();
    }
    }

    $(document).ready(function () {
    let myapp = new appController();
    });

    59

    You might also like