js如何用面向对象的思路去编写一个程序

本文主要介绍笔者对于面向对象的代码结构的一点理解

最开始做前端往往是单个功能的做，操作页面某个元素实现某个功能，或者基于某个框架去实现功能，面向对象的结构要么用不到，要么框架已经给出。所以即便是很早就知道js的面向对象，但依然很少去实践，也有很多前端开发人员用不上，因为要么用框架的，要么用别人做好的，因为笔者也经历过前端牛人带着做项目，他就告诉你，哪儿哪儿哪儿写代码能达到什么效果，哪一块哪一块是干什么的，把我的工作简化到单个的功能，极其简单

而在更深入的前端开发里面，比如说要做一个js的工具文件，以前用dropbox的sdk架子做了一个发包工具，它里面封的很好，各个模块也分离出来了，里面用到了模块化，这里不讨论模块的问题，只讲最简单的面向对象

比如现在要做一个网络拓补图的util，你找到一个jtopo框架来作为基础框架，在它的基础上，你要去实现很多功能

那么首先定义一个util对象，对象里面有很多功能也就是一个独立的方法，这些方法有时候需要用到一些共用的数据，或者初始化数据，等一系列数据，所以先建一个util.config配置对象

var util = {
    config : {
        times : 0,
        id : 1,
    }
}

然后里面有各种方法 我们先从暴露出去，也就是提供给外部使用的方法开始，初始化init，放大，缩小。。。

var util = {
    config : {

    },
    init : function (){},
    big : function (){},
    small : function (){},
}

这些简单的功能，一些简单的函数可以解决，而一些复杂的功能，如果写成一个函数，茫茫多的一个代码块，看的头晕对么，会有大量代码重复，修改起来很麻烦，看上去一眼都不知道程序走到哪一步了，所以把单独的，共用的代码块提出来作为基础功能方法，分离功能时要确保他的独立行，能保证其独立的运行并完成功能

addNode : function(){},//添加节点
stateForward : function(){},//模拟编辑器的回退功能
stateBack : function(){},//模拟编辑器的前进功能

以上这种编程方法的好处是，以后要添加新功能了，里面像addNode这种方法可以直接调用，如果要在添加节点addNode时做一些操作时，也可以在里面直接写，有了bug知道是哪一个环节出了问题，不会大海捞针的去遍历代码，像stateForward 这种方法的实现肯定有多个环节，笔者的思路是，每次图上的节点变化时存一个状态对象到util.config.state数组里面，当然这里面还要依赖一个保存拓补图为数据对象的方法和一个渲染数据为拓补图的方法，记录当前的state位置statePosition属性， 前进statePosition加一，利用util.config.state[util.config.statePosition]这个数据对象来渲染拓补图

像这样一个功能模块就完成了，程序流程清晰，代码看着也比一整块的舒服