前端什么时候会需要面向对象编程？

Question

现实开发中，基本不会自己写个对象，封装属性和方法，基本上都是写逻辑代码（写写点击事件，ajax请求之类的是最多的了）。不知道面向对象的写法实际运用的场景是哪些？还请各位大佬指点迷津。

Answer 1

假设你的页面里有一个异步列表，他的主要功能包含1、异步请求数据，2、将相应数据渲染到页面上。这种情况直接把代码逻辑写页面里没什么问题。
之后，需求要在页面里再加个异步列表，你会发现两个列表代码差不多嘛，不同的地方就是请求地址或参数不一样，把第一个列表的代码复制过来改下也可以。
一旦用到这个列表的地方变多，列表代码的 copy 也变多。某天突然发现第一个列表里面有个 bug，那之后的 n 处 copy 就有 n 处 bug。改起来是会得黑眼圈的。
这时候，面向对象的优势就出来了，所有列表相同的行为：请求数据、渲染数据都用对象的方法实现，不同的地方：请求地址或参数就用对象件用于区分差异的属性来保存，这样就有了一个异步列表的类了：

// 伪代码
class AsyncList {
  url,
  params，
  getData(),
  renderData(),
}

每个使用的地方就 new 一下好了：

var list1 = new AsyncList(/* 参数啥的 */);
var list2 = new AsyncList(/* ... */);
// ...

后面相关的维护也只要修改 AsyncList 这一处就好了。

总结下：
当你的代码规模达到一定程度，且发现有很多需要封装复用的代码，这样的场景下使用面向对象就可以一定程度上降低代码组织的复杂度。

面向对象还是要看场景，不要为了面向对象而面向对象

Answer 2

对，你说的没错，只要用现成的库就会让我们丧失思考的动力。
推荐你去看《JavaScript设计模式与开发实践》，它会告诉你面向对象的应用。

Answer 3

比如写个插件总要提供一些接口吧，比如简单的轮播可能要提供一个play方法才能让图片进行轮播，还有提供参数让用户配置，比如轮播的速度speed之类的。
在比如说百度前端学院的这道题建立几个人物模型，这时候就用到面向对象了
http://ife.baidu.com/course/d...

Answer 4

这个问题在前端学习很常见，其实没有必要觉得那么难，就是你把思路理溜，本来是过程驱动的，我们提前想到这些东西，把每个动作分解到位，就好像一个小球的移动，我们把小球移动可能涉及到到动作，属性分解，属性对应着可能要变化到位置等，动作对应到一个执行到过程，这样我们只需要告诉小球执行什么动作，或者什么时候执行什么动作，从而改变属性。

Answer 5

1.这还是看题主项目大小，如果题主是自己一人做的一个小项目，逻辑简单，直接写逻辑代码也是没问题的。
2.如果题主公司要做个中大型的项目，多人合作开发，而且后期需求一般是不断增加的，你的项目产品会不断的迭代开发，代码会越写越多，一个JS文件里写了几万行代码，耦合性太高，不知道题主会不会觉得头疼，出了BUG调试的时候是不是方便，找方法是不是快捷，增加一个新需求都要改文件里的好几处方法中的代码，新来的人屡逻辑都要好长时间。
这其中就涉及到代码的可维护性，开闭原则，快递调试定位BUG修复BUG等等问题，所以要用软件工程学的方法和面向对象的思想去开发项目，其中涉及MVC,MVVM等模式,还有发布订阅、命令模式等等多种设计模式实现项目的可维护性，可扩展性，出了需求可以写新代码，保证最小改动和新人接手知道项目遵循的基本思路，方便交接等等。
3.会了这么多框架和设计模式，还可以提高装B能力…………

Answer 6

如果深入的学习过一些框架或者插件的源码, 你会发现不一样的世界。

Answer 7

等你发现东西大了，需要一个比较好的设计才能管理的时候

Answer 8

你把你写的所有代码根据业务需求封装成插件，然后不断调优。

Answer 9

写框架，库，或者自己写个小游戏。

很简单的，当你一个js文件中，函数名多了之后，你就会想把这些函数包起来，于是你想到了“面向对象”。

当然，如果习惯了 aaaba_sfdsf_csfs_wefwf()这种函数命名方式，那你也可以不用面向对象。

Answer 10

jquery插件的封装

你可以抽空看一下啊我的一个jquery业务封装的轮子 地址

Answer 11

javascript就是面向对象编程的一种语言，对象（object）才是王道，过程（function）是Nothingness，HTML基本不会出现对象，JSON有时会接触对象，jQuery也是有时，CSS就比较多了，VBS就不用说了，怎么可能？

var a = {
    html: none,
    JSON: true,
    jQuery: true,
    CSS: alert("Hi!"),
};

相比之下，只有原生JS大规模使用对象，不过也建议大家学习面向对象编程，原因是它是一种优秀的编程方法。

Answer 12

大项目呗，当你好多地方要用到同样的一个组件的时候，你希望new 进来 而不是复杂粘贴进来的时候，就是面向对象的过程了。。。

Answer 13

1. 不知道你平时写业务会不会用到框架，如果用了Vue、React、Angular，你基本都是在写面向对象的东西。
2. 如果是前后端分离的项目，前后端的通信肯定是需要建立在同一的数据模型之上的，那么可以在前端尝试用service的方式给前端组件提供数据，通常写service会用到面向对象的编程