长沙网站推广公司排名,如何做泰国网站,网站框架设计,商务网站建设教学视频目录 一、数据结构算法等综合篇
1.HTTP/2、ETag有关
二、代码输出篇
1.new URL#xff0c;url中的hostname#xff0c;pathname#xff0c;href
扩展说一下url的组成部分和属性
URL的组成部分
urlInfo 对象的属性 2.一个递归的输出例子 3.数组去重的不普通方法1
4.数…目录 一、数据结构算法等综合篇
1.HTTP/2、ETag有关
二、代码输出篇
1.new URLurl中的hostnamepathnamehref
扩展说一下url的组成部分和属性
URL的组成部分
urlInfo 对象的属性 2.一个递归的输出例子 3.数组去重的不普通方法1
4.数组去重的不普通方法2
5.对象引用函数参数传递对象属性修改
扩展说下
三、css、htmlJavaScript篇
1.在自定义组件上实现类似原生表单元素的v-model功能使用
2.项目在主轴上的对齐方式
3.JavaScript可能出现内存泄漏的情况有哪些
可能存在内存泄漏的情况详细版
4.position中绝对定位是相对于最近的定位父级来定位
扩展css中position的值有哪些分别的定位原点 一、数据结构算法等综合篇
1.HTTP/2、ETag有关
HTTP/2的多路复用允许多个请求和响应通过单个TCP连接同时进行HTTP/2通过头部压缩减少了每次请求和响应中头部的冗余数据Etag头部用于缓存验证帮助判断资源是否发生变化使用cache-control:max-age可以指定资源的最大缓存时间
在HTTP/1.1中每个请求通常都需要一个单独的TCP连接这会导致多个问题。首先TCP连接的建立和关闭都需要时间这会增加网络延迟和资源消耗。其次HTTP/1.1需要按照顺序处理请求如果前面的请求比较慢后面的请求就会被阻塞这会导致队头阻塞问题。最后每个请求都需要携带完整的HTTP头部信息这会占用大量的网络带宽。
而在HTTP/2中多路复用技术解决了这些问题。它允许多个请求和响应在同一个TCP连接上并行处理每个请求都有一个唯一的ID这使得多个请求可以同时进行而不必等待前一个请求完成。这种方式减少了连接建立和关闭的开销提高了网络性能降低了延迟并节省了网络带宽。
此外HTTP/2还引入了头部压缩技术通过压缩HTTP头部信息来进一步减少传输的数据量。这些改进使得HTTP/2在现代Web应用中具有更好的性能和用户体验。 ETagEntity Tag是HTTP协议中用于标识资源状态的一种机制主要用于缓存管理和资源更新判断。当浏览器请求服务器资源时服务器会返回该资源的ETag值。在后续的请求中如果客户端想要验证该资源是否发生变化它会将之前收到的ETag值通过If-None-Match请求头发送给服务器。服务器会检查当前资源的ETag值是否与客户端发送的值相匹配。如果匹配说明资源自上次请求后未发生变化服务器会返回304 Not Modified状态码客户端可以继续使用缓存中的资源。如果不匹配说明资源已经发生变化服务器会返回新的资源内容和新的ETag值。
通过这种方式ETag头部有效地减少了不必要的网络传输提高了页面加载速度并确保了客户端能够获取到最新的资源。 cache-control是HTTP协议中用于控制资源缓存行为的头部字段而max-age则是cache-control头部字段中的一个指令用于指定资源在客户端缓存中的最大有效时间单位是秒。当客户端接收到服务器返回的包含cache-control: max-ageN的响应头部时它会将资源缓存起来并在接下来的N秒内直接使用缓存中的资源而不是向服务器发送新的请求。
这种机制有助于减少不必要的网络请求提高页面加载速度并减轻服务器的负担。
二、代码输出篇
1.new URLurl中的hostnamepathnamehref const urlInfonew URL(https://reolink.com/product/argus/?id123#comments);console.log(urlInfo.hostname)console.log(urlInfo.pathname)console.log(urlInfo.href);
输出为 urlInfo.hostname 这个属性返回URL的主机名部分即域名。输出reolink.comurlInfo.pathname 这个属性返回URL的路径部分即/后面的部分但不包括查询字符串和片段标识符hash。输出/product/argus/urlInfo.href 这个属性返回整个URL的字符串表示包括协议、主机名、路径、查询字符串和片段标识符。输出https://reolink.com/product/argus/?id123#comments
扩展说一下url的组成部分和属性
这个URL https://reolink.com/product/argus/?id123#comments 是一个指向特定网页地址的字符串它包含了多个部分这些部分可以被解析和访问通过JavaScript中的 URL 对象。基于提供的URL创建的 URL 实例可能拥有的一些属性。
URL的组成部分 协议 (protocol): https:// - 这指明了用于访问资源的协议类型这里是HTTPS超文本传输安全协议。 主机名 (hostname): reolink.com - 这是服务器的域名或IP地址。 路径 (pathname): /product/argus/ - 这指定了服务器上资源的具体位置。 搜索参数 (search): ?id123 - 这部分包含了用于查询的键值对这里的键是 id值是 123。 哈希 (hash): #comments - 这部分通常用于指示网页内的某个位置或用于客户端处理如显示特定的内容部分。
urlInfo 对象的属性
当你使用 const urlInfo new URL(https://reolink.com/product/argus/?id123#comments); 创建一个 URL 对象时urlInfo 将拥有以下属性以及其他一些可能不直接相关的属性 href: https://reolink.com/product/argus/?id123#comments - 完整的URL字符串。 protocol: https: - 协议部分注意不包括 //。 host: reolink.com - 主机名部分不包括端口号如果有的话。 hostname: reolink.com - 同上只是更明确地指出这是主机名。 port: - 端口号如果URL中没有指定则为空字符串。 pathname: /product/argus/ - 路径部分。 search: ?id123 - 查询字符串部分包括前面的 ?。 searchParams: URLSearchParams 对象 - 一个包含了所有查询参数的对象允许你以更便捷的方式访问和操作这些参数例如urlInfo.searchParams.get(id) 会返回 123。 hash: #comments - 哈希部分包括前面的 #。 origin: https://reolink.com - URL的起源即协议、主机名和端口如果指定了。
这些属性提供了对URL不同部分的访问使得解析、修改和使用URL变得更加容易和直观。 2.一个递归的输出例子 function calc(a){return a2?calc(a-1)a:a;}console.log(calc(5))
输出结果为15 函数定义function calc(a) { ... } 定义了一个名为 calc 的函数它有一个参数 a。 递归条件函数体内使用了三元运算符 ? : 来决定函数的返回值。这个运算符根据条件 a 2 的真假来选择两个值中的一个。 如果 a 2 为真即 a 大于或等于 2则函数返回 calc(a-1) a。这里发生了递归调用函数 calc 被再次调用但这次是用 a-1 作为参数。递归调用的结果加上当前的 a 值构成了这个递归步骤的返回值。 如果 a 2 为假即 a 小于 2则函数直接返回 a。这是递归的基本情况它停止了递归调用。 递归终止当 a 减到 1 时a 2 的条件为假函数返回 1。因为没有更多的递归调用发生因为已经达到了基本情况所以递归终止。
现在让我们计算 calc(5) 的结果 calc(5)因为 5 2所以返回 calc(4) 5。 calc(4)因为 4 2所以返回 calc(3) 4。 calc(3)因为 3 2所以返回 calc(2) 3。 calc(2)因为 2 2所以返回 calc(1) 2。 calc(1)因为 1 2所以直接返回 1这是递归的基本情况。
现在我们将这些值加起来以逆序的方式因为递归是从内向外计算的 calc(1) 返回 1 calc(2) 返回 1 2 3 calc(3) 返回 3 3 6 calc(4) 返回 6 4 10 calc(5) 返回 10 5 15 3.数组去重的不普通方法1 console.log([1,2,2,4,4,5,5,6].reduce((p,q)p.includes(q)?p:[...p,q],[]))
输出结果为[1,2,4,5,6]
上面的代码使用了JavaScript数组的reduce方法来对一个数组进行遍历和归约或聚合目的是去除数组中的重复元素。这里reduce方法接收一个回调函数和一个初始值空数组[]作为参数。
回调函数接收四个参数但在这种情况下只用到了前两个 p累加器上一次调用回调函数时返回的数组或初始值。 q当前值数组中当前正在处理的元素。
回调函数逻辑 p.includes(q)检查累加器数组p是否包含当前元素q。 如果p包含q即p.includes(q)为true则回调函数返回p不变这样q就不会被添加到结果数组中。 如果p不包含q即p.includes(q)为false则使用扩展运算符...将p的所有元素复制到一个新数组中并将q添加到这个新数组的末尾。然后这个新数组被返回作为下一次迭代的累加器值。
初始值
初始值是一个空数组[]它作为第一次迭代时的累加器值。
代码执行流程 初始累加器值[] 处理第一个元素1[]不包含1所以返回[1]。 处理第二个元素2[1]不包含2所以返回[1, 2]。 处理第三个元素2[1, 2]包含2所以返回[1, 2]不变。 处理第四个元素4[1, 2]不包含4所以返回[1, 2, 4]。 处理第五个元素4[1, 2, 4]包含4所以返回[1, 2, 4]不变。 处理第六个元素5[1, 2, 4]不包含5所以返回[1, 2, 4, 5]。 处理第七个元素5[1, 2, 4, 5]包含5所以返回[1, 2, 4, 5]不变。 处理第八个元素6[1, 2, 4, 5]不包含6所以返回[1, 2, 4, 5, 6]。
最终输出
最终reduce方法返回的是去除重复元素后的数组[1, 2, 4, 5, 6]这个值被console.log输出到控制台。 4.数组去重的不普通方法2
console.log(Object.values([1,2,2,4,4,5,5,6].reduce((p,q)(p[q]q,p),{})))
输出结果也是[1,2,4,5,6]
使用了JavaScript数组的reduce方法来处理一个数组并结合Object.values方法来获取最终结果的数组形式。这里reduce方法被用来构建一个对象该对象的键是数组中的元素去重后值也是这些元素本身。然后Object.values方法被用来从这个对象中提取出所有的值形成一个新的数组。
回调函数接收四个参数但在这个例子中只使用了前两个 p累加器上一次调用回调函数时返回的对象或初始值一个空对象{}。 q当前值数组中当前正在处理的元素。
回调函数逻辑 p[q] q在累加器对象p上设置一个属性其键和值都是当前元素q。如果q已经是一个存在的键则这个操作会覆盖之前的值但在这个例子中由于我们关心的是键的唯一性所以值被设置为相同的q并不会影响结果。 返回p无论是否设置了新属性都返回累加器对象p作为下一次迭代的累加器值。
初始值
初始值是一个空对象{}它作为第一次迭代时的累加器值。
代码执行流程 初始累加器值{} 处理第一个元素1在对象上设置属性{1: 1}返回这个对象。 处理第二个元素2在对象上设置属性{1: 1, 2: 2}返回这个对象。 处理第三个元素2对象已经有一个2的键所以只是更新值为2实际上没有改变返回对象{1: 1, 2: 2}。 处理第四个元素4在对象上设置属性{1: 1, 2: 2, 4: 4}返回这个对象。 处理第五个元素4对象已经有一个4的键所以只是更新值为4实际上没有改变返回对象{1: 1, 2: 2, 4: 4}。 处理第六个元素5在对象上设置属性{1: 1, 2: 2, 4: 4, 5: 5}返回这个对象。 处理第七个元素5对象已经有一个5的键所以只是更新值为5实际上没有改变返回对象{1: 1, 2: 2, 4: 4, 5: 5}。 处理第八个元素6在对象上设置属性{1: 1, 2: 2, 4: 4, 5: 5, 6: 6}返回这个对象。 5.对象引用函数参数传递对象属性修改 let objA{name: A}let objB{name: B}function main(oa,ob){oa{};ob.nameC}main(objA,objB);console.log(objA.name,objB.name);
输出结果为A C
oa {}; // 这里重新赋值了oa让它引用了一个新的空对象。这个修改不会影响到objA。
ob.name C; // 这里修改了ob引用的对象的name属性。由于ob和objB引用的是同一个对象所以这个修改会影响到objB。
在调用 main(objA, objB) 时oa 和 objA 引用同一个对象 {name: A}ob 和 objB 引用同一个对象 {name: B}。在 main 函数内部oa {} 重新赋值了 oa让它引用了一个新的空对象。这个修改不会影响到 objA因为 objA 仍然引用着原来的对象 {name: A}。另一方面ob.name C 修改了 ob 引用的对象的 name 属性。由于 ob 和 objB 引用的是同一个对象因此 objB.name 也被修改为 C。最后console.log(objA.name, objB.name) 输出 A C
扩展说下
对象引用 在JavaScript中对象是通过引用来传递的。当你将一个对象赋值给另一个变量时你实际上是在复制对该对象的引用而不是对象本身。例如let objA {name: A} 创建了一个对象并且 objA 是对这个对象的引用。函数参数传递 当你将对象作为参数传递给函数时你实际上是在传递对象的引用。在函数内部你可以修改这个引用所指向的对象的内容即对象的属性但这种修改会影响到函数外部的对象因为它们引用的是同一个对象。然而如果你尝试在函数内部重新赋值给这个参数即让它引用一个新的对象那么这个修改不会影响到函数外部的对象。对象属性的修改 你可以通过点.或方括号[]语法来访问和修改对象的属性。修改对象的属性会影响到所有引用该对象的变量。 三、css、htmlJavaScript篇
1.在自定义组件上实现类似原生表单元素的v-model功能使用
用value和input
接收一个 value 属性。在值改变时触发一个 input 事件。
首先创建一个自定义组件比如 MyInput.vue
templateinput:valuevalueinput$emit(input, $event.target.value):placeholderplaceholder/
/templatescript
export default {name: MyInput,props: {value: {type: String,default: },placeholder: {type: String,default: }}
}
/script
在这个组件中
:valuevalue绑定 value 属性到输入元素的值。input$emit(input, $event.target.value)监听 input 事件并在事件发生时通过 $emit 触发一个名为 input 的自定义事件传递新的值。
在你的父组件中使用这个自定义组件并使用 v-model 绑定数据
templatedivh1自定义输入组件示例/h1MyInput v-modelmessage placeholder请输入一些文字 /p你输入的是: {{ message }}/p/div
/templatescript
import MyInput from ./MyInput.vue;export default {name: App,components: {MyInput},data() {return {message: };}
}
/script
在这个父组件中
v-modelmessage使用 v-model 将 message 变量绑定到 MyInput 组件。p你输入的是: {{ message }}/p显示 message 变量的值以验证双向数据绑定是否工作。
注意事项
命名确保你触发的自定义事件名称为 input因为 v-model 默认监听这个事件。类型匹配确保 value 属性和 input 事件传递的值类型一致。在上面的例子中value 和 input 事件的值都是字符串类型。默认值和可选属性为 props 提供默认值并在需要时添加其他可选属性如 placeholder。 2.项目在主轴上的对齐方式
justify-content 在交叉轴是align-items 3.JavaScript可能出现内存泄漏的情况有哪些
DOM 清空时还存在引用定时器未清除全局变量未清理闭包使用不当事件监听器未解绑循环引用缓存未清理第三方库或框架存在内存泄漏
注意箭头函数本身不会导致内存泄漏
可能存在内存泄漏的情况详细版 全局变量未清理 如果在全局作用域中创建了过多的变量且未及时释放它们会一直占用内存导致内存泄漏。全局变量会一直存在于内存中直到页面关闭或手动释放。过多创建并保留全局变量尤其是大型的数据结构或对象容易引发内存泄漏问题。 闭包使用不当 闭包可以让函数访问其定义时的作用域。但如果闭包中引用了一些较大的对象或数据结构且这些对象或数据结构在闭包不再被需要时没有被及时清理也可能导致内存泄漏。 DOM 元素未正确删除 在使用 JavaScript 操作 DOM 元素时必须确保在不需要它们时正确删除它们。如果保留了对不再需要的 DOM 元素的引用那么这些元素及其相关的 JavaScript 对象将无法被垃圾回收器清理从而导致内存泄漏。 事件监听器未解绑 如果注册了事件监听器却没有在合适的时候移除它们那么即使相关的 DOM 元素已经被删除事件监听器仍然会保留对它们的引用导致内存无法被回收。 定时器或回调函数未清除 使用 setInterval 或 setTimeout 创建的定时器如果在不再需要时没有及时清除它们会持续占用内存。即使定时器的回调函数已经执行完毕定时器本身仍然可能存在于内存中。 循环引用 当两个或多个对象之间存在相互引用并且这些对象没有其他外部引用可以打破这种循环时它们将无法被垃圾回收机制正确处理从而占用内存。 第三方库或框架存在内存泄漏 如果使用了存在内存泄漏问题的第三方库或框架就可能导致整个应用程序出现内存泄漏问题。因此在选择和使用第三方库或框架时需要谨慎评估其内存管理性能。 缓存未清理 缓存可以提高性能但如果使用不当也会带来内存管理的问题。过度使用缓存且未及时清理过期或不再需要的缓存数据也可能导致内存泄漏。 4.position中绝对定位是相对于最近的定位父级来定位
扩展css中position的值有哪些分别的定位原点
static:元素默认值按正常的文档流进行定位从上到下从左到右没有特定的原点
relative相对定位。元素相对于其正常位置进行定位相对于原本位置进行偏移定位原点即元素原本在文档流中的位置
absolute绝对定位。元素相对于最近的已定位祖先即设置了position属性为absolute,relative,fixed,sticky的元素进行定位。定位原点是最近的已定位祖先元素的左上角相对于初始包含块的左上角
fixed固定定位。元素相对于浏览器窗口进行定位即使页面滚动也会始终位于同一位置。定位原点为浏览器窗口的左上角
sticky粘性定位。根据正常文档流进行定位然后相对于用户的滚动位置在视口内粘性定位会黏在父元素身上直到某个阈值被跨越。定位原点是元素原本在文档流中的位置滚动到某个阈值后相对于视口进行定位。 加油加油^_^
