前端面试总结
1.vue封装第三方插件并发布到npm
vue文件和平时组件写法一样
import VueComment from './VueComment.vue'
const comment = {
install: function(Vue) {
Vue.component(VueComment.name, VueComment)
}
}
export default comment
npm init生成package.json文件main指向当前js文件
npm login登陆账号npm publish发布2.富文本底层实现原理
富文本编辑器的底层实现原理主要涉及到以下几个方面：
1. 内容编辑：富文本编辑器的核心功能就是内容编辑，它主要依赖于浏览器提供的可编辑区域contenteditable或者设计模式document.designMode。这两个属性都能将普通的HTML元素转化为可编辑的内容。
2. 格式化：富文本编辑器可以对选中的文本进行各种格式化操作，比如加粗、倾斜、下划线、颜色、字体、大小等。这主要依赖于document.execCommand这个方法，它可以执行各种预定义的命令。
3. 插入内容：富文本编辑器还可以插入各种内容，比如图片、表格、链接等。这也是通过document.execCommand方法实现的。
4. 撤销和重做：富文本编辑器还需要提供撤销和重做功能，这主要通过记录每一次的操作，然后在需要的时候进行回滚或者重播。
5. HTML和Markdown转换：富文本编辑器通常还需要提供HTML和Markdown之间的转换功能，这主要通过正则表达式或者解析器来实现。
6. 数据存储和读取：富文本编辑器还需要将编辑的内容存储起来，然后在需要的时候读取出来。这通常通过localStorage或者服务器端存储来实现。
3.vue3新特性
Vue 3是一款流行的JavaScript框架Vue.js的最新版本。它引入了许多新特性和改进，提供了更好的性能、更简洁的语法和更强大的工具。以下是Vue 3的一些新特性：
1. Composition API（组合式API）：Vue 3引入了Composition API，它允许开发者根据功能来组织代码，而不是像以前那样按照选项对象的方式组织。这使得代码更具可读性、可维护性和重用性。
2. 更好的性能：Vue 3通过优化虚拟DOM算法、缓存和静态分析等方式，提高了性能。比如，Vue 3使用了Proxy代理对象替代Vue 2中的defineProperty来实现响应式系统，从而提高了性能和响应式的精确性。
3. 更细粒度的响应式：Vue 3中的响应式系统可以精确跟踪到哪些属性被用于渲染，并且只针对这些属性进行更新操作，提高了性能和效率。
4. 更好的TypeScript支持：Vue 3在类型推断、函数重载和解构等方面对TypeScript的支持更加友好，提供了更好的开发体验和错误检测。
5. Teleport（传送门）：Vue 3引入了Teleport组件，可以将组件的内容渲染到页面中指定的DOM位置，这对于创建弹出框、模态框等组件非常有用。
6. Suspense（异步加载）：Vue 3支持Suspense组件，可以在异步加载组件时显示一个占位符，直到组件加载完毕后再显示组件内容。这样可以优化用户体验，并提高应用的加载速度。
7. 其他改进: Vue 3还带来了一些其他的改进，比如更好的Tree shaking支持、逻辑分离、全局配置的改进等。
需要注意的是，Vue 3与Vue 2之间存在一些差异，所以在升级时需要仔细查看官方文档，并进行适当的代码调整和迁移。
4.vue自定义插件和自定义指令
自定义插件的步骤如下：
- 创建一个包含 install 方法的对象。
- 在 install 方法中添加需要扩展的功能或资源。
- 使用 Vue.use() 方法来安装插件。
自定义指令的步骤如下：
- 使用 Vue.directive() 方法来定义指令。
- 在指令的定义中，可以通过钩子函数来定义指令的行为。
5.webpack 中 loader 和 plugin 的区别是什么
在Webpack中，Loader和Plugin是两个不同的概念，用于不同的目的。
1. Loader：Loader是Webpack中的一个重要概念，用于对模块的源代码进行转换。它是一个导出为函数的JavaScript模块，接收源代码作为输入，经过转换后返回新的代码。Loader可以将非JavaScript资源（如CSS、图片、字体等）转换为Webpack可以处理的模块。Webpack在处理模块时，会根据文件后缀匹配对应的Loader来进行转换。Loader可以通过配置文件的方式进行配置，也可以通过命令行参数进行配置。
2. Plugin：Plugin是Webpack中的另一个重要概念，用于扩展Webpack的功能。它是一个具有apply方法的JavaScript对象，可以在Webpack构建过程的特定阶段执行特定的任务。Plugin可以用于执行各种任务，例如优化输出、资源管理、注入环境变量等。Webpack在构建过程中会自动调用安装的Plugin，并将Webpack的实例作为参数传递给Plugin的apply方法。Plugin可以通过配置文件的方式进行配置，也可以通过命令行参数进行配置。
总结起来，Loader用于对模块的源代码进行转换，而Plugin用于扩展Webpack的功能。Loader主要用于处理模块的源代码，Plugin主要用于执行各种任务。两者在Webpack中起到不同的作用，但都是为了实现更高级的功能和定制化需求。
6.怎么自定义webpack插件
要自定义一个Webpack插件，你需要按照以下步骤操作：
1. 创建一个新的JavaScript文件来定义你的插件。这个文件应该导出一个函数或一个类，该函数或类将作为Webpack插件的构造函数。
2. 在你的插件函数或类的原型上定义一个`apply`方法。这个方法将在Webpack编译过程中被调用。
3. 在`apply`方法中，可以通过传入的`compiler`参数来访问Webpack的编译器对象，以及通过`compilation`参数来访问当前的编译对象。
4. 在`apply`方法中，可以使用Webpack提供的钩子函数来注册插件的逻辑。例如，可以使用`compiler.hooks`来注册编译器的钩子函数，或者使用`compilation.hooks`来注册编译过程的钩子函数。
5. 在插件的逻辑中，可以通过Webpack提供的API来操作编译过程中的资源。例如，可以使用`compilation.assets`来访问和修改输出的资源文件，或者使用`compilation.modules`来访问和修改Webpack的模块。
6. 最后，将你的插件导出，以便在Webpack配置文件中使用。
下面是一个简单的示例，展示了如何创建一个自定义的Webpack插件：
```javascript
class MyPlugin {
apply(compiler) {
// 在编译过程中注册一个钩子函数
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
// 在编译完成之后，修改输出的资源文件
compilation.hooks.afterEmit.tap('MyPlugin', () => {
// 访问输出的资源文件
const assets = compilation.assets;
// 修改输出的资源文件
for (const filename in assets) {
if (filename.endsWith('.js')) {
const asset = assets[filename];
const source = asset.source();
const modifiedSource = modifySource(source);
asset.source = () => modifiedSource;
}
}
});
});
}
}
function modifySource(source) {
// 修改源代码逻辑
return source.replace('Hello', 'Hi');
}
module.exports = MyPlugin;
```
在Webpack配置文件中，可以像下面这样使用自定义的插件：
```javascript
const MyPlugin = require('./path/to/MyPlugin');
module.exports = {
// ...
plugins: [
new MyPlugin()
]
};
```
这样，当你运行Webpack编译时，你的自定义插件将会被应用到编译过程中，从而实现你想要的功能。
7.H5在Android 及 iOS上得兼容问题
在Android和iOS上，H5的兼容问题主要包括以下几个方面：
1. 浏览器兼容性：不同的浏览器对H5的支持程度不同，可能会导致页面在不同浏览器上显示效果不一致。常见的浏览器包括Chrome、Safari、Firefox等，开发时需要考虑不同浏览器的兼容性。
2. CSS兼容性：不同的浏览器对CSS属性的支持程度也不同，可能会导致页面在不同浏览器上的样式显示不一致。开发时需要注意使用兼容性较好的CSS属性，或者使用CSS预处理器来解决兼容性问题。
3. JavaScript兼容性：不同的浏览器对JavaScript的支持程度也不同，可能会导致页面中的JavaScript代码在不同浏览器上运行出错。开发时需要注意使用兼容性较好的JavaScript语法和API，或者使用JavaScript框架来解决兼容性问题。
4. 设备适配：Android和iOS设备的屏幕尺寸和分辨率不同，可能会导致H5页面在不同设备上显示不正常。开发时需要使用响应式布局或者媒体查询来适配不同设备的屏幕尺寸。
5. 性能优化：由于移动设备的资源有限，H5页面在Android和iOS上的性能表现可能不同。开发时需要注意优化页面加载速度和渲染性能，减少资源的消耗，提升用户体验。
总之，开发H5页面时需要考虑不同浏览器和设备的兼容性，使用兼容性较好的技术和工具，进行性能优化，以保证页面在Android和iOS上的兼容性和稳定性。
8.对事件冒泡和捕获的理解
IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件，
外部元素的事件会先被触发，然后才会触发内部元素的事件
9.for of, for in的区别
for in遍历的是key，for of遍历的是value
10.原型和原型链的理解
原型是JavaScript中的一个概念，它是对象的一个属性，用于存储共享的属性和方法。每个JavaScript对象都有一个原型，可以通过`__proto__`属性来访问。
原型链是JavaScript中的另一个概念，它是一种机制，用于实现对象之间的继承。每个对象都有一个原型，并且可以通过原型链访问到上层原型的属性和方法。
当我们访问一个对象的属性或方法时，JavaScript引擎首先会在对象本身查找，如果找不到则会继续在对象的原型上查找，直到找到该属性或方法或者到达原型链的末端。
原型链的构建是通过对象的原型属性`__proto__`实现的。当我们创建一个对象时，它的原型会被指向一个默认的原型对象。如果我们给这个对象添加属性或方法，它们会被添加到对象本身；而如果我们在原型对象上添加属性或方法，它们会被添加到原型对象上。
当我们访问对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的末端。这样就实现了继承的效果，子对象可以共享父对象原型上的属性和方法。
总结起来，原型是对象的一个属性，用于存储共享的属性和方法；原型链是一种机制，用于实现对象之间的继承，通过对象的原型属性`__proto__`来构建。通过原型链，子对象可以访问到父对象原型上的属性和方法。
11.迭代器的理解
迭代器就是为实现对不同集合进行统一遍历操作的一种机制，只要给需要遍历的数据结构部署Iterator接口，通过调用该接口，或者使用消耗该接口的API实现遍历操作。
