Apakah rangka kerja JS?

Apakah contoh kod khusus yang diperlukan

Dengan pembangunan pembangunan hadapan, rangka kerja JavaScript (pendek kata JS) telah menjadi alat yang sangat diperlukan untuk pembangun. Mereka boleh menyediakan fungsi yang berkuasa, memudahkan proses pembangunan dan meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan beberapa rangka kerja JS yang biasa digunakan dan menyediakan contoh kod khusus untuk rujukan pembaca.

1. React

React ialah rangka kerja JS yang dibangunkan oleh Facebook untuk membina antara muka pengguna. Ia menggunakan pendekatan pembangunan berasaskan komponen, membenarkan pembangun membahagikan UI yang kompleks kepada komponen boleh guna semula, memudahkan pengurusan dan penyelenggaraan kod. Berikut ialah contoh kod untuk membina komponen pembilang mudah menggunakan React:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

2. Angular

Angular ialah rangka kerja JS komprehensif yang dibangunkan oleh Google. Ia menyediakan set yang kaya dengan ciri dan alatan yang boleh digunakan untuk membina aplikasi satu halaman yang kompleks. Berikut ialah contoh kod untuk membina senarai tugasan mudah menggunakan Angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  template: `
    <h1>Todo List</h1>
    <ul>
      <li *ngFor="let todo of todos">{{ todo }}</li>
    </ul>
    <form (ngSubmit)="addTodo()">
      <input type="text" [(ngModel)]="newTodo" placeholder="New todo" required>
      <button type="submit">Add</button>
    </form>
  `,
})
export class TodoListComponent {
  todos: string[] = [];
  newTodo: string = '';

  addTodo() {
    if (this.newTodo) {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    }
  }
}

3. Vue

Vue ialah rangka kerja JS ringan yang juga boleh digunakan untuk membina antara muka pengguna. Konsep reka bentuknya adalah progresif dan boleh digunakan untuk projek langkah demi langkah. Berikut ialah contoh kod yang menggunakan Vue untuk membina komponen kira detik yang mudah:

<template>
  <div>
    <h1>Countdown: {{ count }}</h1>
    <button @click="startCountdown">Start</button>
    <button @click="stopCountdown">Stop</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 10
    };
  },
  methods: {
    startCountdown() {
      let interval = setInterval(() => {
        this.count--;
        if (this.count === 0) {
          clearInterval(interval);
        }
      }, 1000);
    },
    stopCountdown() {
      this.count = 0;
    }
  }
};
</script>

Di atas ialah beberapa rangka kerja JS yang biasa digunakan, masing-masing mempunyai ciri dan penggunaan uniknya sendiri. Dengan menguasai rangka kerja ini, pembangun boleh membangunkan aplikasi bahagian hadapan yang berkualiti tinggi dengan lebih cekap. Saya harap contoh kod di atas akan membantu pembaca.

Atas ialah kandungan terperinci Apakah rangka kerja JS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!