JavaScript in Action: Contoh dan projek dunia nyata

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Bina API RESTful melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

Pengenalan

Dalam dunia pengaturcaraan hari ini, JavaScript telah berkembang dari bahasa skrip pelanggan yang mudah ke bahasa pengaturcaraan sepanjang masa, digunakan secara meluas dalam pembangunan aplikasi front-end, back-end, mudah alih dan desktop. Pernahkah anda ingin tahu bagaimana mengubah JavaScript dari pembelajaran teoritis ke aplikasi praktikal? Artikel ini akan membawa anda untuk meneroka penerapan JavaScript di dunia nyata, dan membantu anda menguasai kemahiran praktikal bahasa yang berkuasa ini melalui contoh dan projek sebenar. Sama ada anda pemula atau pemaju yang berpengalaman, selepas membaca artikel ini, anda akan dapat memohon JavaScript untuk projek sebenar anda dengan lebih yakin.

Ulasan Asas JavaScript

Pengetahuan asas JavaScript termasuk pembolehubah, fungsi, objek, tatasusunan, gelung, dan pernyataan bersyarat, dan lain -lain. Ini adalah asas untuk memahami dan memohon JavaScript. Bagi pemula, adalah penting untuk menguasai konsep asas ini. Pada masa yang sama, JavaScript juga menyediakan satu siri objek dan kaedah terbina dalam, seperti operasi DOM, pemprosesan acara, dan pengaturcaraan asynchronous, yang merupakan alat yang sering digunakan dalam projek sebenar.

Dalam aplikasi praktikal, juga penting untuk memahami persekitaran pelaksanaan dan skop JavaScript. Persekitaran pelaksanaan JavaScript boleh menjadi penyemak imbas, node.js, atau runtime JavaScript lain. Memahami perbezaan dalam persekitaran ini dapat membantu anda menulis kod silang platform dengan lebih baik.

Analisis Fungsi Teras JavaScript

Pengaturcaraan yang didorong oleh peristiwa

Salah satu teras JavaScript adalah pengaturcaraan yang didorong oleh peristiwa, yang menjadikannya sangat kuat ketika mengendalikan interaksi pengguna dan operasi tak segerak. Pengaturcaraan yang didorong oleh peristiwa membolehkan anda mendengar peristiwa tertentu (seperti klik, input papan kekunci, atau pemuatan data) dan melaksanakan kod yang sepadan apabila peristiwa itu dicetuskan.

 // Event Mendengarkan Contoh Document.getElementById ('MyButton'). AddEventListener ('klik', fungsi () {
    Alert ('Butang diklik!');
});

Kelebihan pengaturcaraan yang didorong oleh peristiwa adalah bahawa ia dapat menjadikan aplikasi anda lebih responsif terhadap operasi pengguna, sementara juga menjadikan struktur kod lebih jelas dan lebih modular. Walau bagaimanapun, mengendalikan sejumlah besar pendengar acara boleh menyebabkan masalah prestasi, jadi dalam aplikasi praktikal, pendengar acara perlu diuruskan dengan munasabah.

Pengaturcaraan Asynchronous

Keupayaan pengaturcaraan asynchronous JavaScript menjadikannya berfungsi dengan baik apabila mengendalikan operasi I/O dan permintaan rangkaian. Dengan menggunakan fungsi panggil balik, janji, dan async/menunggu, JavaScript dapat dengan mudah mengendalikan operasi tak segerak, mengelakkan menyekat benang utama.

 // contoh asynchronous menggunakan fungsi janji fetchData () {
    Kembalikan janji baru ((menyelesaikan, menolak) => {
        setTimeout (() => {
            menyelesaikan ('data yang berjaya berjaya');
        }, 1000);
    });
}

fetchData (). Kemudian (data => console.log (data));

Kelebihan pengaturcaraan asynchronous adalah bahawa ia dapat meningkatkan kelajuan tindak balas aplikasi dan pengalaman pengguna, tetapi anda juga perlu memberi perhatian kepada pengurusan neraka panggilan balik dan rantaian janji untuk mengelakkan kod menjadi sukar untuk dikekalkan.

Contoh penggunaan

Bina aplikasi senarai todo yang mudah

Mari kita tunjukkan permohonan JavaScript dalam projek sebenar melalui aplikasi Senarai Todo yang mudah. Aplikasi ini akan membolehkan pengguna menambah, memadam, dan membuat tugas.

 // Todo List Application const todolist = [];

fungsi addToDo (tugas) {
    todolist.push ({tugas, siap: palsu});
    renderTodolist ();
}

fungsi toggletodo (indeks) {
    TODOLIST [INDEX] .COMPLETED =! TODOLIST [INDEX] .COMPLETED;
    renderTodolist ();
}

fungsi membuangToDo (indeks) {
    todolist.splice (indeks, 1);
    renderTodolist ();
}

fungsi renderTodolist () {
    const todolistElement = document.getElementById ('todolist');
    todolistelement.innerHtml = '';
    todolist.foreach ((todo, index) => {
        const li = document.createElement ('li');
        li.innerHtml = `
            <input type = "checkbox" $ {todo.completed? &#39;diperiksa&#39;: &#39;&#39;} onchange = "toggletodo ($ {index})">
            <span style = "text-decoration: $ {todo.completed? &#39;line-trough&#39;: &#39;none&#39;}"> $ {todo.task} </span>
            <butang onclick = "RemoveToDo ($ {index})"> Padam </butang>
        `;
        todolistelement.appendchild (li);
    });
}

document.getElementById (&#39;addToDo&#39;). AddEventListener (&#39;klik&#39;, fungsi () {
    const tugas = document.getElementById (&#39;TodoInput&#39;). Nilai;
    jika (tugas) {
        addTodo (tugas);
        document.getElementById (&#39;TodoInput&#39;). Value = &#39;&#39;;
    }
});

Contoh ini menunjukkan cara menggunakan JavaScript untuk memanipulasi DOM, proses proses, dan menguruskan keadaan data. Dalam projek sebenar, anda boleh menggunakan struktur data yang lebih kompleks dan skim pengurusan negeri seperti Redux atau Vuex.

Bina API Restful yang Sederhana

JavaScript bukan sahaja boleh digunakan untuk pembangunan front-end, tetapi juga untuk pembangunan back-end. Mari kita bina API RESTful yang mudah melalui Node.js dan menyatakan untuk menunjukkan aplikasi JavaScript di backend.

 // Membina API RESTful menggunakan Express
const Express = memerlukan ('Express');
const app = express ();
const port = 3000;

app.use (express.json ());

biarkan todos = [];

app.post ('/todos', (req, res) => {
    const todo = req.body;
    todos.push (todo);
    Res.Status (201) .json (Todo);
});

app.get ('/todos', (req, res) => {
    res.json (todos);
});

app.put ('/todos/: id', (req, res) => {
    const id = req.params.id;
    const todo = req.body;
    todos [id] = todo;
    res.json (todo);
});

app.delete ('/todos/: id', (req, res) => {
    const id = req.params.id;
    const deletedToDo = todos.splice (id, 1);
    res.json (DeletedTodo);
});

app.listen (port, () => {
    console.log (`pelayan berjalan pada port $ {port}`);
});

Contoh ini menunjukkan bagaimana untuk membina API RESTful yang mudah menggunakan JavaScript dan Node.JS. Dalam projek sebenar, anda mungkin menggunakan pangkalan data untuk menyimpan data dan menambah lebih banyak logik pengendalian pengesahan dan ralat.

Pengoptimuman prestasi dan amalan terbaik

Pengoptimuman prestasi dan amalan terbaik adalah penting dalam aplikasi praktikal. Berikut adalah beberapa pengoptimuman prestasi JavaScript dan cadangan amalan terbaik:

• Mengurangkan Operasi DOM : Operasi DOM yang kerap boleh menyebabkan masalah prestasi, meminimumkan bilangan operasi DOM, dan menggunakan serpihan dokumen atau DOM maya untuk mengoptimumkan.
• Menggunakan perwakilan acara : Untuk sejumlah besar elemen, menggunakan perwakilan acara dapat mengurangkan bilangan pendengar acara dan meningkatkan prestasi.
• Mengoptimumkan Operasi Asynchronous : Gunakan Janji dan Async/menunggu dengan munasabah untuk mengelakkan panggilan balik, dan meningkatkan kebolehbacaan dan mengekalkan kod.
• Segmentasi kod dan pemuatan malas : Untuk aplikasi besar, menggunakan segmentasi kod dan pemuatan malas dapat mengurangkan masa pemuatan awal dan meningkatkan pengalaman pengguna.
• Menggunakan cache : Untuk data yang sering diakses, menggunakan cache dapat mengurangkan permintaan rangkaian dan meningkatkan prestasi.

Dalam projek sebenar, pengoptimuman prestasi dan amalan terbaik perlu diselaraskan dan dioptimumkan mengikut keadaan tertentu. Melalui amalan dan pembelajaran yang berterusan, anda akan dapat menguasai kemahiran aplikasi JavaScript dan membina aplikasi yang cekap dan boleh dipelihara.

Melalui artikel ini, anda telah belajar tentang aplikasi JavaScript di dunia nyata, dari aplikasi senarai mudah untuk pembinaan API yang tenang, pengoptimuman prestasi dan amalan terbaik. Saya harap contoh -contoh dan projek -projek yang sebenar ini dapat membantu anda menguasai JavaScript dan fleksibel memohon dalam projek -projek sebenar.

Atas ialah kandungan terperinci JavaScript in Action: Contoh dan projek dunia nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!