Panduan cepat ke Node.js untuk pemula

Selamat siang teman!



Untuk perhatian Anda , saya persembahkan terjemahan Manual Node.js dalam format aplikasi adaptasi progresif satu halaman.



Format ini berarti sebagai berikut:

• SPA - data baru (bagian atau bab manual) dimuat tanpa pemuatan ulang halaman - diimplementasikan menggunakan impor dinamis
• PWA - aplikasi dapat diinstal di ponsel atau komputer; aplikasi bekerja bahkan ketika tidak ada koneksi jaringan - diimplementasikan menggunakan service worker dan caching
• yang mengutamakan seluler - aplikasi ini dimaksudkan untuk digunakan terutama di ponsel cerdas, tetapi juga terlihat bagus di layar lebar

Anda dapat melihat dan menginstal aplikasi di sini: Netlify , PWA Store .



→ Kode proyek di GitHub



Bak pasir:





Di desktop, aplikasinya terlihat seperti ini:











Di smartphone, seperti ini:









Aplikasi ini adalah panduan cepat pemula untuk Node.js dan hampir tidak akan menarik bagi mereka yang sudah terbiasa dengan alat tersebut. Namun, ini dapat digunakan sebagai panduan saku untuk menemukan jawaban atas pertanyaan dengan cepat.



Panduan asli ditulis pada tahun 2019 dengan mempertimbangkan versi terbaru Node.js dan ES2018 pada saat itu, yang menjelaskan relevansinya.



Manual ini terdiri dari 54 bagian (bab), yang dalam bentuk yang dapat diakses menguraikan dasar-dasar dan beberapa fitur Node.js. Tutorial ini tidak akan menjadikan Anda ahli dalam JavaScript sisi server, tetapi akan membantu Anda mulai mempelajarinya dan menentukan jalan ke depan.



Jumlah halaman yang dilihat disimpan di penyimpanan lokal, yang memungkinkan Anda untuk keluar dari aplikasi kapan saja, dan ketika Anda kembali, mulai dari tempat Anda tinggalkan.



Halaman diganti menggunakan tombol dan keyboard. Terwujud



digunakan untuk mendesain aplikasi .

Beberapa kata tentang implementasi

Penerapan aplikasi sangat sederhana.



Setiap bagian (bab) adalah modul dengan konten sebagai berikut:

export default `
  
`

Di markup halaman utama, kami memiliki tautan:

<a class="link" data-url="1" href="#">1. </a>

dan tombol:

<!--    -->
<button>
    <i class="left">navigate_before</i>
</button>
<button>
    <i class="right">navigate_after</i>
</button>

Saat Anda mengklik link atau tombol, fungsi tampilan halaman dipanggil, yang meneruskan nomor halaman. Saat aplikasi diinisialisasi, nomor halaman diminta dari penyimpanan lokal. Jika tidak ada, nomor halaman = 1. Saat Anda mengklik link, nomor halaman menjadi nilai atribut "data-url" dari link tersebut. Saat Anda menekan tombol, nomor halaman bertambah atau berkurang 1. Fungsinya sendiri terlihat seperti ini:

const showPage = i => {
    //    
    const url = `./chapters/${i}.js`
    //   
    import(url)
        //     
        .then(data => container.innerHTML = data.default)
    //      
    localStorage.setItem('NodejsGuidePageNumber', i)
    //  
    scrollTo(0, 0)
}

Itu saja, seperti yang Anda lihat, tidak ada yang istimewa. Dua baris kode pertama adalah bilah navigasi Materialize. Anda dapat membaca tentang service worker di sini .



Seperti yang Anda ketahui, hanya orang yang tidak melakukan apa-apa yang tidak salah, jadi saya mohon maaf atas kemungkinan kesalahan dan kesalahan ketik. Saya akan berterima kasih atas bantuan Anda dalam menemukan dan memperbaikinya.



Saya harap Anda menikmati aplikasinya. Terima kasih atas perhatian Anda.