前端面试练习24.3.16

作者：盐析白兔 | 2024-03-17 11:18:52

踩

前端面试练习24.3.16

为什么要在样式初始化的时候设置{margin，padding}为0

在样式初始化时设置 {margin, padding} 为0，是为了确保网页在不同浏览器和设备上的显示效果更加统一，并且减少浏览器默认样式对页面布局的影响。这样做的主要原因包括：

消除浏览器默认样式的影响：不同的浏览器对于 HTML 元素的默认样式可能存在差异，如 <body>、<ul>、<li> 等元素在不同浏览器上的默认 margin 和 padding 可能不同。为了确保页面在不同浏览器上的显示效果一致，通常会将这些默认样式重置为0。

更精准的布局控制：通过将 margin 和 padding 设置为0，可以更精确地控制页面元素的布局，避免因为浏览器默认样式的影响导致布局偏差。这对于实现复杂的页面布局和样式设计至关重要。

避免外边距合并：外边距合并是指相邻元素的外边距会合并为一个外边距的现象。通过将 margin 设置为0，可以避免外边距合并带来的意外效果。

当然，在实际项目中，并不是一定要将所有的 margin 和 padding 设置为0，有时候会根据设计需求留出一定的间距。但是初始化时将它们设置为0是一个良好的习惯，可以提高开发效率和页面一致性。

1px如何设成0.5px(通过缩放)

在 Web 开发中，无法直接将元素的边框或宽度设置为 0.5px，因为大多数浏览器无法渲染这样的像素级别。然而，你可以通过 CSS 的缩放（scale）属性来实现类似的效果，但这并不是一个通用的解决方案，因为缩放会导致元素及其内容整体缩小。

以下是一个使用缩放来实现边框宽度为 0.5px 的示例：
.element {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transform: scaleY(0.5);
}
在这个示例中，我们定义了一个 .element 类，设置了宽度和高度为 100px，边框为 1px 实线黑色。然后，通过 transform: scaleY(0.5) 将元素在垂直方向上缩放为原来的一半，从而使边框看起来像是 0.5px。

需要注意的是，这种方法并不是真正的将边框宽度设置为 0.5px，而是通过缩放元素来模拟这种效果。此外，这种方法可能会影响到元素内部内容的布局和渲染，因此需要谨慎使用。

margin合并如何解决

在 CSS 中，相邻的两个块级元素的上下外边距可能会发生合并（margin collapse）的现象。合并的规则如下：

当相邻的上下外边距都是正数时，取两者中较大的值作为最终的外边距。
当相邻的上下外边距都是负数时，取两者绝对值中较大的值作为最终的外边距。
当相邻的上下外边距一个是正数一个是负数时，取两者相加的值作为最终的外边距。
当外边距发生合并时，会将合并后的外边距应用于两个相邻的块级元素之间。

在实际开发中，可以采用以下方法来解决 margin 合并的问题：

使用边界值：当相邻元素的上下外边距之间有固定的间隙时，可以通过在其中一个元素上应用 border、padding、或 height 来阻止外边距合并。
.element {
  border-top: 1px solid transparent; /* 添加一个透明的边框 */
}
使用内联块级元素：将相邻的块级元素改为内联块级元素，因为内联块级元素之间不会发生外边距合并的情况。
<div class="element"></div><div class="element"></div>
.element {
  display: inline-block; /* 将块级元素改为内联块级元素 */
}
使用 overflow: hidden：将父元素设置为 overflow: hidden 可以阻止其子元素的外边距合并。
.parent {
  overflow: hidden;
}
使用 padding：为父元素添加 padding 可以防止子元素的外边距合并。
.parent {
  padding: 1px 0; /* 添加上下 padding */
}

vue的指令

v-bind：用于动态地绑定 HTML 属性。
<a v-bind:href="url">Link</a>
v-model：用于在表单元素上创建双向数据绑定。
<input v-model="message">
v-if：根据表达式的值来条件性地渲染元素。
<h1 v-if="seen">Now you see me</h1>
v-for：基于源数据多次渲染元素或模板块。
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
v-on：用于绑定事件监听器。
<button v-on:click="doSomething">Click me</button>
v-show：根据表达式的值来条件性地显示元素。
<h1 v-show="seen">Now you see me</h1>
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
<span v-pre>{{ this will not be compiled }}</span>
v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div v-cloak>
  {{ message }}
</div>
v-text：更新元素的 textContent。如果要更新部分的 textContent，请使用 {{ Mustache }} 插值。
<span v-text="message"></span>
v-html：更新元素的 innerHTML。注意，内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
<div v-html="htmlContent"></div>

vue的修饰符

.prevent：阻止默认行为。通常用于事件处理程序，阻止默认的事件行为。
<form v-on:submit.prevent="onSubmit">...</form>
.stop：阻止事件冒泡。
<div v-on:click.stop="onClick">...</div>
.capture：添加事件侦听器时使用事件捕获模式。即在捕获阶段触发事件而不是冒泡阶段。
<div v-on:click.capture="onClick">...</div>
.self：只当事件是从事件源（即元素自身）触发时才触发回调。
<div v-on:click.self="onClick">...</div>
.once：事件只触发一次，然后移除监听器。
<button v-on:click.once="onClick">Click me</button>
.passive：滚动事件的默认行为会立即触发，不会等待执行 preventDefault()。
<div v-on:scroll.passive="onScroll">...</div>
.native：监听组件根元素的原生事件。
<my-component v-on:click.native="onClick">...</my-component>
.sync：语法糖，实现父子组件之间双向绑定。
<child-component :foo.sync="parentFoo"></child-component>

冒泡和默认事件

冒泡（Bubbling）：

事件冒泡是指事件在触发后，从目标元素逐级向上传播至 DOM 树根节点的过程。也就是说，如果一个元素的某个事件被触发了，它的父元素也会接收到该事件。这种从内向外传播的过程就是事件冒泡。

例如，当用户在一个按钮上点击时，该点击事件会首先触发在按钮上绑定的事件处理程序，然后冒泡至按钮的父元素、父元素的父元素，一直传播至文档根节点。

默认事件（Default Event）：

默认事件是指在特定情况下，浏览器自动触发的事件。例如，当用户在表单的 <input> 元素中按下回车键时，浏览器会自动提交表单。这个自动提交的行为就是默认事件。

有时候，我们需要阻止事件的默认行为，例如在表单提交时使用 JavaScript 阻止页面刷新。这就是通过调用 event.preventDefault() 方法来阻止默认事件。

冒泡和默认事件常常会一起使用。例如，当用户在一个链接上点击时，浏览器会触发链接的点击事件，并且默认情况下会跳转到链接的目标地址。在这种情况下，我们可以通过阻止事件冒泡和阻止默认事件来定制链接的点击行为，例如在点击链接时弹出一个提示框而不是跳转到目标地址。

如何内存清理

在 JavaScript 中，内存清理是通过垃圾回收器（Garbage Collector）来完成的，它负责自动监视和清除不再使用的内存。对于闭包产生的内存问题，通常可以采取以下几种方法来解决：

避免循环引用：当闭包中引用了外部作用域中的变量时，如果外部变量引用了闭包内的变量，就会形成循环引用，导致内存泄漏。为了避免这种情况，可以尽量减少闭包的使用，或者确保闭包内的变量不会被外部变量长期引用。

手动解除引用：在不需要使用闭包时，手动解除对闭包的引用可以帮助垃圾回收器更快地释放内存。例如，将闭包赋值为 null，或者将包含闭包的变量赋值为 null。
let closure = function() {
  // 闭包代码
};
 
// 手动解除引用
closure = null;
使用事件委托：在事件处理程序中使用闭包时，可能会导致事件处理程序长期保存对 DOM 元素的引用，从而导致内存泄漏。为了避免这种情况，可以使用事件委托，将事件处理程序绑定到父元素上，从而减少闭包的使用。

使用 WeakMap 或 WeakSet：如果闭包中的变量是对象或 DOM 元素，可以考虑使用 WeakMap 或 WeakSet 来存储这些对象，以避免循环引用导致的内存泄漏。WeakMap 和 WeakSet 不会阻止对象被垃圾回收器回收，只要对象没有其他的引用。
let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, 'value');
 
// 不再需要 obj 时，WeakMap 会自动释放对 obj 的引用
obj = null;
性能优化：尽量避免创建过多的闭包，因为闭包的创建和销毁会消耗内存和 CPU 资源。可以考虑使用其他方式来实现相同的功能，例如使用局部变量代替闭包。

综上所述，通过合理的设计和编码习惯，可以有效地避免闭包产生的内存问题，并确保 JavaScript 应用程序的内存清理工作正常进行。

路由的两种模式

Hash 模式：

特点：

兼容性好：支持所有现代浏览器，包括老版本的 Internet Explorer。
部署简单：不需要特殊的服务器配置，可以在任何服务器环境下使用。
无刷新加载：路由跳转时不会触发页面的重新加载，提供了较好的用户体验。

优点：

兼容性强：适用于各种浏览器环境，包括老旧浏览器。
部署简单：不需要特殊的服务器配置，可在静态服务器环境下使用。

缺点：

URL 不友好：URL 中带有 # 符号，看起来不够美观，不利于 SEO。
Hash 模式的路由不会被搜索引擎索引：搜索引擎对于带有 # 符号的 URL 不会进行索引，影响网站的 SEO。
存在历史记录混乱问题：因为所有路由都是在同一个 URL 下进行的，所以浏览器的历史记录可能会变得混乱。

History 模式：

特点：

URL 友好：URL 中不带 # 符号，看起来更加美观，有利于 SEO。
无刷新加载：与 Hash 模式相同，路由跳转时不会触发页面的重新加载。
可与服务器配合：通过服务器端配置，可以实现更灵活的路由配置。

优点：

URL 友好：URL 更加美观，有利于 SEO，提高网站的搜索可见性。
可与服务器配合：可以在服务器端进行路由配置，更加灵活。

缺点：

兼容性稍差：不支持老版本的 Internet Explorer，需要在较新的浏览器中使用。
需要服务器配置：需要在服务器端进行特殊的配置，以处理直接访问或刷新路由时的情况。

综合考虑两种模式的特点、优缺点，开发者可以根据项目需求和实际情况选择适合的路由模式。如果对 SEO 和 URL 美观度要求较高，并且能够配置服务器环境，可以考虑使用 History 模式；如果需要兼容老旧浏览器或者部署简单，可以选择 Hash 模式。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/255756