版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/github_36091081/article/details/80866411
JS之用面向对象和传统过程式编程
一、过程式编程
如下图所示，为了实现一个div元素的拖拽功能写的代码，这是过程式编程的写法，当JS代码较少时，没必要使用面向对象。杀鸡无需用牛刀。
二、面向对象
改写成面向对象时，可先将普通函数变型，再改成面向对象。
普通方法变型
普通方法变型，变型有3个原则
1）尽量不要出现函数嵌套函数
2）可以用全局变量
3）把onload中不是赋值的语句放到单独函数中
如下代码中，完成了普通函数的变型。
改成面向对象
步骤如下：
1）全局变量作为属性，放在构造函数中
2）函数作为方法，放在原型中
3）在onload中创建对象
4）修改this的指向问题。
修改后的代码如下：
如果再有另外几个元素需要拖拽，只有创建对象，执行相应函数就行了，代码复用性高。
三、总结
面向对象其实就是在模拟系统对象的行为。比如数组对象的sort、push方法，插拔式的随插随用，还可以组合使用。