前端学习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 实现模块封装,后来逐渐发展出了多种模块化方案。

  • CommonJS:主要用于 Node.js,使用 require 引入,module.exports 导出,特点是同步加载。
  • AMD / RequireJS:适用于浏览器,使用 define 和 require,支持异步加载模块。
  • ES Module(ESM):现代浏览器和前端框架主流使用,采用 import / export,支持静态分析和 Tree Shaking,适用于构建工具优化。
  • UMD:一种兼容 CommonJS、AMD、全局变量的通用模块定义规范,适合类库发布。
  • 全部评论

    相关推荐

    点赞 评论 收藏
    分享
    评论
    1
    7
    分享

    创作者周榜

    更多
    牛客网
    牛客网在线编程
    牛客网题解
    牛客企业服务