前端框架：别再用 jQuery 了

前端框架别再用 jQuery 了毒舌时刻这代码写得跟化石似的都什么年代了还在用 jQuery。各位前端同行咱们今天聊聊前端框架。别告诉我你还在使用 jQuery那感觉就像在智能手机时代还在用功能机——能用但太落后了。为什么你需要现代前端框架最近看到一个项目用 jQuery 写了几千行代码维护起来比登天还难。我就想问你是在写代码还是在写历史反面教材// 反面教材使用 jQuery // index.html !DOCTYPE html html head titlejQuery App/title script srchttps://code.jquery.com/jquery-3.6.0.min.js/script /head body div idapp h1jQuery App/h1 input typetext idname placeholderEnter your name button idsubmitSubmit/button div idresult/div /div script srcapp.js/script /body /html // app.js $(document).ready(function() { $(#submit).click(function() { const name $(#name).val(); $(#result).text(Hello, ${name}!); }); });毒舌点评这代码就像在用老掉牙的工具效率低得可怜。正确姿势1. React// 正确姿势React // 1. 安装依赖 // npm install react react-dom // 2. 基本组件 // App.jsx import React, { useState } from react; function App() { const [name, setName] useState(); const [result, setResult] useState(); const handleSubmit () { setResult(Hello, ${name}!); }; return ( div h1React App/h1 input typetext value{name} onChange{(e) setName(e.target.value)} placeholderEnter your name / button onClick{handleSubmit}Submit/button div{result}/div /div ); } export default App; // 3. 入口文件 // index.js import React from react; import ReactDOM from react-dom; import App from ./App; ReactDOM.render( React.StrictMode App / /React.StrictMode, document.getElementById(root) );2. Vue// 正确姿势Vue // 1. 安装依赖 // npm install vue // 2. 基本组件 // App.vue template div h1Vue App/h1 input typetext v-modelname placeholderEnter your name / button clickhandleSubmitSubmit/button div{{ result }}/div /div /template script export default { data() { return { name: , result: }; }, methods: { handleSubmit() { this.result Hello, ${this.name}!; } } }; /script // 3. 入口文件 // main.js import { createApp } from vue; import App from ./App.vue; createApp(App).mount(#app);3. Angular// 正确姿势Angular // 1. 安装依赖 // npm install -g angular/cli // ng new my-app // 2. 基本组件 // app.component.ts import { Component } from angular/core; Component({ selector: app-root, template: div h1Angular App/h1 input typetext [(ngModel)]name placeholderEnter your name / button (click)handleSubmit()Submit/button div{{ result }}/div /div }) export class AppComponent { name ; result ; handleSubmit() { this.result Hello, ${this.name}!; } } // 3. 模块 // app.module.ts import { NgModule } from angular/core; import { BrowserModule } from angular/platform-browser; import { FormsModule } from angular/forms; import { AppComponent } from ./app.component; NgModule({ declarations: [AppComponent], imports: [BrowserModule, FormsModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}4. Svelte// 正确姿势Svelte // 1. 安装依赖 // npm create sveltelatest my-app // 2. 基本组件 // App.svelte script let name ; let result ; function handleSubmit() { result Hello, ${name}!; } /script div h1Svelte App/h1 input typetext bind:value{name} placeholderEnter your name / button on:click{handleSubmit}Submit/button div{result}/div /div毒舌点评这才叫现代前端框架声明式语法组件化开发再也不用担心代码混乱了。