前端全套基础知识点整理(HTML+CSS+JS+正则) 一、JavaScript 核心进阶1.1 函数柯里化与反柯里化1.1.1 函数柯里化柯里化把多参数函数拆分为多个单参数嵌套函数延迟执行、参数复用。// 原多参数函数 function ad(a,b,c){ return abc; } // 柯里化封装函数 function ac(ad,a,b){ return function(c){ return ad(a,b,c); } } // 参数复用固定前两个参数 var path ac(ad,1,7); // 后续只需传第三个参数即可执行 console.log(path(3)); // 111.1.2 函数反柯里化反柯里化剥离函数的this指向让通用方法可以被任意对象调用实现方法借用。var obj1 { name: zs, fn: function(n1,n2){ console.log(this.name,n1,n2); } } var obj2 { name: ww } var obj3 { name: sq } // 反柯里化通用封装 var uncurrying function (fn) { return function () { // 展开参数改变this指向 return fn.call(...arguments); } }; // obj2借用obj1的fn方法 uncurrying(obj1.fn)(obj2,参数1,参数2); // ww 参数1 参数21.2 Less 核心语法Less是CSS预处理器扩展CSS变量、嵌套、运算、函数等能力提升样式复用性。变量定义统一样式变量统一维护颜色、尺寸、间距嵌套遵循HTML层级结构编写样式代码层级清晰算数运算符支持加减乘除运算动态计算尺寸、颜色函数调用内置大量颜色、尺寸处理函数支持自定义函数命名空间和访问器模块化管理样式避免样式污染1.3 Fetch 前后端请求Fetch是浏览器原生请求API替代传统Ajax基于Promise支持异步请求。1.3.1 GET 请求fetch(http://127.0.0.1:8081/tow) .then(function (e) { return e.text() }) .then(function (e) { console.log(JSON.parse(e)) });1.3.2 POST 请求传参fetch(http://127.0.0.1:8081/tow, { method: post, headers: { Accept: application/json, Content-Type: application/json }, body: JSON.stringify({ name: zs, age: 18 }) }).then(function (e) { return e.text() }).then(function (e) { console.log(JSON.parse(e)) });1.4 Promise 异步链式调用Promise 解决异步回调地狱支持链式调用、错误捕获统一异步代码写法。var p new Promise(function (success, fail) { $.get(http://127.0.0.1:8081/one, function (data) { fail(data); // 主动触发失败回调 }) }); // 第一层链式调用 var p1 p.then(function (data) { if (data.stare) { console.log(1: data.max); return $.get(http://127.0.0.1:8081/tow) } },function (data) { console.log(失败拦截: data.max); return data; }); // 第二层链式调用 var p2 p1.then(function (data) { if (data.stare) { console.log(2: data.max); return $.get(http://127.0.0.1:8081/three) } }) // 第三层调用 全局错误捕获 p2.then(function (data) { if (data.stare) { console.log(3: data.max); } }).catch(function (data) { console.log(最后失败: data); })1.5 AJAX 前后端交互1.5.1 商业项目开发流程产品原型 ➝ UI设计 ➝ 前端/后端开发 ➝ 测试 ➝ 上线1.5.2 前后端交互流程前端通过AJAX调用后端接口URL地址提交数据并获取后端响应数据后端处理业务逻辑、操作数据库返回数据给前端渲染。补充WebSocket 可实现后端主动向前端推送数据即时通讯、聊天室、实时数据更新1.5.3 前后端核心职责前端页面结构样式实现 数据请求与页面渲染后端业务逻辑处理 数据库增删查改1.5.4 AJAX 核心作用实现无刷新前后端数据交互局部更新页面数据无需刷新整个页面提升用户体验。1.6 JS 本地存储Cookie / localStorage / sessionStorage1.6.1 Cookie 本地存储Cookie 是存储在浏览器的文本数据跟随请求传递用于记录用户状态默认关闭浏览器失效。核心特点存储大小单条4KB左右默认会话级失效可手动设置过期时间跟随HTTP请求自动携带后端可获取以键值对字符串形式存储基础操作// 1. 创建Cookie document.cookieusernamezhangsan;; // 2. 设置过期时间max-age 秒数 document.cookiename3zs;max-age5;path/; // 3. 设置路径根目录全局可访问 document.cookiename3zs;max-age5;path/; // 4. 读取Cookie var cookiev document.cookie; // 5. 修改Cookie覆盖同名同path document.cookiename3zs2;max-age5;path/; // 6. 删除Cookie设置过期时间为0 document.cookie name3;expires new Date().toUTCString() ;path/;Cookie 通用封装增删改查// 批量设置cookie function setCookies(objArr) { objArr.forEach(function (ele) { var d new Date(); d.setTime(d.getTime() ele.time); d d.toUTCString(); document.cookie ele.cookieName ele.cookieValue ;expires d ;path ele.path; }); } // 获取所有cookie转为对象 function getAllcookies() { var obj {}; var arr document.cookie.split(;); arr.forEach(function (ele) { var arr2 ele.split(); obj[arr2[0].trim()] arr2[1]; }); return obj; } // 清空所有cookie function clearAllCookies() { var arr document.cookie.split(;); arr.forEach(function (ele) { var arr2 ele.split(); document.cookie arr2[0] ;expires new Date().toUTCString() ;path/; }); } // 暴露全局方法 var cookieObj { setCookies, getAllcookies, clearAllCookies }实战Cookie 7天免登录!DOCTYPE html html langen head meta charsetUTF-8 title免登录案例/title /head body input nameusername placeholder请输入用户名/br / input typecheckbox 七天免登录 button onclickfn()登录/button script // 页面加载判断登录状态 var state cookieObj.getAllcookies().loginState; if (state yes) { setTimeout(function () { alert(自动登录成功); }, 2000) } // 登录方法 function fn() { var usernameV document.querySelector(input[nameusername]).value; if (usernameV admin) { alert(登录成功); // 勾选则写入7天免登录cookie if (document.querySelector([typecheckbox]).checked) { document.cookie loginStateyes;max-age 7 * 24 * 3600 ;path/; } } else { alert(用户名错误登录失败); } } /script /body /html1.6.2 localStorage 永久存储HTML5 本地永久存储关闭页面/浏览器数据不丢失容量约5M仅前端可用不跟随请求传递。核心操作// 新增/修改 localStorage.setItem(name,张三); // 查询 localStorage.getItem(name); // 删除指定 localStorage.removeItem(name); // 清空全部 localStorage.clear(); // 存储引用类型对象/数组需序列化 let obj {age:18}; localStorage.setItem(user,JSON.stringify(obj)); let res JSON.parse(localStorage.getItem(user));1.6.3 sessionStorage 会话存储临时会话存储关闭当前浏览器窗口即销毁用法和 localStorage 完全一致仅生命周期不同。1.7 JS 事件机制1.7.1 事件绑定三种方式行内绑定标签内直接写 onclickDOM属性绑定元素.onclick 函数会覆盖同名事件事件监听绑定addEventListener可绑定多个事件不覆盖// 事件监听绑定 let btn document.querySelector(button); btn.addEventListener(click,fn); function fn(){ console.log(点击触发); }1.7.2 事件传播三阶段捕获阶段window → 目标节点自上而下目标阶段触发当前目标元素事件冒泡阶段目标节点 → window自下而上默认触发addEventListener第三个参数false冒泡默认、true捕获1.7.3 事件对象常用方法e.preventDefault(); // 阻止默认行为表单提交、a标签跳转 e.stopPropagation(); // 阻止事件冒泡 e.stopImmediatePropagation(); // 阻止后续同事件触发1.7.4 事件代理事件委托利用事件冒泡给父元素绑定事件统一处理所有子元素事件减少事件绑定、支持动态新增元素。1.8 BOM 浏览器对象模型BOM 操作浏览器窗口、历史记录、地址栏等核心全局对象window。1.8.1 核心对象document文档对象操作页面DOMhistory浏览历史back()后退、forward()前进、go(n)跳转location地址栏信息可实现页面跳转navigator获取浏览器设备信息screen获取屏幕信息1.8.2 window 常用方法window.open(url,_blank); // 打开新窗口 window.close(); // 关闭窗口 window.print(); // 打印页面 window.getSelection(); // 获取选中文本1.9 闭包闭包定义函数嵌套函数内层函数访问外层函数变量外层函数返回内层函数形成私有变量作用域。核心作用保留函数内部变量不被全局销毁实现变量私有化防止全局污染外部可修改/读取内部变量function Fn(){ var n 100; // 读取变量 function get(){ console.log(n); } // 修改变量 function set(v){ n v; } return {get,set}; } var fn new Fn(); fn.get(); // 100 fn.set(50); fn.get(); // 501.10 自执行匿名函数定义后立即执行无需手动调用常用于隔离作用域、防止变量污染。(function(){ let msg 自执行函数; console.log(msg); })()1.11 函数参数与Arguments传参方式对位传参参数顺序一一对应对象传参无需顺序适配多参数场景默认参数ES6直接设置默认值ES5通过判断赋值Arguments 伪数组函数内置伪数组存储所有传入参数可转为真数组操作function f1(){ // 伪数组转真数组 let arr Array.from(arguments); return arr.reduce((a,b)ab); } console.log(f1(1,2,3,4,5)); // 151.12 this指向、深浅拷贝、原型1.12.1 this 核心规则谁调用指向谁事件中指向触发元素、构造函数指向实例、普通函数指向window、箭头函数无this。1.12.2 深浅拷贝浅拷贝只拷贝一层引用类型拷贝地址改一个影响另一个赋值、Object.assign深拷贝完全拷贝数据互不影响JSON序列化、递归拷贝// 递归深拷贝支持函数、数组、对象 function deepClone(obj){ let newObj obj instanceof Array ? [] : {}; for(let k in obj){ newObj[k] typeof obj[k] object ? deepClone(obj[k]) : obj[k]; } return newObj; }1.12.3 修改this指向call/apply/bindcall参数依次传递立即执行apply参数以数组传递立即执行bind返回新函数延迟执行二、CSS 全套核心样式2.1 CSS 引入方式与优先级行内样式 内部样式 外部样式选择器权重!important 行内 ID 类/伪类 标签 通配符2.2 核心常用属性2.2.1 布局定位positionrelative相对、absolute绝对、fixed固定、static默认z-index层级堆叠数值越大越靠前需配合定位overflow:hidden隐藏溢出内容box-sizing:border-box边框内缩不撑大盒子2.2.2 显示隐藏区别display:none彻底隐藏不占位置无动画visibility:hidden隐藏内容保留位置支持过渡动画opacity:0透明隐藏保留位置和事件2.2.3 弹性布局 Flex父元素开启display:flex实现快速居中、自适应布局主轴对齐justify-contentcenter居中、space-between两端对齐侧轴对齐align-itemscenter垂直居中自动换行flex-wrap:wrap2.2.4 动画与过渡支持animation关键帧动画、transition过渡动画实现页面动态效果三、HTML 基础与语义化3.1 语义化标签H5语义化标签名对应功能提升可读性、SEO优化header头部、nav导航、main主体、footer底部article文章、section区块、aside侧边栏3.2 表单核心标签form、input、select、textarea、label实现用户数据采集支持get/post提交3.3 标签分类块级标签div、p、h1、ul独占一行可设宽高行级标签span、a、label自适应内容不可设宽高行内块input、img可设宽高、不换行四、正则表达式Python/JS通用4.1 常用匹配元字符符号说明\w字母、数字、下划线\d纯数字\s空白字符空格、换行、制表符.*?非贪婪匹配常用^ $开头、结尾匹配4.2 正则核心方法match从头匹配匹配失败返回nullsearch全局匹配第一个结果findall全局匹配所有结果返回数组sub替换匹配内容compile编译正则复用匹配规则4.3 实战豆瓣图书爬虫正则import requests import re # 请求豆瓣首页 content requests.get(https://book.douban.com/).text # 正则匹配图书信息 pattern re.compile(li.*?cover.*?href(.*?)\stitle(.*?).*?author(.*?).*?year(.*?).*?,re.S) results re.findall(pattern,content) # 遍历输出结果 for reslt in results: url,name,author,date reslt author re.sub(\s,,author) date re.sub(\s,,date) print(f链接{url}书名{name}作者{author}日期{date})五、总结本文覆盖前端基础三件套HTML/CSS/JS 进阶异步、本地存储、事件机制、正则爬虫是前端入门、面试、项目开发的核心必备知识点所有代码均可直接复制复用适合长期收藏学习。