前端学习27 相关面试题1

1.前端工程化

项目构建工具：使用自动化构建（Webpack, Vite）来处理和打包前端资源（JavaScript, CSS, 图片），从而简化开发流程，提升开发体验。这些工具通常支持模块化开发、代码压缩、混淆、热更新等功能。

模块化开发：采用模块化的开发模式（如 ES6 模块、CommonJS、AMD 等），可以将代码拆分为更小、更易于管理的部分，有助于团队协作和代码复用。每个模块负责单一功能，并且通过明确的接口与其他模块交互。

组件化开发：基于组件的思想构建用户界面，比如 React、Vue中的组件。组件是独立且可复用的 UI 构建块，它们封装了自身的逻辑和样式，可以在不同的页面或应用之间共享。

2.手写快排

function quickSort(arr){
	if(arr.length<=1) return arr;
  	const p = arr[0];
  	const left = arr.slice(1).filter(item => item <=p);
  	const right = arr.slice(1).filter(item => item>p);
  return [...quickSort(left),p,...quickSort(right)];
}

3.手写开发订阅模式

class emitter{
	constructor(){
		this.events = {};
	}
    on(eventsName,callback){
        if(!this.events[eventsName]) {this.events[eventsName] = [];}
        this.events[eventsName].push(callback);
    }
    emit(eventsName,value){
        if(this.events[eventsName]){
            this.events[eventsName].forEach((callback)=>{
                callback(value);
            })
        }
    }
  // 订阅一次
	once(eventName, callback) {
	  const wrapper = (...args) => {
		callback(...args);
		this.off(eventName, wrapper);
	  };
	  this.on(eventName, wrapper);
	}
	off(eventName, callback) {
	  const callbacks = this.events[eventName];
	  if (!callbacks) return;
	  if (!callback) {
		// 清除所有
		delete this.events[eventName];
	  } else {
		// 清除指定回调
		this.events[eventName] = callbacks.filter(cb => cb !== callback);
	  }
	}
  
}
function greet(name) {
  console.log(`Hello, ${name}`);
}
const bus = new emitter();
bus.$on('hello', greet);
bus.$emit('hello', 'Tom'); // Hello, Tom

3.前端模块化

在前端开发中，模块化是指将代码按照功能划分成独立、可复用的模块，避免变量冲突、提高代码可维护性。早期主要通过 IIFE 实现模块封装，后来逐渐发展出了多种模块化方案。