Trong bài viết này, chúng ta sẽ xem xét một ví dụ đơn giản mà Elm
đưa ra về việc xử lý yêu cầu điều hướng giữa các trang nội dung đơn khi người dùng nhấn vào một liên kết bất kỳ trong SPA. Để thực hiện ví dụ này, chúng ta sẽ cần cài đặt thêm một package
hỗ trợ.
cd Documents && cd learn-elm
elm install elm/url
elm reactor
Navigation
Đầu tiên vẫn là chương trình main
với đầy đủ các yếu tố kiến trúc theo yêu cầu tham số đầu vào của Browser.application
.
moduleMainexposing(main)import Browser exposing(..)import Browser.Navigation as Navigation exposing(Key)import Html exposing(..)import Html.Attributes as Attributes exposing(..)import Url exposing(..)-- main - - - - - - - - - - - - - - - - - - - - - - - - - - -typealiasSPA={init:()->Url->Key->(Model,CmdMsg),view:Model->DocumentMsg,update:Msg->Model->(Model,CmdMsg),subscriptions:Model->SubMsg,onUrlRequest:UrlRequest->Msg,onUrlChange:Url->Msg}main:Program()ModelMsgmain=Browser.application(SPAinitviewupdatesubscriptionsonUrlRequestonUrlChange)
Chúng ta sẽ có một kiến trúc HTML rấ đơn giản bao gồm một danh sách <ul>
các liên kết điều hướng và một <div>
hiển thị nội dung của trang đơn tương ứng với mỗi liên kết. Nội dung hiển thị ở đây sẽ chỉ đơn giản là đường dẫn đầy đủ của trang đơn cần hiển thị. Do đó nên init
và view
cũng khá đơn giản.
-- init - - - - - - - - - - - - - - - - - - - - - - - - - - -typealiasModel={key:Key,url:Url}init:()->Url->Key->(Model,CmdMsg)init _ urlkey=(Modelkeyurl,Cmd.none)-- view - - - - - - - - - - - - - - - - - - - - - - - - - - -view:Model->DocumentMsgviewmodel={title="URL & Navigation",body=[ul[][li[][link"/home"],li[][link"/profile"],li[][link"/reviews/the-century-of-the-self"],li[][link"/reviews/public-opinion"],li[][link"/reviews/shah-of-shahs"]],div[][h1[][text(Url.toStringmodel.url)]]]}link:String->Htmlmsglinkpath=a[hrefpath][textpath]
Ở đây cả init
và view
đều không có điểm nào gửi Msg
tới trình điều khiển chính Program
. Tuy nhiên có một yếu tố mới đó là kiểu Key
được sử dụng tại init
. Giá trị này được sử dụng để đảm bảo các sub-program
của module Navigation
bao gồm pushUrl
, replaceUrl
, back
, và forward
sẽ chỉ có hiệu lực nếu được cung cấp đúng key
đã khởi tạo khi trang web mới được tải về trình duyệt.
Các trường hợp xử lý tại trình update
lúc này sẽ bao gồm:
- Người dùng nhập địa chỉ mới vào thanh địa chỉ
Address Bar
của trình duyệt web. - Người dùng click chuột vào một liên kết trong trang web:
- Liên kết trỏ tới một trang đơn cùng hệ thống
- Liên kết trỏ tới một trang web khác
-- update - - - - - - - - - - - - - - - - - - - - - - - - - - -typeMsg=LinkClickedUrlRequest|UrlChangedUrlupdate:Msg->Model->(Model,CmdMsg)updatemsgmodel=casemsgofUrlChangednewURL->({model|url=newURL},Cmd.none)LinkClickedurlRequest->caseurlRequestofBrowser.Internalurl->(model,Navigation.pushUrlmodel.key(Url.toStringurl))Browser.Externalhref->(model,Navigation.loadhref)
Và các yếu tố kiến trúc còn lại…
-- subscriptions - - - - - - - - - - - - - - - - - - - - - - - - - - -subscriptions:Model->SubMsgsubscriptions _ =Sub.none-- onUrlRequest - - - - - - - - - - - - - - - - - - - - - - - - - - -onUrlRequest:UrlRequest->MsgonUrlRequest=LinkClicked-- onUrlChange - - - - - - - - - - - - - - - - - - - - - - - - - - -onUrlChange:Url->MsgonUrlChange=UrlChanged
Logic điều hướng của SPA lúc này khá dễ theo dõi với onUrlChange
và onUrlRequest
. Bởi vì sau cùng thì khi liên kết thay đổi, chúng ta cũng chỉ có các khả năng này:
- Hoặc là người dùng nhập một địa chỉ mới vào thanh
address bar
, thìonUrlChange
sẽ được kích hoạt vàUrlChanged
được gửi tới trìnhupdate
. - Hoặc là người dùng click chuột vào một liên kết trong trang web, thì
onUrlRequest
sẽ được kích hoạt vàLinkClicked
được gửi tới trìnhupdate
.
http://localhost:8000/src/Main.elm
Trường hợp duy nhất mà update
cần phải tạo ra bản ghi Model
với url
mới đó là khi người dùng click chuột vào một liên kết trỏ tới trang đơn nội dung trong cùng hệ thống. Đó là khi bản ghi Model
mới được gửi tới view
và chúng ta sẽ có giao diện của trang web được thay đổi thành giao diện trang đơn phù hợp với yêu cầu.
Và hiển nhiên, trong trường hợp này thì trình duyệt web sẽ không cần phải tải lại toàn bộ văn bản HTML và người dùng sẽ không phải tạm thời nhìn thấy một cửa sổ trống.
URL Parser
Trên thực tế thì sau thao tác điều hướng căn bản, chúng ta sẽ phải tìm hiểu thêm cách thức để phân tích đường dẫn yêu cầu Request Url
trong trường hợp người dùng nhấn vào một liên kết trỏ tới một trang đơn cùng hệ thống.
Tuy nhiên việc tìm hiểu các công cụ xử lý nhóm tác vụ này sẽ yêu cầu sử dụng các sub-program
được gọi là Higher Order Functions
mà mình đã xác định là để dành cho Sub-Series tiếp theo. Và vì vậy nên câu chuyện SPA của chúng ta sẽ cần lui lại một chút cho đến khi Higher Order Functions
và một số khái niệm liên quan được giới thiệu xong ở Sub-Series mới:
(chưa đăng tải) [Functional Programming + Haskell] Bài 1 – …
Song song với đó thì Sub-Series Declarative
vẫn sẽ được tiếp tục trên phương diện là một project
nho nhỏ xây dựng một SPA sử dụng Back-End là Wikipedia API.
(chưa đăng tải) [Declarative Programming + Elm] Bài 16 – …
Nguồn: viblo.asia