网站建设进度总结,网站设为主页功能怎么做,石家庄开发网站,普陀大型网站建设前端技术知识#xff08;含八股#xff09;总结 - 持续更新中 参考文献1.HTML和CSS1.1 语义化标签1.2 CSS 选择器及优先级 / position 定位 / box-sizing 属性 / transition / 继承属性#xff08;如字体文字类的属性大部分有继承#xff09;/ 行内元素和块级元素 / html的… 前端技术知识含八股总结 - 持续更新中 参考文献1.HTML和CSS1.1 语义化标签1.2 CSS 选择器及优先级 / position 定位 / box-sizing 属性 / transition / 继承属性如字体文字类的属性大部分有继承/ 行内元素和块级元素 / html的dom事件1.3 BFC1.4 元素水平垂直居中1.4 隐藏页面中某个元素1.5 页面布局方式1.6 伪类、伪元素1.7 css预处理器1.8 href和src1.9 img 的 title 和 alt 有什么区别1.10 像素1.11 视口1.12 移动端像素 2.JS含ES6、TS2.1 JS 中的 8 种数据类型及区别2.2 var / let(ES6) / const(ES6)2.3 JS异步问题处理2.3.1.回调函数2.3.2.Promise2.3.3.async/awaitGenerator语法糖 2.4 this2.5 JS单线程 / 异步/ EventLoop 事件循环 / 微任务和宏任务2.6 防抖debounce节流throttle2.7 闭包2.8 页面滚动监听上拉加载、懒加载2.9 原型与原型链2.10 箭头函数 / for of for in / 数组操作等其他js常用语法省略2.11 typescript2.12 console2.13 数组扁平化2.14 深/潜拷贝2.15 arr.map()、arr.reduce()、arr.forEach() 3.浏览器3.1 从输入 URL 到页面加载的全过程3.2 浏览器重绘与回流涉及性能优化3.3 “缓存”中文歧义3.3.1 storageapplication的storage3.3.2 http缓存network里看某个请求的Headers 3.4 网页性能优化3.5 跨域3.6 前端路由3.7 AJAXAsynchronous JavaScript And XML工作原理3.8 H5新特性记录新语义标签暂没记录 4. 工程化 / webpack基础概念4.1 webpack Core Concepts4.2 vue项目目录结构4.3 vue部署Nginx部署 5.软件开发模式项目管理/软件产品管理6.业务开发场景方案总结5.1 把一个word文档内容分不同章节展示在一个竖直大长页中包含多个echarts、多个接口请求。除上拉滑动查看外还可以大纲直接点击章节查看。如何实现并优化5.2 参考文献 力扣八股文 https://zhuanlan.zhihu.com/p/346468901 https://zhuanlan.zhihu.com/p/141134693 https://blog.csdn.net/sayUonly/article/details/117520021 https://blog.csdn.net/qq_28766729/article/details/102839161 https://zhuanlan.zhihu.com/p/413440875 https://zhuanlan.zhihu.com/p/91674680 https://www.zhihu.com/question/587456887?utm_id0 https://zhuanlan.zhihu.com/p/390394730 https://it.cha138.com/nginx/show-467347.html 1.HTML和CSS 其他前端相关内容见 CSS基础学习总结 HTML基础学习总结 js基础学习总结 Vue基础学习总结 1.1 语义化标签 H5新特性相对于全部div结构清晰利于搜索引擎优化 1.2 CSS 选择器及优先级 / position 定位 / box-sizing 属性 / transition / 继承属性如字体文字类的属性大部分有继承/ 行内元素和块级元素 / html的dom事件 !important 行内样式 ID 选择器「如#header」 类选择器「如.foo」 标签选择器「如h1」html dom 的 event 事件如onfocus和onchange等和elementui组件的事件名一样。 其他内容见CSS基础学习总结 1.3 BFC BFCBlock Formatting Contexts块级格式化上下文 是W3C CSS2.1规范中的一个概念。加了BFC特性的容器可以认为是独立渲染规则容器决定了子元素的布局和与其他元素的关系。即把 BFC 理解成一块独立的渲染区域BFC 看成是元素的一种属性。给block实现BFC属性有很多方式最常用的是overflow:hidden使用场景1.清除浮动让父元素的高度包含子浮动元素直接加clear:both也能清除浮动但不如BFC好即解决高度塌陷。2.去除margin重叠。3.避免某元素被浮动元素覆盖。 1.4 元素水平垂直居中 1.绝对定位子绝父相 div {// 父position: relative; } div {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); }2.绝对定位确定了当前 div 的宽度margin 值为当前 div 宽度一半的负值。 3.绝对定位绝对定位下 top left right bottom 都设置0 margin 设置为 auto 4.flex布局 display: flex; align-items: center; //项目在竖轴的对齐方式 justify-content: center; //主轴上的对齐方式5.table-cell 实现水平垂直居中table-cell middle center 组合使用 6.绝对定位calc() 函数动态计算实现水平垂直居中 1.4 隐藏页面中某个元素 opacity:0 继续占据空间内容不可见。如果该元素已经绑定事件点击也能触发点击事件。 visibility:hidden; 继续占据空间内容不可见 ;但是不会触发该元素已经绑定的事件 display:none ; 不占据任何空间v-show 1.5 页面布局方式 1.flex布局弹性布局 2.rem布局移动端 3.百分比布局用的少 4.浮动布局用的少 1.6 伪类、伪元素 伪类在dom树伪元素不在。 其他内容见CSS基础学习总结 1.7 css预处理器 CSS 预处理器是一种专门的编程语言用来为 CSS 增加一些编程特性CSS 本身不是编程语言。 不需要考虑浏览器兼容问题因为 CSS 预处理器最终编译和输出的仍是标准的 CSS 样式。可以在 CSS 预处理器中使用变量、简单逻辑判断、函数等基本编程技巧。关于 CSS 预处理器sass、less、stylus 1.8 href和src href表示超文本引用。用来建立当前元素和文档之间的链接。src 指向的内容会嵌入下载到文档中当前标签所在的位置(src 用于替换当前元素)。 1.9 img 的 title 和 alt 有什么区别 title: 鼠标滑动到元素上的时候显示 alt: 图片无法加载时显示 1.10 像素 物理像素physical pixel也称设备像素dpdevice pixel手机高清屏css像素逻辑像素logical pix也称设备独立像素设备像素比dpr 物理像素/css像素标清dpr1高清dpr1dpr2代表1x1个css像素可以用2x2的设备像素绘制缩放改变的是css像素的大小PPIpixels per inch每英寸的物理像素点 1.11 视口 pc端没有该概念移动端提出用视口本身可以进行缩放。document.documentElement.clientWidth拿到视口宽。不缩放的话默认拿到屏幕宽 1.12 移动端像素 在pc调移动端时由于浏览器内核限制可能导致某些像素无法显示但到移动端就好了 px/%常见。em元素的字体大小font size of the element。1em等于字体大小如设置font-size 12px则5em代表60px。缩进两字符时好用。rem移动端多用该单位可以做页面适配font size of the root element。root指html根元素。设置HTML根的font-size比如等于12px代表在标准375视口下想要的标准font-size为12px这个标准是人定的你可以选择750然后整个页面用rem单位的元素都会根据该font-size来变化此时如果该font-size的px用(视口宽度/标准案例视口宽度(如写死375))*标准想要的px像素(如12px)都会以标准案例视口宽度为准进行缩放。 window.onresize里执行计算代码vh/vw视口像素适配好用。 2.JS含ES6、TS 其他内容见 js基础学习总结 2.1 JS 中的 8 种数据类型及区别 NumberStringBooleanundefinedjs特有变量声明过但并未赋过值。你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺。null它是一个空对象指针可以用java理解。是表示程序级的、正常的或在意料之中的值的空缺SymbolES6 中新定义符号类型是唯一的并且不可修改。Symbol 指的是独一无二的值。存储关键数据或者服务器数据且可以唯一属性名。 let a Symbol(11);let b Symbol(11);console.log(ab); // falseconsole.log(ab); // falseconsole.log(a.description b.description); // true判空代码 // 普通判空 if (obj undefined || obj null || obj ) { } 等价于 if(!obj)// 对象判空 if(JSON.stringify(obj) {}) { }// 数组判空 if(JSON.stringify(obj) []) { }2.2 var / let(ES6) / const(ES6) var1.函数级作用域2.变量提升声明提升赋值不提升3.可重复声明且赋值4.全局作用域中声明的变量会被挂载到全局对象的window中let1.块级作用域2.没有变量提升所以必须先声明后使用3.同一作用域下不能重复声明4.全局作用域中使用let声明的变量不会挂载到window对象中const1.const声明常量必须赋初始值2.const声明的常量不能更改原始数据类型肯定不能改引用数据类型其实也不能改但这里不能改的是引用的地址地址里的值/属性能改3.其他和let一样隐式定义和显式定义隐式直接给变量赋值无关键字是全局的显式用关键字定义变量如上面那三。 2.3 JS异步问题处理 2.3.1.回调函数 一个函数A作为另一个函数B的参数那么函数A就被称为回调函数。回调函数A就是一个普普通通的函数它被其他函数B作为参数在B的内部调用那么在这个时候A才能被称为B的回调函数**。回调函数这个概念是相互的一个单独的函数是无法叫做回调函数的**它只能被称为XXX被谁在内部调用的回调函数。 ES6出现之前这种代码可以说是随处可见。它虽然解决了异步执行的问题可随之而来的是我们常听说的回调地狱问题没有顺序可言嵌套函数执行带来的是调试困难不利于维护与阅读耦合性太强一旦某一个嵌套层级有改动就会影响整个回调的执行 2.3.2.Promise ES6异步编程的一种解决方案比传统的方案回调函数和事件更加的合理和强大可以解决回调地狱问题。 对象的状态不受外界影响。Promise对象代表一个异步操作有三种状态pending进行中、resolved已成功和rejected已失败一旦状态改变就不会再变任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能从pending变为resolved和从pending变为rejectedpromise内部发生错误不会影响到外部程序的执行。promise的.then 案例1 let promise new Promise((resolve, reject) {// do somethingif (true) {// 将参数返回供then方法使用resolve(value);} else {// 将参数返回供then方法使用reject(error);} }); // Promise实例生成以后可以用then方法分别指定resolved状态和rejected状态的回调函数。 promise.then(value {// resolved时调用value为resolve函数返回的参数console.log(value);},err {// rejected时调用err为reject函数返回的参数console.log(err);} ); // 当then方法只有一个函数参数时此时为resolved状态的回调方法 promise.then(value {// 只有状态为resolved时才能调用如果返回的是rejected状态则报错 Uncaught (in promise) errorconsole.log(value);});案例2 // 从 买笔 - 写作业 - 交作业 三个异步状态都需要依赖上一步的结果才能执行 // 如果单纯在 ajax 异步回调里又做异步就会形成回调地狱看看 promise 是如何解决回调地狱的问题// 买笔 function buy(){console.log(开始买笔);return new Promise( (resolve,reject) {$.ajax({url: xxx.com,data: {name:krry},success: res {console.log(买了笔芯);resolve(res); // 成功},error: (err) {reject(err); // 失败}});}); }// 写作业 function work(data){console.log(开始写作业 data);return new Promise( (resolve,reject) {$.ajax({url: xxx.com,data: {name:krry},success: res {console.log(写完搞定);resolve(res); // 成功},error: (err) {reject(err); // 失败}});}); }// 交作业 function out(data){console.log(开始上交 data);return new Promise( (resolve,reject) {$.ajax({url: xxx.com,data: {name:krry},success: res {console.log(上交完成);resolve(res); // 成功},error: (err) {reject(err); // 失败}});}); }// 调用异步的时候如此简单优雅地解决了回调地狱的问题 // 调用每一个方法的时候自动将参数放进去了 // 这里调用的是成功的回调 buy().then(work).then(out).then( data {console.log(data); });// 上面的写法等同于这种写法还是没有上面的简洁推荐上面写法 buy().then(res work(res)).then(res out(res)).then( data {console.log(data); });// 考虑失败的回调 buy().then( work, err {console.log(买笔失败啦 err); }).then( out, err {console.log(作业太难写不了) }).then( data {console.log(data); });案例3体现promise异步顺便体现setTimeOut setTimeout(() {console.log(7) // 宏任务 }, 0) new Promise((resolve, reject) {console.log(3); // 主线程resolve();console.log(4); // 主线程 }).then(() {console.log(6) // 回调微任务 }) console.log(5) // 主线程// 执行结果34567Promise的catch和then…,err的优先级 2.3.3.async/awaitGenerator语法糖 1.async为异步标识标识在该函数内可以使用await 2.async返回的是promiseawait可以阻塞并解promise的result 2.4 this this考虑运行环境的上下文尤其是函数。当就是个普通函数在script里运行this是window。当在对象构造函数里运行this是该对象。vue中不用太考虑this为vue对象call,apply,bind三个方法改变函数执行时的上下文简而言之就是改变函数运行时的this指向 2.5 JS单线程 / 异步/ EventLoop 事件循环 / 微任务和宏任务 javascript是一门单线程语言单线程的特性与它的用途有关作为浏览器脚本语言JavaScript的主要用途是互动和操作DOM。为了利用多核CPU的计算能力HTML5提出Web Worker标准允许JavaScript脚本创建多个线程但是子线程完全受主线程控制且不得操作DOM故HTML5提出Web Worker标准后我理解JS的单线程应该叫DOM操作单线程。所以这个新标准并没有改变JavaScript单线程的本质。 Event Loop是javascript的执行机制图中主线程运行的时候产生堆和栈栈中的代码调用各种外部API异步操作执行完成后就在消息队列中排队。只要栈中的代码执行完毕主线程就会去读取消息队列依次执行那些异步任务所对应的回调函数。 同一次事件循环中微任务永远在宏任务之前执行。 宏任务macrotask: script整体代码, setTimeout, setInterval, setImmediate, I/O, UI rendering 微任务microtask: process.nextTick, Promise, MutationObserver 消息队列任务队列 其他线程执行完后会把回调扔到消息队列等待。例如定时器触发线程在计时结束后会把回调扔到消息队列。 消息队列有 浏览器 浏览器的架构是多进程的不同的浏览器采用不同的进程架构这个没有统一的标准,以谷歌浏览器为例他主要有四个进程分别是顶层的Browser process负责标签页网页呈现的Renderer Process负责控制网页插件的Plugin Process和负责处理GPU的GPU Process 2.6 防抖debounce节流throttle 1.防抖只执行最后一次。n 秒内函数只会执行一次若在 n 秒内被重复触发则重新计时。 常见场景下拉框模糊搜索、手机号/邮箱格式的输入验证检测、登录等按钮避免用户快速点击产生两笔交易两次请求… function debounce(fn, delayTime) {let timer null;return function() {if (timer ! null) { // 这个if不写也行null了相当于清了clearTimeout(timer) // 清除掉定时任务}let context thislet args argumentstimer setTimeout(() {fn.apply(context, args)timer null}, delayTime)} }2.节流。一次次间隔执行。n 秒内只运行一次若在 n 秒内重复触发只执行一次。 常见场景下拉框模糊搜索、监听滚动事件懒加载… // fn为回掉业务逻辑delayTime为延迟时间 function throttle(fn, delayTime) {let time null // 闭包产生的私有属性产生私有数据// let usedFlag 1 // usedFlag用来测试当前节流是否生效return function() { // fun() 套一个 return fun()闭包写法if(time ! null) { return } // n 秒内只运行一次// console.log(usedFlag, usedFlag)let context this // 获取上下文看似不体现作用let args arguments // 传参// fn.apply(context, args) // 写在外面运行是业务-[间隔]-业务// usedFlag usedFlag 1time setTimeout(() {fn.apply(context, args) // 写在里面运行是[间隔]-业务-[间隔]time null // 到时间清空定时器关键操作}, delayTime) // 延迟时间设置} }vue或uniapp框架中使用节流函数和直接js里使用有区别。当在vue或uniapp框架中使用节流函数时要用eventFunction(): throttle(function(){// 业务代码}, 100)不能用eventFunction() {throttle}这种。 2.7 闭包 闭包函数 和 函数体内可访问的变量总和把闭包看作是密闭容器。在一个函数内部创建另一个函数内层函数中访问到其外层函数的变量就会形成闭包。由于闭包是内层函数引用了外层函数的变量所以在调用完外层函数外层函数中的变量也不会被垃圾回收而内部函数在包含它们的外部函数之外被调用时外层函数的变量就不会被释放。不同fn的不同闭包调用会产生不同的私有变量。js存在大量事件驱动闭包可以保存/保护。然而会导致函数的变量一直保存在内存中过多的闭包可能会导致内存泄漏。 2.8 页面滚动监听上拉加载、懒加载 window.addEventListener(scroll, this.handleScroll) handleScroll: throttle(function () {// 全部有浏览器内核适配问题// 网页被卷起来的高度(即浏览器滚动条滚动后隐藏的页面内容高度)初始值是0它是一个变化的值document.documentElement.scrollTop// 视口高度document.documentElement.clientHeight// 页面不能滚动时是不存在的body长度超过window时才会出现所表示body所有元素的长度document.documentElement.scrollHeight// 某一dom元素的高度document.getElementById(idXXX).offsetTop// 触底公式if(scrollTop clientHeight scrollHeight) {// 触底} }, 1000)2.9 原型与原型链 JS的继承思想设计模仿java子类继承父类共有产生原型与原型链。 构造函数生成的所有实例对象都能够共享属性那么我们就给构造函数加一个属性叫做prototypejs给构造函数加的用来指向原型对象我们把所有实例对象共享的属性和方法都放在这个构造函数的prototype属性指向的原型对象中不需要共享的属性和方法放在构造函数中。每个对象对象即构造函数的实例化都会有一个内置属性叫做_proto_而且这个属性是系统自动生成的只要你创建一个对象这个对象就有这个属性。这个属性_proto_指向的是原型对象。小总结构造函数的prototype属性和它实例化的对象的_proto_均指向原型对象我认为是java中的父类所有的 JS 对象的都是继承了Object对象。Object构造函数的原型是本身所以把_proto_指向了null。最后原型链就是实例对象和原型对象之间的链接。 其他见js基础学习总结 2.10 箭头函数 / for of for in / 数组操作等其他js常用语法省略 普通函数中的 this 是动态的。而箭头函数中的 this 指向的是包裹箭头函数的那个对象并且不改变。箭头函数没thisfor of 数组js中用for in list出来的不是数组中的每个数for in 对象 2.11 typescript 比js更像java包括class、注解符号、private等等 2.12 console console.log()可以直接正常打印基本类型console.log()打印对象会出现不符合预期的问题如果console.log()输出一个对象或数组那么它实际上输出的是该对象或数组的引用。当引用中的值改变了在控制台也会随即改变console.log显示就会有出入。 解决方案确保始终记录对象的序列化快照 字符串显示(JSON.stringify)如console.log(JSON.stringify(d)); 2.13 数组扁平化 1.递归 2.ES6 的 flat 方法 3.JSON.stringify()转成字符串用正则替换掉括号再用JSON.parse()转回数据 2.14 深/潜拷贝 堆栈和java一样 深拷贝JSON.parse(JSON.stringify()) 2.15 arr.map()、arr.reduce()、arr.forEach() arr.map()返回的是数组给数组做处理 arr.reduce()返回的是一个数累加 arr.forEach()遍历数组所以想做操作得外面建个变量接它 3.浏览器 3.1 从输入 URL 到页面加载的全过程 细节见计算机网络基础复习总结、2022秋招面经总结补充前面文章中不含的内容计算机网络部分 DNS解析得到IP地址网络层IP 建立TCP连接传输层三次握手 发送HTTP请求应用层协议传输层的协议TCP或UDP加上端口就可以标识一个应用层协议常见POST/GET涉及HTTP缓存 HTTP报文是包裹在TCP报文中发送的服务器端收到TCP报文时会解包提取出HTTP报文。体现请求响应7层模型从顶到底加协议再从底到顶解封。 服务器处理请求然后返回HTTP报文。 请求行、请求头、请求报文 http请求报文 状态码、响应头、响应报文 http响应报文 浏览器接收到响应后显示渲染页面 HTML是一种超文本标记性语言HTML在经过浏览器编译以后在内存是以一种树形结构存在着这个树也被称为DOM树document object model。将HTML或XML文档转化为DOM树的过程称为解析(parse)。DOM树叫文档对象模型。 客户端和服务器通过四次挥手终止 TCP 连接。 3.2 浏览器重绘与回流涉及性能优化 Reflow当 DOM 的变化影响了元素的几何信息浏览器需要重新计算元素的几何属性将其安放在界面中的正确位置。表现为重新生成布局重新排列元素。 Repaint 当一个元素的外观发生改变但没有改变布局重新把元素外观绘制出来的过程。表现为某些元素的外观被改变。 3.3 “缓存”中文歧义 3.3.1 storageapplication的storage cookie保存信息在客户端场景登录token。服务器发送到用户浏览器并保存在本地的一小块数据浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。cookie 的同源策略cookie同源策略。ajax 需要完全同源而 cookie 只需要同一父级域名。session保存信息在服务端场景登录信息。session 是基于 cookie 的一种方案sessionID存在cookie里。session 是基于cookie实现的一种数据存储方式。localStorageHTML5提供的一个API实质是一个hash。场景免登录不会因为刷新而释放可以使用localStorage来实现变量的持久化存储。localStorage 理论上永久有效除非用户清理缓存。只有相同域名的页面才能互相读取 localStorage同源策略与 cookie 一致。浏览器关闭后数据不丢失除非主动删除数据sessionStorage所有性质基本上与 localStorage 一致有效期是页面会话持续如果页面会话session结束关闭页面sessionStorage 就会消失。而 localStorage 则会一直存在。 3.3.2 http缓存network里看某个请求的Headers 谷歌浏览器开发者工具的network的Disable cache勾选时会禁用浏览器缓存。这里的缓存是指http缓存而不是cookie、storage。浏览器每次发起请求都会先在浏览器缓存中查找该请求的结果以及缓存标识。 强缓存场景大量静态资源的网页在缓存查找该请求结果决定是否使用该缓存结果。 不存在该缓存结果和缓存标识强制缓存失效则直接向服务器发起请求跟第一次发起请求一致存在该缓存结果和缓存标识但该结果已失效强制缓存失效则使用协商缓存存在该缓存结果和缓存标识且该结果尚未失效强制缓存生效直接返回该结果。 Cache-Control 和 ExpiresHTTP/1。network里找请求看当浏览器对某个资源的请求命中了强缓存时返回的http状态为200在chrome的开发者工具的network里面size会显示为from cache 协商缓存强制缓存失效后浏览器携带缓存标识向服务器发起请求由服务器根据缓存标识决定是否使用缓存。 协商缓存生效返回 304协商缓存失效返回 200 和请求结果结果 Last-ModifiedIf-Modified-Since。ETag、If-None-Match。 3.4 网页性能优化 静态资源下载、接口请求等看瀑布 纯js代码逻辑可以console.time(‘flag’)与console.timeEnd(‘flag’)这两个方法均使用一个参数参数值可以为任何字符串但是这两个方法所使用的参数字符串必须相同才能正确地统计出开始时间与结束时间之间所经过的毫秒数。 1.懒加载异步组件 见5.1节2.分包策略webpack 除了上述1外上述1属于分包策略optimization.splitChunk等webpack配置也可以做自己的分包策略。3.节流、防抖 见2.6节、5.1节4.gzip压缩 项目打包上线若build后的包体积大会导致首屏加载速度慢。Gzip就是能非常明显有效的解决这个问题。它的原理是把原js、css文件进行压缩从而减小文件体积加快首屏访问速度。 步骤 1.npm i 安装依赖。 2.在vue.config.js或config/index.jsbuild/webpack.prod.conf.js写配置代码。 3.nginx服务端配置http里面加也可以在某个server里加。 4.浏览器支持一般浏览器都已支持.gz的资源文件在http请求的Request Headers中能看到 Accept-Encoding:gzip5.使用字体图标 iconfont 代替图片图标总之就是减少静态资源大小 icon网站https://www.iconfont.cn/?spma313x.collections_index.i3.2.6ca33a81tsnd676.预加载离线包7.webworker Web Worker 是一项 HTML5 新特性可以在 Web 页面中创建后台线程从而可以让 JavaScript 在主线程运行的同时在后台线程中执行耗时的操作。这使得 Web 应用程序可以更加流畅而不会出现 UI 卡顿或其他性能问题。Web Worker 是一种浏览器提供的 JavaScript API。 解决纯js计算数据逻辑不阻塞页面渲染/交互使js拥有多线程能力 3.5 跨域 3.6 前端路由 单页面应用single page web applicationSPA就是只有一张Web页面的应用是加载单个HTML 页面如vue打包后dist里只有一个index.html并在用户与应用程序交互时动态更新该页面的Web应用程序。 构建 SPA需要引入前端路由系统如vue中的Vue-Router。前端路由的核心在于改变视图的同时不会向后端发出请求。 hash模式路由vue-router 默认使用 hash 模式 通过监听浏览器 window.onhashchange 事件变化查找对应路由应用。通过改变 location.hash 改变页面路由。特点是地址栏URL中的#符号http://www.baidu.com/#/test hash的值为#/test。hash后边变不发服务器。改成#/78hjhhjhkhuu即没有做到对路由的全覆盖 也不会返回 404 错误。监听 url 中 hash 的变化然后渲染不同的内容这种路由不向服务器发送请求不需要服务端的支持 history模式路由 H5新特性history Interface 中新增的 pushState() 和 replaceState() 方法改变页面路径。特点是history模式没有#号是个正常的url符合url规范。所以分享到第三方的页面需要用该模式history模式下前端的 URL 必须和实际向后端发起请求的URL一致 如http://www.baidu.com/test/78hjhhjhkhuu。如果后端缺少对/test/78hjhhjhkhuu的路由处理将返回 404 错误。还有种情况你点击到某一层一点刷新history下是真实请求但服务器没这个资源会404。即浏览器直接访问嵌套路由时会报 404 问题Nginx配置当请求的URL匹配不到任何静态文件或目录时将请求重定向到index.html文件可解决该问题监听 url 中的路径变化需要客户端和服务端共同的支持 3.7 AJAXAsynchronous JavaScript And XML工作原理 AJAX不是编程语言而是一门提供网页局部刷新的技术。AJAX最大的优点是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。XML是一种古老的数据交互格式目前多数情况下会使用JSON数据格式替换XML数据格式所以AJAX可以看做是异步JavaScript和JSON形式。 js中var xhr new XMLHttpRequest(); 作者LeetCode 链接https://leetcode.cn/leetbook/read/2023-ming-qi-qian-duan-mian-shi-kao-dian/wb1ig7/ 来源力扣LeetCode 著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。 3.8 H5新特性记录新语义标签暂没记录 canvas和SVGcanvas和SVG都是HTML5中的图形渲染技术用于在网页中呈现动态或静态图形。canvas是基于位图的绘图技术而SVG是基于矢量图形的绘图技术。canvas可以用纯js画图但放大缩小会失真SVG放大缩小不失真。地理定位1.HTML5 Geolocation API需授权navigator.geolocation.getCurrentPosition(success, error, options)。2.接入第三方位置服务平台——百度地图、高德地图、腾讯地图需注册开发者账号websocketWebSocket 可以在浏览器里使用支持双向通信全双工通讯的网络技术服务端可以推数据给客户端。引入wswebworkerWeb Worker 是一项 HTML5 新特性可以在 Web 页面中创建后台线程从而可以让 JavaScript 在主线程运行的同时在后台线程中执行耗时的操作。这使得 Web 应用程序可以更加流畅而不会出现 UI 卡顿或其他性能问题。 4. 工程化 / webpack基础概念 4.1 webpack Core Concepts webpack网站 At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from. EntryAn entry point indicates which module webpack should use to begin building out its internal dependency graph. 入口以哪个文件作为入口起点分析构建内部依赖图并进行打包OutputThe output property tells webpack where to emit the bundles it creates and how to name these files. 打包后的资源bundles输出到哪里去以及如何命名如默认dist文件夹LoaderOut of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph. 处理非JavaScript语言的文件PluginsWhile loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables. 执行范围更广的任务插件的范围包括从打包和压缩等。modeBy setting the mode parameter to either development, production or none, you can enable webpack’s built-in optimizations that correspond to each environment. The default value is production. 相应模式的配置。development和production。打包不一样。Browser CompatibilityWebpack supports all browsers that are ES5-compliant (IE8 and below are not supported). IE8及以下不支持 4.2 vue项目目录结构 参考 https://www.cnblogs.com/jacksplwxy/p/11495700.html 4.3 vue部署Nginx部署 在项目开发完成后我们需要将该项目部署到服务器上并且需要设置Nginx等web服务器来处理前端请求。Nginx 是一个轻量级、高性能的HTTP和反向代理web服务器。其主要关心的是 HTTP 协议层面的传输和访问控制监听相应的地址和端口对客户端的HTTP资源请求进行响应、转发或处理但是一个 HTTP Server 能做的始终只是把服务器上的静态资源如实的通过 HTTP 协议传输给客户端。后端关注Nginx的反向代理和负载均衡功能前端关注Nginx的web服务器本质对HTTP资源请求进行响应、转发或处理Nginx动静分离之前只听说过反向代理、负载均衡动静分离和这俩功能结合起来了web服务器架构。静态资源请求本地Nginx物理机动态服务请求通过反向代理转发给其他后台服务器。 Vue应用程序中可能包含一些动态路由Vue-Router和接口请求ajax、axios等功能。这时我们需要在Nginx中进行配置以解决这些请求。一般而言我们会将接口请求转发到服务端进行处理Nginx location配置同时将动态路由交给前端进行处理Nginx location、try_files配置 参考更详细https://blog.csdn.net/qq_40772692/article/details/124988974 5.软件开发模式项目管理/软件产品管理 瀑布模型布模型将软件生命周期划分为制定计划、需求分析、软件设计、程序编写、软件测试和运行维护等六个基本活动并且规定了它们自上而下、相互衔接的固定次序如同瀑布流水逐级下落。软件开发的各项活动严格按照线性方式进行。现敏捷软件开发敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中软件项目的构建被切分成多个子项目各个子项目的成果都经过测试具备集成和可运行的特征。曾其他模式不赘述 6.业务开发场景方案总结 前端一定要懂后端基础某些业务逻辑落在哪一端做才可以讨论清楚 5.1 把一个word文档内容分不同章节展示在一个竖直大长页中包含多个echarts、多个接口请求。除上拉滑动查看外还可以大纲直接点击章节查看。如何实现并优化 解决方案章节锚点定位 上拉滚动监听优化按需渲染压力、按需发送请求压力 节流优化滚动监听频率 异步组件懒加载优化按需渲染压力、按需发送请求压力 章节锚点flag数组避免重复发送请求 echarts / g2plot 画图1.id重复画图问题。2.g2plot更新数据要调用更新数据的方法echarts更新数据要重置配置里的data。3.实时更新数据用watch就行。 数据制作成展示结构.map方法数组筛选出数组、三个点…拆装箱、固定自定义数据结构页面多个模块显示内容是调用不同接口得到数据且包含列表、echarts、直接显示等多种展示方式给每个某块设计一个独立的vue data属性即独立的数据结构对象。注意let temp { a:[] }初始化列表。直接属性temp.b 3可以列表temp.a.push()必须初始化了a才行。 webworker该需求js数据计算的量级不大单次处理不到100条数据所以没用webworker 5.2 后续将持续更新…