当前位置：首页 > news >正文

Starting again-01

news 2025/10/3 5:28:22

1.js基础数据类型

主要分为两类：基本类型与引用类型。

1.1 基本类型

数字number：用于表示整数和浮点数。

var num1 = 42;
var num2 = 3.14;
var num3 = 123e5; // 12300000
var num4 = 123e-5; // 0.00123

字符串string：用于表示文本数据。字符串可以用单引号、双引号或反引号包围。

var str1 = "Hello";
var str2 = 'World';
var str3 = `Hello, ${str2}`;

布尔值Boolean：表示逻辑值，只有两个取值：true 和 false。

var isTrue = true;
var isFalse = false;

空Null：表示一个空值或未知值。null 是一个独立的类型，只包含一个值 null。

var emptyValue = null;

未定义Undefined：表示变量未被赋值。未定义也是一个独立的类型，只包含一个值

var undefinedValue;

Symbol：ES6 引入的一种新的原始数据类型，表示独一无二的值。用于创建对象的唯一标识符。

var sym = Symbol('unique');

BigInt：用于表示任意长度的整数。通过在整数末尾添加 n 来创建 BigInt 值。

var bigIntValue = 1234567890123456789012345678901234567890n;

1.2引用类型

对象（Object）：用于存储键值对的集合和更复杂的实体。对象由花括号 {} 包围，属性以名称和值对的形式定义。

var person = {firstName: "John",lastName: "Doe",age: 30
};

数组（Array）：一种特殊的对象，用于存储有序的集合。数组使用方括号 [] 包围，元素之间用逗号分隔。

var cars = ["Saab", "Volvo", "BMW"];

函数（Function）：一种特殊的对象，用于定义可调用的代码块。函数可以通过 function 关键字定义。

function greet(name) {return `Hello, ${name}`;
}

正则表达式（RegExp）：用于匹配文本模式的对象。

var pattern = /w3schools/i;

日期（Date）：用于处理日期和时间的对象。

var date = new Date();

2.状态码

1XXX(信息性状态码): 接受请求正在处理；

2XXX(成功状态码): 请求正常处理完毕；

3XXX(重定向状态码)：需要后续操作才能完成请求；

4XXX(客服端错误)：请求包含语法错误或无法完成；

5XXX(服务器错误)：服务器处理请求过程中发生错误；

常见的状态码

200 OK 请求成功一般用于get 与 post请求；

400 Bad Request 客户端请求语法错误服务器无法理解；

404 Not Found 服务器无法根据客户端请求找到资源；

500 服务器内部错误无法完成请求；

3.跨域问题

跨域问题由于浏览器的同源策略限制引起的，网页请求访问不同源（协议，域名，端口任一不同限制跨域请求）。

3.1 后端进行处理 CORS配置策略（跨域资源共享） Access-Control-Allow-Origin

响应头中动态添加 CORS 配置策略。

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");response.setHeader("Access-Control-Allow-Credentials", "true");chain.doFilter(req, res);
}

Access-Control-Allow-Origin 是一个 HTTP 响应标头，用于指定哪些来源（origin）可以访问资源。它是跨域资源共享（CORS）机制的一部分，允许服务器控制哪些外部域可以访问其资源。

（1）允许任何来源访问资源：

Access-Control-Allow-Origin: *

（2）允许特定来源访问资源

Access-Control-Allow-Origin: https://developer.mozilla.org

（3）null：指定来源为“null”

（4）动态设置

根据请求的来源动态设置 Access-Control-Allow-Origin。例如，在 Nginx 中，可以使用正则表达式来匹配允许的来源

location / {if ($http_origin ~* "^https?://(example.com|www.example.com)$") {add_header Access-Control-Allow-Origin "$http_origin";}
}

3.2 前端处理 Nginx 中解决跨域

反向代理：通过 proxy_pass 将 /api/ 开头的请求转发到后端服务器。
CORS 支持：通过 add_header 添加跨域头部，允许所有来源的请求。
预检请求处理：针对 OPTIONS 请求返回状态码 204，避免浏览器阻止复杂请求。

server {listen 80;server_name localhost;# 配置反向代理location /api/ {proxy_pass http://backend_server_address;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}# 添加 CORS 头部location / {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';if ($request_method = 'OPTIONS') {return 204;}}
}

4.vue2与vue3的区别

4.1.响应式系统的区别

vue2响应式原理：

vue2使用Object.defineProperty来实现响应式系统。存在缺点：无法检测属性的添加或删除，以及无法直接处理数组索引和长度的变化。

vue3响应式原理：

vue3采用ES6Proxy的响应式系统，允许vue拦截对象的任何属性的读取和写入操作，使得vue3能够检测属性的添加与删除，有效处理数组的更新。

4.2选项式API与组合式API

vue2使用选项式API如(data methods computed)进行组件间的逻辑组织。

vue3使用组合式API如(ref reactive computed watch)为逻辑服用和代码组织提供更佳灵活的的方式。

4.3生命周期变化

vue2提供生命周期 created mounted updated destroyed等

vue3对生命周期钩子函数进行重命名和调整beforeDestroy和destroyed分别更名为beforeUnmount和unmounted。

vue3引入新的生命周期如onMounted，onUpdated，onUnmpounted用于组合式API。

4.4根节点变化

vue2要求每个组件必须拥有一个单独的根节点。

vue3允许多个根节点，使得组件模板允许多个并列的根元素。

5.首屏优化

5.1webpack优化前端性能

代码分割：使用webpack代码分割功能，将应用程序拆分为多个包，实现按需加载。减少初始加载时间。

懒加载与预加载：使用webpack的懒加载（延迟加载不必要代码，提高初始加载速度）；使用webpack预加载功能（提前加载可能未来需要资源的资源，提高用户体验）

等等

5.2Gzip压缩

启用Gzip压缩（通常在服务器进行配置）

5.3渲染优化

简化DOM结构，避免深层嵌套。

使用骨架屏减少感知加载时间。

优化关键渲染路径（减少css选择器的复杂度，避免使用@import引入css【穿行加载】）

5.4图片优化

现代图片格式（WebP/AVIF），比 JPEG/PNG 小 30%+

图片懒加载（loading="lazy" 属性）

根据设备尺寸提供响应式图片

<img src="small.jpg" srcset="medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 800px" alt="示例图片">

6.普通路由与拦截路由

6.1普通路由

普通路由就是常规的路由，用于直接映射URL与页面组件的关系，实现页面间无阻碍跳转。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';function App() {return (<BrowserRouter><Routes>{/* 普通路由定义 */}<Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/contact" element={<Contact />} /></Routes></BrowserRouter>);
}

6.2拦截路由

拦截路由跳转前进行额外的验证或处理，常用于控制页面访问权限，验证用户是否登录，是否特定权限，权限控制等

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';// 拦截路由组件
function ProtectedRoute({ element }) {// 检查用户是否登录const isAuthenticated = localStorage.getItem('token');// 如果未登录，重定向到登录页if (!isAuthenticated) {return <Navigate to="/login" replace />;}// 如果已登录，渲染目标组件return element;
}function App() {return (<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="/login" element={<Login />} />{/* 受保护的拦截路由 */}<Route path="/dashboard" element={<ProtectedRoute element={<Dashboard />} />} /></Routes></BrowserRouter>);
}