12/08/2018, 17:19

Học Elm Cơ Bản - Part 2

Mẫu Đơn Giản: Mọi chương trình Elm sẽ chia nhỏ thành 3 phần riêng biệt: Model: trạng thái của ứng dụng Update: cách để cập nhật trạng thái View: cách để nhìn thấy state như là HTML Các mẫu này luôn xuất phát từ các khung có sẵn sau và được phát triển cho từng trường hợp riêng biệt: import Html ...

  • Mẫu Đơn Giản: Mọi chương trình Elm sẽ chia nhỏ thành 3 phần riêng biệt: Model: trạng thái của ứng dụng Update: cách để cập nhật trạng thái View: cách để nhìn thấy state như là HTML Các mẫu này luôn xuất phát từ các khung có sẵn sau và được phát triển cho từng trường hợp riêng biệt:
import Html exposing (..)


-- MODEL

type alias Model = { ... }


-- UPDATE

type Msg = Reset | ...

update : Msg -> Model -> Model
update msg model =
  case msg of
    Reset -> ...
    ...


-- VIEW

view : Model -> Html Msg
view model =
  ...

Đây thực sự là bản chất của cấu trung Elm. Tiếp theo chúng ta sẽ phát triển logic dựa theo khung này.

2. Kiến trúc Elm + User Input:

Vị dụ đơn giản đầu tiên là 1 bộ đếm có chức năng tăng và giảm. Nó sẽ giúp chúng ta có cái nhìn tổng quát. Đầu tiên chúng ta cần khai báo Model. Trong chương trình của chúng ta, Model là trạng thái của app, là số lần được đếm. Chúng ta khai báo trong Elm:

type alias Model = Int

Như vậy là đã xong khai báo Model. Tiếp theo là phần Update. Chúng ta cần phải xác định làm thế nào state thay đổi.Đầu tiên chúng ta khai báo tập hợp các Message tượng trưng cho từng cách update state.

type Msg = Increment | Decrement

Sau đó chúng ta khai báo hàm update mô tả chúng ta sẽ làm gì khi nhận được 1 Message khai báo ở trên

update: Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            mode + 1
            
        Decrement ->
            model - 1

Ở đây khi nhận được Message là Decrement thì chúng ta giảm model đi 1 và ngược lại. Và tiếp theo là làm thế nào để show dữ liệu này lên HTML. Elm có thư viện tên là elm-lang/html cung cấp dầy đủ chức năng HTML5 dưới dạng functions trong Elm:

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

Một điều cần chú ý ở đây là view function tạo ra HTML Message . Điều đó có nghĩa là nó chính là 1 đoạn HTML có thể tạo ra các giá trị Message. Khi chúng ta thấy onClick với Increment và Decrement. Chúng sẽ được đưa trực tiếp cho update function.

Bài liên quan

Hướng dẫn tự học Tensorflow cơ bản - Phần 2 - Linear Regression

Tiếp tục với series về Tensorflow của Toàn. Chúng ta sẽ đến với một bài hướng dẫn về giải thuật Linear Regression thực hiện trên framework Tensorflow Linear Regression là một thuật toán cơ bản nhất mà ai khi mới bắt đầu bước chân vào lĩnh vực Machine Learning cũng đều đã từng học qua. Tuy ...

Trịnh Tiến Mạnh viết 08:31 ngày 07/09/2018

Học Elm Cơ Bản - Part 2

Mẫu Đơn Giản: Mọi chương trình Elm sẽ chia nhỏ thành 3 phần riêng biệt: Model: trạng thái của ứng dụng Update: cách để cập nhật trạng thái View: cách để nhìn thấy state như là HTML Các mẫu này luôn xuất phát từ các khung có sẵn sau và được phát triển cho từng trường hợp riêng biệt: import Html ...

Hoàng Hải Đăng viết 17:19 ngày 12/08/2018

PHỐI HỢP KIỂM THỬ HIỆU SUẤT VỚI QUÁ TRÌNH LẶP CƠ BẢN (PHẦN 2)

Bài liên quan: https://viblo.asia/p/phoi-hop-kiem-thu-hieu-suat-voi-qua-trinh-lap-co-ban-phan-1-RQqKLxW0K7z Hoạt động 3. Xác định giá trị kiểm thử hiệu suất thêm vào dự án (Identify the Value Performance Testing Adds to the Project) Sử dụng thông tin thu được từ các hoạt động 1 và 2, bạn có ...

Hoàng Hải Đăng viết 15:55 ngày 12/08/2018

Những website giúp bạn tự học c# cơ bản online miễn phí

C# là một dạng ngôn ngữ hướng đối tượng được sử dụng rọng rãi cho các ứng dụng kinh doanh và thiết kế website. C# được phát triển bởi Microsoft và ngôn ngữ chính của .NET framework. C# cũng được sử dụng để tạo ra các ứng dụng GUI, ứng dụng web v.v…Những ứng dụng này chạy trên máy tính cá ...

Hoàng Hải Đăng viết 15:48 ngày 12/08/2018

Học webpack cơ bản trong 15 phút

Ngày nay, trong lập trình web cùng với sự ra đời của các framework javascript mạnh mẻ như Vuejs, React, Angular...làm cho website tải nhanh hơn, tương tác với người dùng cao hơn, còn giúp cho giảm tải cho server. Cái gì cũng có lợi hại của nó phải không các bạn. Cùng với những lợi ích trên ...

Trịnh Tiến Mạnh viết 15:29 ngày 12/08/2018
0