Rumah >hujung hadapan web >tutorial js >Mencipta Editor Kod Ringan Menggunakan Vanilla Js

Mencipta Editor Kod Ringan Menggunakan Vanilla Js

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-04 14:23:29810semak imbas

Creating A Lightweight Code Editor Using Vanilla Js

Hei!??
Saya teruja untuk berkongsi projek baharu saya, NEXON, editor kod bahagian hadapan yang ringkas,
Yang saya bina menggunakan vanilla js.

pengenalan

Nexon, ialah editor kod dalam talian yang ringkas & ringan, yang membolehkan anda menulis kod bahagian hadapan dalam talian,
Ia juga menyediakan Pengurusan projek yang mantap, di mana anda boleh menyimpan projek anda, mengeditnya & juga anda boleh memuat turun projek anda dalam format .html!

ciri

  • pengurusan projek
  • pratonton kod langsung
  • ciri muat turun
  • UI mudah & intuitif

teknologi & perpustakaan yang digunakan

  • html
  • javascript
  • litestyle.css
  • FileSaver.js

Lihat projek saya

  • Nexon
  • GitHub

idea itu

Semalam, kebosanan melanda & saya memutuskan untuk membina sesuatu dan dengan itu, NEXON dilahirkan

proses tersebut

Jadi pertama sekali, saya mereka bentuk UI, saya merancang untuk menggunakan litestyle.css, Iaitu rangka kerja css yang saya bina beberapa bulan lalu, kerana saya ingin menyemak keupayaannya,
& Kemudian saya menulis js, untuk ini,
Saya telah menggunakan iframe mudah dan textarea, di mana nilai textarea ditetapkan sebagai srcdoc iframe, pada bila-bila masa anda menaip.
Saya memanfaatkan storan setempat, untuk menyimpan data pengguna.

cabaran yang dihadapi

Melaksanakan, ciri muat turun, terbukti rumit, jadi saya menggunakan FileSaver.js untuk mengatasi cabaran ini

pengajaran yang dipelajari

Membina NEXON ialah pengalaman pembelajaran yang hebat.
Membina NEXON, membantu saya mengukuhkan pengetahuan JAVASCRIPT saya,
& Juga saya telah mempelajari kepentingan menulis kod modular.

Kesimpulan

Membina NEXON, menandakan peristiwa penting dalam perjalanan akhir hadapan saya, mempamerkan kuasa vanila JS.

Atas ialah kandungan terperinci Mencipta Editor Kod Ringan Menggunakan Vanilla Js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn