JavaScript

所有编程语言的工作原理都是将类似英语的语法翻译成机器代码，然后由操作系统运行。JavaScript 被广泛归类为脚本语言或直译式语言。JavaScript 代码被解释，即由 JavaScript 引擎直接翻译成底层机器语言代码。而其他编程语言是通过编译器在单独的步骤中将整个代码编译成机器代码。因此，所有的脚本语言都是编程语言，但不是所有的编程语言都是脚本语言。

JavaScript 引擎是运行 JavaScript 代码的计算机程序。第一个 JavaScript 引擎仅仅是解释器，但所有现代引擎都使用实时或运行时编译来提高性能。

服务器端 JavaScript 指的是后端服务器逻辑中编码语言的使用。在这种情况下，JavaScript 引擎直接位于服务器上。服务器端 JavaScript 函数可以访问数据库，执行不同的逻辑操作，并响应服务器操作系统触发的各种事件。服务器端脚本的主要优势在于，您可以根据自己的需求、访问权限和网站的信息请求高度定制网站响应。

动态一词描述了客户端和服务器端的 JavaScript。动态行为是根据需要更新网页显示以生成新内容的能力。客户端和服务器端 JavaScript 的区别在于它们生成新内容的方式。服务器端代码通过使用应用程序逻辑和修改数据库中的数据来动态生成新内容。另一方面，客户端 JavaScript 通过使用用户界面逻辑并修改客户端上已有的网页内容，在浏览器中动态生成新内容。这两种情况下的含义略有不同，但却是相关的，而且这两种方法共同增强了用户体验。

除了动态功能的实现之外，这两种 JavaScript 用法的另一个区别是代码可以访问的资源。在客户端，浏览器控制 JavaScript 的运行时环境。代码只能访问浏览器允许它访问的资源。例如，除非您点击下载按钮，否则它不能将内容写入您的硬盘。另一方面，服务器端函数可以根据需要访问服务器计算机的所有资源。

三、什么是 JavaScript 库？

JavaScript 库是预先编写的代码片段的集合，Web 开发人员可以重用这些代码片段来执行标准的 JavaScript 函数。JavaScript 库代码根据需要插入到项目的其余代码中。如果您将 JavaScript 应用程序代码想象成一座房子，那么 JavaScript 库就像现成的家具，开发人员可以用它来改善房子的功能。JavaScript 库（Library） 是一组预定义的函数和工具，用于简化 JavaScript 编程，提高开发效率。它们通常封装了常见的功能，让开发者可以直接调用，而不需要从零编写复杂的代码。

JavaScript 库的特点

✅ 封装常用功能（如 DOM 操作、动画、网络请求等）
✅ 代码简洁（减少重复代码，提升可读性）
✅ 提高开发效率（避免重复造轮子）
✅ 跨浏览器兼容（解决不同浏览器的兼容性问题）

常见的 JavaScript 库

3.1） jQuery（简化 DOM 操作）

作用：简化 HTML 文档操作、事件处理、动画和 AJAX 请求。
📌 适用于：老项目维护，快速开发。
📌 不适用于：现代前端框架（如 React/Vue）。

示例（jQuery 简化 DOM 操作）

// 普通 JavaScript 写法
document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("text").innerText = "Hello, jQuery!";
});

// 使用 jQuery
$("#btn").click(function() {
    $("#text").text("Hello, jQuery!");
});

📌 官网：https://jquery.com/

3.2） Lodash（工具函数库）

作用：提供常见的数组、对象、函数、字符串等操作方法，避免手写复杂逻辑。
📌 适用于：数据处理、函数式编程。

示例（Lodash 使用）

const _ = require("lodash");

const numbers = [1, 2, 3, 4, 5, 6];
const evens = _.filter(numbers, n => n % 2 === 0);
console.log(evens); // [2, 4, 6]

📌 官网：https://lodash.com/

3.4） Axios（HTTP 请求库）

作用：简化 AJAX 请求，支持Promise 和 async/await，比原生 fetch 更强大。
📌 适用于：前后端数据交互（REST API、GraphQL）。

示例（使用 Axios 发送 HTTP 请求）

axios.get("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

📌 官网：https://axios-http.com/

3.5）Moment.js（日期处理库） ⏳（已被 Day.js 替代）

作用：简化时间格式化、计算、解析等操作。
📌 适用于：老项目，日期时间计算。
📌 推荐替代：Day.js（体积更小）

示例（格式化日期）

const moment = require("moment");

console.log(moment().format("YYYY-MM-DD HH:mm:ss")); 
// 输出：2025-03-14 12:30:45

📌 官网：https://momentjs.com/

3.6） Chart.js（数据可视化库） 📊

作用：轻量级数据可视化库，可用于创建折线图、柱状图、饼图等。
📌 适用于：简单的图表展示，不需要复杂交互。

示例（创建折线图）

const ctx = document.getElementById("myChart").getContext("2d");
const myChart = new Chart(ctx, {
    type: "line",
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [{
            label: "Sales",
            data: [10, 20, 30, 40],
            borderColor: "blue",
            borderWidth: 2
        }]
    }
});

📌 官网：https://www.chartjs.org/

3.7）库 vs 框架

📌 结论：如果你只是想增强 JavaScript 代码的功能，可以使用库。如果你需要构建整个应用程序，通常使用框架。

3.8）总结

JavaScript 库可以大大提高开发效率，减少代码重复。不同的库适用于不同的应用场景：

如果你刚开始学习 JavaScript，建议先掌握原生 JavaScript，然后再根据需求使用适合的库！

3.9）JavaScript 库的一些常见用途

• 数据可视化

• DOM 操作

• 表单

• 数学和文本函数

📌 通俗理解：

• 框架 就像装修公司，提供一整套方案，你必须按它的方式装修房子。
• 库 就像家居商店，你可以自由选择工具和家具，按照自己的想法装修。

4.2）常见的 JavaScript 框架

4.2.1. React（前端框架，UI 组件库）

📌 特点：
✅ 由 Facebook（Meta）开发，组件化开发模式
✅ 使用虚拟 DOM 提高性能
✅ 生态系统丰富，如 Next.js（SSR 框架）

📌 适用于：
✅ 现代 Web 应用，如单页应用（SPA）
✅ 需要高性能和灵活性的项目

示例（React 组件）

import React from "react";

function App() {
    return <h1>Hello, React!</h1>;
}

export default App;

📌 官网：https://react.dev/

4.2.2. Vue.js（前端框架）

📌 特点：
✅ 轻量级，语法简洁，学习曲线低
✅ 双向数据绑定（v-model）
✅ 适合渐进式开发，可用于小型项目

📌 适用于：
✅ 需要快速上手的 Web 应用
✅ 适合小型到中型项目

示例（Vue 组件）

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return { message: "Hello, Vue!" };
  }
};
</script>

📌 官网：https://vuejs.org/

4.2.3. Angular（前端框架）

📌 特点：
✅ 由 Google 开发，适用于大型应用
✅ 完整 MVC 结构（包括数据、视图、逻辑）
✅ 双向数据绑定，内置 TypeScript

📌 适用于：
✅ 企业级应用（后台管理系统、ERP、CRM）
✅ 需要严格结构化的项目

示例（Angular 组件）

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

@Component({
  selector: 'app-root',
  template: `<h1>{{ message }}</h1>`
})
export class AppComponent {
  message = "Hello, Angular!";
}

📌 官网：https://angular.io/

4.2.4. Node.js（后端框架）

📌 特点：
✅ 服务器端 JavaScript 运行环境
✅ 基于事件驱动 & 非阻塞 I/O，高性能
✅ 适用于构建 API、Web 服务器、实时应用

📌 适用于：
✅ 服务器端应用（REST API、WebSocket）
✅ 高并发应用（如聊天、实时通知）

示例（Node.js 服务器）

const http = require("http");

http.createServer((req, res) => {
    res.writeHead(200, { "Content-Type": "text/plain" });
    res.end("Hello, Node.js!");
}).listen(3000);

📌 官网：https://nodejs.org/

4.2.5. Express.js（后端框架，基于 Node.js）

📌 特点：
✅ 轻量级 Web 服务器框架，基于 Node.js
✅ 提供路由管理、中间件支持
✅ 适用于REST API 开发

📌 适用于：
✅ 需要快速搭建 API 服务
✅ 适用于小型到中型后端项目

示例（Express.js API 服务器）

const express = require("express");
const app = express();

app.get("/", (req, res) => {
    res.send("Hello, Express!");
});

app.listen(3000, () => console.log("Server running on port 3000"));

📌 官网：https://expressjs.com/

4.3） JavaScript 框架对比

4.4）如何选择 JavaScript 框架？

✅ 如果你是初学者 → Vue.js（简单易学）
✅ 如果你想做前端开发 → React（市场需求大，生态完善）
✅ 如果你要做大型企业项目 → Angular（结构化开发）
✅ 如果你要开发后端 API → Express.js（轻量、快速）

JavaScript 框架帮助开发者更高效地构建应用，不同框架适用于不同场景。选择最适合你的需求的框架，提升开发效率！

4.5）JavaScript 框架的一些使用案例

• Web 和移动应用程序开发

• 响应式 Web 开发

• 服务器端应用程序开发

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个简单的 HTML 页面。</p>
    <a href="https://www.example.com">点击这里</a>
</body>
</html>

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
    text-align: center;
}

p {
    font-size: 18px;
    line-height: 1.5;
}

<!DOCTYPE html>
<html>
<head>
    <title>HTML + CSS 示例</title>
    <style>
        body {
            background-color: lightgray;
            font-family: Arial;
        }
        h1 {
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是一个带有 CSS 样式的 HTML 页面。</p>
</body>
</html>

<h1 style="color: red; text-align: center;">我是标题</h1>

<head>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
    </style>
</head>

h1 {
    color: green;
    text-align: center;
}

<head>
    <link rel="stylesheet" href="style.css">
</head>