• About
  • Advertise
  • Privacy & Policy
  • Contact
NQ NEWS
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
  • Đời sống thường thức
    • Tất cả
    • Bí ẩn - Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh - Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game - Trò chơi
    • Kỹ năng
    • Là gì?
    • Mẹo hay
    Ielts La Gi 640 1

    IELTS là gì? Những điều cần biết về IELTS

    Cài font chữ

    Kẻ ô ly vuông trong Word và in ô ly Word

    Vivo Y33s

    3 cách chụp ảnh đẹp trên Vivo Y33s với nhiều hiệu ứng, filter độc đáo

    cách xem tin nhắn đã thu hồi trên messenger trên điện thoại

    Cách xem tin nhắn đã thu hồi trên Messenger cho điện thoại Android

    Cách hẹn giờ gửi tin nhắn chúc mừng

    Cách hẹn giờ gửi tin nhắn chúc mừng trên điện thoại vào dịp đặc biệt

    cách nhập code Play Together

    Nhập Full Code Play Together MỚI NHẤT hôm nay nhận quà khủng 2022

    • Bí ẩn – Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh – Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game – Trò chơi
    • Kỹ năng
  • Nhịp sống công nghệ
    • Tất cả
    • Ảnh đẹp Khoa học
    • Anh tài công nghệ
    • Ảnh, đồ họa
    • Bình luận công nghệ
    • Chuyện công nghệ
    • Công nghệ
    • Công nghệ mới
    • Dịch vụ công trực tuyến
    • Dịch vụ nhà mạng
    Cuoc Thi Bao Mat 700 1

    Hai chuyên gia bảo mật Việt Nam giành giải thưởng 40.000 USD trong cuộc thi tấn công mạng Pwn2Own 2021

    He Tri Thuc Viet So Hoa 650 1

    Trải nghiệm sử dụng itrithuc.vn – dự án hệ tri thức Việt được số hóa đầu tiên

    Viettel Kiem Tra Thong Tin Thue Bao 700 1

    Kiểm tra thông tin thuê bao Viettel như thế nào?

    Hang Dien Thoai Lon Nhat 640 1

    Danh sách những hãng smartphone lớn nhất thế giới (cập nhật liên tục)

    Ai Gpt 3 Cua Elon Musk Vua Viet Ca Mot Bai Xa Luan Gay Chan Dong Tren Bao Anh 640 1

    AI viết bài xã luận gây chấn động trên báo Anh, tuyên bố sẽ không hủy diệt loài người

    V120 Viettel Dang Ky 640 1

    Cách đăng ký gói V120 Viettel

    Youtube Da Ra Doi Nhu The Nao Doi Net Ve De Che Youtube640 1

    YouTube đã ra đời như thế nào? Đôi nét về ‘đề chế’ YouTube

    Apple Ung Dung Nhan Dien Airtag Tren Android700 1

    Apple phát hành ứng dụng nhận diện AirTag trên Android

    He Dieu Hanh Se Khong Con Co The Su Dung Whatsapp640 1

    Đây là những hệ điều hành không thể tải WhatsApp trong thời gian tới

Không có kết quả
Xem tất cả kết quả
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
  • Đời sống thường thức
    • Tất cả
    • Bí ẩn - Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh - Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game - Trò chơi
    • Kỹ năng
    • Là gì?
    • Mẹo hay
    Ielts La Gi 640 1

    IELTS là gì? Những điều cần biết về IELTS

    Cài font chữ

    Kẻ ô ly vuông trong Word và in ô ly Word

    Vivo Y33s

    3 cách chụp ảnh đẹp trên Vivo Y33s với nhiều hiệu ứng, filter độc đáo

    cách xem tin nhắn đã thu hồi trên messenger trên điện thoại

    Cách xem tin nhắn đã thu hồi trên Messenger cho điện thoại Android

    Cách hẹn giờ gửi tin nhắn chúc mừng

    Cách hẹn giờ gửi tin nhắn chúc mừng trên điện thoại vào dịp đặc biệt

    cách nhập code Play Together

    Nhập Full Code Play Together MỚI NHẤT hôm nay nhận quà khủng 2022

    • Bí ẩn – Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh – Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game – Trò chơi
    • Kỹ năng
  • Nhịp sống công nghệ
    • Tất cả
    • Ảnh đẹp Khoa học
    • Anh tài công nghệ
    • Ảnh, đồ họa
    • Bình luận công nghệ
    • Chuyện công nghệ
    • Công nghệ
    • Công nghệ mới
    • Dịch vụ công trực tuyến
    • Dịch vụ nhà mạng
    Cuoc Thi Bao Mat 700 1

    Hai chuyên gia bảo mật Việt Nam giành giải thưởng 40.000 USD trong cuộc thi tấn công mạng Pwn2Own 2021

    He Tri Thuc Viet So Hoa 650 1

    Trải nghiệm sử dụng itrithuc.vn – dự án hệ tri thức Việt được số hóa đầu tiên

    Viettel Kiem Tra Thong Tin Thue Bao 700 1

    Kiểm tra thông tin thuê bao Viettel như thế nào?

    Hang Dien Thoai Lon Nhat 640 1

    Danh sách những hãng smartphone lớn nhất thế giới (cập nhật liên tục)

    Ai Gpt 3 Cua Elon Musk Vua Viet Ca Mot Bai Xa Luan Gay Chan Dong Tren Bao Anh 640 1

    AI viết bài xã luận gây chấn động trên báo Anh, tuyên bố sẽ không hủy diệt loài người

    V120 Viettel Dang Ky 640 1

    Cách đăng ký gói V120 Viettel

    Youtube Da Ra Doi Nhu The Nao Doi Net Ve De Che Youtube640 1

    YouTube đã ra đời như thế nào? Đôi nét về ‘đề chế’ YouTube

    Apple Ung Dung Nhan Dien Airtag Tren Android700 1

    Apple phát hành ứng dụng nhận diện AirTag trên Android

    He Dieu Hanh Se Khong Con Co The Su Dung Whatsapp640 1

    Đây là những hệ điều hành không thể tải WhatsApp trong thời gian tới

Không có kết quả
Xem tất cả kết quả
NQ NEWS
Không có kết quả
Xem tất cả kết quả
Trang chủ Kiến thức tổng hợp Development

Làm quen với MithrilJS – Phần 2

@admiz bởi @admiz
21/04/2022
trong Development
0
Làm Quen Với Mithriljs – Phần 2 60902ec600017.jpeg

Các Hooks trong vòng đời của Vnode và Component

Trong bài viết trước mình đã nói sơ về Vnode, là cách thức Mithril xây dựng cây DOM trong trang. Bạn dùng hàm m(selector, attributes, children) để tạo ra vnode.

//

Hello World

m(‘h1.title’, { id: 123 , ‘Hello World’)

Trong khi đó, component là một JavaScript object có phương thức view(). Chẳng hạn như:

const Cart = {

view: () => m(‘h1’, ‘Cart’)

// Kết quả:

Cart

m(Cart)

Để truyền dữ liệu tùy ý, thiết lập thuộc tính hay các hàm xử lý sự kiện của Vnode/Component, bạn đưa một JavaScript Object vào tham số thứ 2 của hàm m(). Bên trong Component, bạn có thể truy cập chúng thông qua thuộc tính Attrs.

m(Cart, { id: 123 )

const Cart = {

view: vnode => m(‘h1’, `Cart ${vnode.attrs.id `)

// Kết quả:

Cart 123

Ngoài ra tham số Attributes của hàm m() cũng là nơi để bạn khai báo các Hook trong vòng đời của Vnode và Component.

const ComponentWithHooks = {

oninit: function(vnode) {

console.log(‘initialized’)

,

oncreate: function(vnode) {

console.log(‘DOM created’)

,

onbeforeupdate: function(vnode, old) {

return true

,

onupdate: function(vnode) {

console.log(‘DOM updated’)

,

onbeforeremove: function(vnode) {

console.log(‘exit animation can start’)

return new Promise(function(resolve) {

// call after animation completes

resolve()

)

,

onremove: function(vnode) {

console.log(‘removing DOM element’)

,

view: function(vnode) {

return ‘hello’

Chúng ta sẽ đi qua từng hook một.

oninit (vnode)

Hàm Oninit (vnode) sẽ được kích hoạt trước khi Vnode được gắn vào cây DOM. Bên trong hàm này bạn có thể tiến hành các thao tác khởi tạo với Vnode.attrs hay Vnode.children, chẳng hạn như khai báo State. Bạn có thể nghĩ Oninit giống như Constructor (hàm dựng) vậy.

Cần nói thêm là thuộc tính Vnode.dom là tham chiếu đến Element thật sự trong cây DOM của Vnode hiện tại. Vì Oninit() không đảm bảo sự tồn tại của Element tại giai đoạn này, bạn không nên sử dụng Vnode.dom ở đây.

const ComponentWithState = {

oninit: function(vnode) {

this.data = vnode.attrs.data

,

view: function() {

return m(‘div’, this.data)

// Kết quả:

Hello

m(ComponentWithState, { data: ‘Hello’ )

oncreate

Hàm Oncreate (vnode) được kích hoạt sau khi Vnode được gắn vào cây DOM. Vì lúc này Element đã tồn tại trong cây DOM, bạn có thể dùng Vnode.dom để đọc những thuộc tính về bố cục, ví dụ như vnode.dom.offsetHeight hay vnode.dom.getBoundingClientRect(). oncreate rất hữu dụng khi bạn cần truy xuất những thuộc tính trên, kích hoạt Animation hay tích hợp thư viện ngoài.

Hàm Oncreate() sẽ không được gọi khi Vnode được cập nhật.

const HeightReporter = {

oncreate: function(vnode) {

console.log(‘Initialized with height of: ‘, vnode.dom.offsetHeight)

,

view: function() {

m(HeightReporter, { data: ‘Hello’ )

onbeforeupdate

Hàm Onbeforeupdate(vnode, old) được gọi trước khi một Vnode được so sánh trong quá trình Redraw. Nếu hàm này được khai báo và trả về giá trị False, Mithril sẽ không cập nhật giao diện cho Vnode/component này. Trên trang chủ của Mithril, Onbeforeupdate() được khuyến cáo nên sử dụng cẩn thận hoặc không dùng luôn để tránh trường hợp “tối ưu hóa quá sớm” (premature optimization).

Hàm Onupdate (vnode) được gọi sau khi Element trên cây DOM đã được cập nhật, và vẫn còn tồn tại trong cây. Cũng như Oncreate(), bạn có thể đọc các thuộc tính về bố cục ở Hook này. Hàm này đặc biệt hữu ích khi bạn cần truy xuất các thuộc tính kể trên trong trường hợp tích hợp với thư viện bên thứ ba.

const RedrawReporter = {

count: 0,

onupdate: function(vnode) {

console.log(‘Redraws so far: ‘, vnode.state.count)

,

view: function() {

m(RedrawReporter, { data: ‘Hello’ )

onbeforeremove

Hàm Onbeforeremove(vnode) được gọi trước khi Element được gỡ ra khỏi cây DOM. Nếu hàm này trả về một Promise, Mithril sẽ chờ cho đến khi Promise hoàn thành trước khi tiến hành gỡ Element. Hàm này rất hữu dụng khi bạn cần làm Animation.

const Fader = {

onbeforeremove: function(vnode) {

vnode.dom.classList.add(‘fade-out’)

return new Promise(function(resolve) {

setTimeout(resolve, 1000)

)

,

view: function() {

return m(‘div’, ‘Bye’)

onremove

Cuối cùng là Onremove(dom). Hàm này cũng được gọi trước khi Element được gỡ ra khỏi cây DOM, nhưng chạy sau Onbeforeremove(). Nếu Onbeforeremove() trả về một Promise, Onremove() sẽ chạy sau khi Promise đó hoàn thành. Hàm Onremove() rất hữu ích để làm những công việc “hốt rác”, ví dụ như ClearTimeout().

const Timer = {

oninit: function(vnode) {

this.timeout = setTimeout(function() {

console.log(‘timed out’)

, 1000)

,

onremove: function(vnode) {

clearTimeout(this.timeout)

,

view: function() {

Khai báo Component với Class và Fnction

Ngoài cách tạo Component bằng một Object có phương thức view(), bạn có thể dùng Function hoặc ES6 class như sau:

function Cart (vnode) {

return {

oninit: () => {

this.id = vnode.attrs.id

,

view: () => m(‘h1’, `Cart ${this.id `)

class Cart {

constructor (vnode) {

this.id = vnode.attrs.id

view () {

return m(‘h1’, `Cart ${this.id `)

Bạn có thể thấy ở cả hai cách đều bắt buộc phải có một phương thức view() được trả về, hoặc khai báo bên trong Prototype của Class. Tuy vậy, mặc dù bạn dùng cách nào thì vẫn có thể đưa vào hàm m() mà không cần thay đổi gì hết.

Việc chọn Object, Function hay Class hoàn toàn tùy thuộc vào sở thích của bạn/team. Cá nhân mình thì mình thấy Function tốt hơn hết, vì việc truy xuất đến Vnode rất dễ dàng. Giả sử mình có đoạn code thế này:

const Item = {

doClick: e => {

e.preventDefault()

// Muốn truy xuất item ID thì phải làm sao???

,

view: vnode => m(‘p’, { onclick: Item.doClick , vnode.attrs.id)

const List = {

items: [ 1, 2, 3, 4, 5 ],

view: vnode => {

return List.items.map(id => m(Item, { id ))

m.mount(document.body, List)

Mình có thể sửa Item.doClick(e) thành Item.doClick(vnode, e) nhưng như vậy code bỗng nhiên “vô duyên” vì phải cõng Vnode trong hàm xử lý sự kiện. Tuy nhiên nếu mình dùng function thì mọi chuyện sẽ khác:

function Item (vnode) {

const doClick = e => {

e.preventDefault()

console.log(vnode.attrs.id)

const view = () => m(‘p’, { onclick: doClick , vnode.attrs.id)

return { view

Ở trên mình đã nhắc đến Vnode.dom như là tham chiếu đến Element thật sự trong cây DOM. vnode.dom giống như Ref trong React, và mình có thể dùng nó để tích hợp với thư viện của bên thứ ba. Ví dụ như mình có thể tích hợp Chart.js như thế này:

function App() {

// Các thiết lập cho Chart.js

const config = {

type: ‘line’,

data: {

labels: [‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, ‘Purple’, ‘Orange’],

datasets: [

{

label: ‘# of Votes’,

data: [12, 19, 3, 5, 2, 3],

borderColor: ‘rgb(255, 99, 132)’,

fill: false

]

const oncreate = vnode => {

const ctx = vnode.dom.getContext(‘2d’)

this.chart = new Chart(ctx, config)

const doDoubleData = e => {

// Thay đổi giá trị của dataset, sau đó gọi hàm `update()` của Chart.js

config.data.datasets.forEach(ds => (ds.data = ds.data.map(d => d * 2)))

this.chart.update()

const view = _ =>

m(‘div’,

m(‘canvas[width=400][height=400]’, { oncreate ),

m(‘button’, { onclick: doDoubleData , ‘Double data’)

)

return { view

m.mount(document.body, App)

Chart.js yêu cầu phải có một Canvas để vẽ đồ thị lên đó. Bằng cách “hook” vào Oncreate của Vnode m(canvas), mình có thể truy xuất Canvas Element và gọi đến hàm GetContext(). Sau đó mình chỉ việc làm theo hướng dẫn trên Website của Chart.js để khởi tạo đồ thị. Bạn có thể xem Demo bên dưới.

Ngoài ra mình còn có một ví dụ khác tích hợp anime.js.

Kết luận:

Trong phần này mình đã giới thiệu về các Hook trong vòng đời của Vnode/Component. Mình cũng nói qua cách tích hợp thư viện thứ ba vào ứng dụng Mithril thông qua Vnode.dom.

Nguồn: kipalog.com

>> Tìm hiểu thêm: Ứng dụng Prototype trong JavaScript viết Slideshow

Post Views: 135

Có thể bạn quan tâm bài viết

5 Bước Cài đặt Lemp Stack Trên Ubuntu 16.04 60902eddebb15.png
Development

5 bước cài đặt LEMP stack trên Ubuntu 16.04

05/05/2021
Tăng Tốc độ Làm Việc Trên Ubuntu Qua Command đặc Biệt 60902eda2d54e.png
Development

Tăng tốc độ làm việc trên Ubuntu qua command đặc biệt

05/05/2021
Quản Lý Các User Trong Ubuntu Server (p1) 60902ed56b2cc.png
Development

Quản lý các User trong Ubuntu Server (P1)

05/05/2021
Tìm Hiểu Quy Trình Tc39 60902ecd58440.jpeg
Development

Tìm hiểu quy trình TC39

21/04/2022
Làm Quen Với Mithriljs – Phần 1 60902ec9a4f01.jpeg
Development

Làm quen với MithrilJS – Phần 1

21/04/2022
Tổng Quan Về V8 Engine 60902ec2049e0.jpeg
Development

Tổng quan về V8 Engine

05/05/2021

Bài mới nhất

Thiết Kế Website Trung Tâm Gia Sư Uy Tín, Chuyên Nghiệp Và Chất Lượng 612d0a0d7e501.jpeg

Thiết kế website trung tâm gia sư uy tín, chuyên nghiệp và chất lượng

04/02/2023
Thiết Kế Website Dịch Vụ Bảo Vệ, An Ninh Chuyên Nghiệp Và Giao Diện Hiện đại 612d098d4c595.png

Thiết kế website dịch vụ bảo vệ, an ninh chuyên nghiệp và giao diện hiện đại

04/02/2023
Thiết Kế Website Xuất Khẩu Lao động, đi Du Học Chuyên Nghiệp, Giá Rẻ 612d08e0cb2c2.jpeg

Thiết kế website xuất khẩu lao động, đi du học chuyên nghiệp, giá rẻ

03/02/2023
Thiết Kế Website Bán Mắt Kính Uy Tín Và Thời Thượng Nhất Hiện Nay 612d0a181fc93.jpeg

Thiết kế website bán mắt kính uy tín và thời thượng nhất hiện nay

03/02/2023
Yoast Seo Là Gì? Hướng Dẫn Cấu Hình Yoast Seo Trên Website Hiệu Quả 612d069c83e87.png

Yoast SEO là gì? Hướng dẫn cấu hình Yoast SEO trên website hiệu quả

02/02/2023

Categories

  • Android
  • Ảnh đẹp Khoa học
  • Anh tài công nghệ
  • Ảnh, đồ họa
  • Bảo mật máy tính
  • Bảo mật, Antivirus
  • Bí ẩn – Chuyện lạ
  • Bình luận công nghệ
  • Câu chuyện Khoa học
  • Chăm sóc Nhà cửa
  • Chăm sóc Sức khỏe
  • Chụp ảnh – Quay phim
  • Chuyện công nghệ
  • Công nghệ
  • Công nghệ mới
  • Cưới hỏi
  • Deep Learning
  • Development
  • Dịch vụ công trực tuyến
  • Dịch vụ ngân hàng
  • Dịch vụ nhà mạng
  • DIY – Handmade
  • Đời sống thường thức
  • Game – Trò chơi
  • Giải pháp bảo mật
  • Giải trí
  • Giáng sinh – Noel
  • Giao tiếp, liên lạc, hẹn hò
  • Hệ thống
  • Hệ thống
  • Hỗ trợ học tập
  • Họp, học trực tuyến
  • Internet
  • iPhone
  • Khám phá khoa học
  • Khám phá thiên nhiên
  • Khoa học công nghệ
  • Khoa học Vũ trụ
  • Khoa học vui
  • Kiến thức bảo mật
  • Kiến thức căn bản
  • Kiến thức cơ bản
  • Kiến thức tổng hợp
  • Kinh nghiệm Du lịch
  • Kỹ năng
  • Là gì?
  • Làm đẹp
  • Lập trình
  • Linux
  • Linux OS
  • Lưu trữ đám mây
  • macOS
  • Mail Server
  • Mạng LAN – WAN
  • Máy ảo
  • Máy chủ
  • Máy công cụ
  • Máy hút mùi
  • Mẹo hay
  • Mẹo vặt
  • ms excel
  • ms-powerpoint
  • Nền tảng điện toán đám mây
  • Nhà thông minh
  • Phần cứng
  • Phần cứng
  • Phần Mềm
  • Phân phối
  • Quà tặng
  • Quản trị hệ thống
  • Quạt các loại
  • Quiz công nghệ
  • Raspberry Pi
  • Sửa lỗi máy tính
  • Tải game
  • Tấn công mạng
  • Tăng tốc máy tính
  • Tết 2022
  • Tết Trung thu
  • Thủ thuật
  • Thủ thuật SEO
  • Thủ thuật Wifi
  • Tiện ích hệ thống
  • Tin học văn phòng
  • Tin tức
  • Tivi
  • Trí tuệ nhân tạo (AI)
  • Tủ lạnh
  • Uncategorized
  • Ứng dụng
  • Ứng dụng văn phòng
  • Video Khoa học
  • Video, phim, nhạc
  • Website
  • Windows Server 2012

Tags

#app #chatbot #chatbot tự động #CRM #Email Marketing #Kiến thức cơ bản #Techblog #Thiết kế website Android apple cách chơi Pokémon Go Gmail Google Google Drive hacker HTML hàm python hàm python có sẵn hình nền máy tính học css học python học SQL ios iphone iphone 12 Microsoft minecraft mssql MS SQL Server Pokémon Go PUBG Mobile python Raspberry Pi Samsung smartphone SQL Server thiết bị số tivi tài liệu python windows windows 10 YouTube điện thoại di động điện thoại thông minh ứng dụng
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2022 Pha Le Solution

Không có kết quả
Xem tất cả kết quả
  • Home

© 2022 Pha Le Solution

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?