前端面试中"熟悉面向对象化编程思想和设计模式"到底考察什么?

咯咯咯哒
  • 36

更新

谢谢大家的回答,建议对面向对象没有印象的同学看下Lion的回答中的例子,看完这个例子我恍然大悟,原来面向对象的使用场景在于写这种插件,也就是工作中用到公共组件的时候最有用;作为进阶,之后可以参考Meathill的回答


问题描述

总是看到前端招聘有这样一句话,我从高程开始学习前端,平时做的业务不复杂,基本很少用到面向对象的复杂操作,以至于不知道主流前端开发中这方面要掌握到什么程度?

遇到的面试题

曾经面试滴滴,遇到过一个题目就是场景设计,大概是“滴滴有几种车,顺风车还是专车,每种车单位公里耗油、价格不同,请计算结束时候的行驶公里数和总价,请问该设计什么样的类来描述?” 这样的题目我总是做不来,平时没遇到过。问我设计模式我也只能答书本内容。

困惑

所以这个对象化编程思想和设计模式究竟应该怎么学学到什么程度,请各位大神赐教啊

回复
阅读 2k
4 个回答
✓ 已被采纳

至于面向对象的编程思想,我最近写了一个插件其中就用到了创建父类继承都一系列的思想,链接描述

至于设计模式有很多,其实你有兴趣的话可以看下JQ的原码其中就有很多代理模式,以及观察者模式等体现。这些对你的思想的提升以及代码风格的编写都很有帮助,希望这样的回答对你有所帮助

《设计模式》一书的副标题是:可复用面向对象软件的基础。他的核心是“面向对象”,如果你的代码以面向过程为主,那你的确很难体会到设计模式的价值。

另外,建议搭配一本《重构》一起服用,效果甚佳。

面向对象是一种抽象方式,即通过模拟现实中的对象,对程序用到的东西进行抽象。这样的好处是方便我们理解。比如,一个电商网站的购买流程,如果按照面向过程的方式写,可能是这样:

// 判断登录
if (!session) {
  exit('没有登录');
}

// 查找商品价格
const total = getAllMoney(...);

// 查找折扣信息
const discount = getDiscount(...);

// 生成订单,要求付费
createOrder(...);
return {
  price: total - discount,
}

如果是面向对象,则是这样:

if (currentUser) {
  exit('没有登录');
}

// 通过 Product 对象的实例来计算价格
const total = products.reduce((total, product) => {
  return total += product.getPrice();
}, 0);

// 生成订单实例
const order = new Order(products, currentUser);
return order;

可以看出来,相对于面向过程编程,面向对象的优势在于隐蔽了对象方法的实现,使用者(其他开发人员)只需要使用对象的方法即可,这样可以减少业务代码的数量,提高维护效率。

所以建议题主先慢慢熟悉、理解、使用面向对象开发。然后积累了一些经验和问题之后,再去看《重构》和《设计模式》,这样基本就能学以致用。

对于一般公司,你需要学到项目代码很好维护,代码是js对象的,别的地方只调用了对象的方法。
对于大厂,你需要封装好你的整个js架构。
你题目那个问题其实是很简单的,你先别管设计什么样的类,你先实现它,然后再看你代码有木有重复的,好不好维护,是否共用了东西。
如果想进大厂,多去看看vue等,包括实现原理,体会一下用vue等框架和jq的开发区别。个人感觉从你的提问来看,你还有不少东西需要提升。加油。

面向对象和核心是提取公用属性/方法组成类,后续扩展只需要继承/实现该类即可
我用TS,本例用工厂模式即可,管他什么车,多少种车,实现一个接口即可

interface CarInterface {
   getName():string;
   get每公里油耗():number;
   //...其他类似
}

class 顺风车 implements CardInterface {
    getName() {
        return '顺风车';
    }
    get每公里油耗() {
        return 10;
    }
}
// ... 其他类型
function getMoney(车类型,行驶公里数) {
    let car:CardInterface;
    if(车类型==顺风车) {
        car = new 顺风车();
    }else if(车类型==快车) {
        car = new 快车();
    }else {
        throw new Error('没有这种车类型');
    }
    return card.get每公里油耗()*行驶公里数;
}

后续添加车类型的话,实现CardInterface再改下if的判断即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏