前端面试题详解整理45|HTML5的一些新特性，v-model原理 ，实现一个dialog ，原型，原型链和实例的关系 ，

金色的雨570
71 阅读5分钟

春招 tplink 前端一面

只记录答得不好，答得好的都忘了...
1、html5新特性 （不知道，随便说了几个）
2、ts泛型

1. HTML5的一些新特性包括：

  • 语义化标签：引入了新的语义化标签，如<header>、<footer>、<nav>、<section>、<article>等，使得页面结构更清晰。
  • 多媒体支持：引入了<audio>和<video>标签，使得在网页上嵌入音频和视频更加方便。
  • Canvas绘图：提供了Canvas API，可以通过JavaScript绘制图形、动画等，为Web应用提供了更多的交互性和动态效果。
  • Web存储：引入了localStorage和sessionStorage，可以在浏览器端存储数据，比传统的cookie更灵活方便。
  • 新的表单元素和属性：引入了一些新的表单元素和属性，如<input type="date">、<input type="email">、<input type="number">等，增强了表单的功能和用户体验。
  • Web Workers：允许在后台运行脚本，提高了网页的性能和响应速度。
  1. TypeScript中的泛型（Generics）是一种模板类型，可以在函数或类中使用，在不指定具体类型的情况下编写灵活的代码。使用泛型可以增强代码的复用性、类型安全性和灵活性。例如：
// 使用泛型定义一个函数，计算数组的平均值
function average<T>(array: T[]): number {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
    sum += array[i];
  }
  return sum / array.length;
}

// 使用泛型函数
const numbers: number[] = [1, 2, 3, 4, 5];
const avg = average(numbers);
console.log(avg); // 输出：3

在这个例子中，average函数接受一个泛型数组array，可以是任意类型的数组，然后计算其平均值。通过泛型，可以使函数适用于不同类型的数组，提高了代码的通用性。 3、不用ui框架，如何实现一个dialog

4、有没有自己去封装过一个组件

实现一个简单的对话框（dialog）可以通过原生的HTML、CSS和JavaScript来完成。下面是一个简单的示例代码：

HTML结构：

<button id="openDialog">打开对话框</button>
<div id="dialog" class="dialog">
  <div class="dialog-content">
    <span id="closeDialog" class="close">&times;</span>
    <p>这是一个简单的对话框</p>
  </div>
</div>

CSS样式：

.dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

JavaScript逻辑：

// 打开对话框
document.getElementById("openDialog").addEventListener("click", function() {
  document.getElementById("dialog").style.display = "block";
});

// 关闭对话框
document.getElementById("closeDialog").addEventListener("click", function() {
  document.getElementById("dialog").style.display = "none";
});

这个示例实现了一个简单的对话框，点击按钮可以打开对话框，点击对话框右上角的关闭按钮可以关闭对话框。你可以根据实际需求对样式和功能进行调整和扩展。

至于第二个问题，封装组件是前端开发中非常常见的任务。例如，你可以封装一个通用的轮播图组件、模态框组件、表单验证组件等等，以便在项目中复用。封装组件的过程包括设计组件的接口、功能实现、样式设计等，具体可以根据项目需求进行。

5、原型，原型链和实例的关系

在JavaScript中，每个对象都有一个原型（prototype），原型是一个对象，它包含对象的共享属性和方法。每个对象都从原型继承属性和方法。当我们创建一个对象时，JavaScript会自动为该对象分配一个原型，通常我们使用构造函数或对象字面量来创建对象。

原型链是JavaScript中对象之间的一种关系。每个对象都有一个指向其原型的链接，通过原型链，对象可以访问其原型链上的属性和方法。当我们试图访问一个对象的属性或方法时，JavaScript会首先在该对象本身上查找，如果找不到，则会沿着原型链向上查找，直到找到对应的属性或方法，或者到达原型链的顶端（即Object.prototype）。

实例是通过构造函数或者其他方式创建的对象，它们都拥有一个原型，并且可以通过原型链访问原型上的属性和方法。实例与原型之间的关系是通过原型链来建立和维护的。

总的来说，原型是对象的一个特殊属性，原型链是对象之间的一种关系，实例是通过原型创建的对象，它们之间的关系可以通过原型链来描述。JavaScript中的原型链机制使得对象可以共享属性和方法，提高了代码的重用性和效率。

6、v-model原理

#tp联洲##面经# v-model是Vue.js中用于实现表单元素和Vue实例数据之间双向绑定的指令。其原理可以分为两个方面来解释：

  1. 数据绑定： 当一个表单元素使用v-model指令绑定到Vue实例的数据属性时，Vue会在底层自动为该表单元素添加一个事件监听器，监听该表单元素的input事件或者change事件（取决于具体表单元素的类型），当用户输入内容或者改变选项时，会触发这些事件。然后Vue会通过这些事件获取用户输入的值，并将其更新到Vue实例中对应的数据属性上。

  2. 视图更新： 一旦Vue实例中的数据发生改变，与之绑定的表单元素的值也会相应地更新。这是因为Vue实现了响应式的数据绑定机制，当数据发生变化时，Vue会自动触发重新渲染视图的过程，更新界面上与数据相关的部分。因此，一旦Vue实例中的数据被修改，与之绑定的表单元素的值也会随之更新，保持了数据和视图的同步。

总的来说，v-model的原理就是在表单元素和Vue实例数据之间建立了双向绑定关系，使得数据的变化能够自动反映到视图上，同时用户对视图的操作也能够自动更新到数据中，实现了数据和视图之间的双向同步。

作者：给个机会_谢啦
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

avatar
文章
阅读
粉丝