JS之用面向对象和传统过程式编程

JS之用面向对象和传统过程式编程

一、过程式编程

如下图所示，为了实现一个div元素的拖拽功能写的代码，这是过程式编程的写法，当JS代码较少时，没必要使用面向对象。杀鸡无需用牛刀。

    

二、面向对象

改写成面向对象时，可先将普通函数变型，再改成面向对象。

普通方法变型

普通方法变型，变型有3个原则

1）尽量不要出现函数嵌套函数

2）可以用全局变量

3）把onload中不是赋值的语句放到单独函数中

如下代码中，完成了普通函数的变型。

        

改成面向对象

步骤如下：

1）全局变量作为属性，放在构造函数中

2）函数作为方法，放在原型中

3）在onload中创建对象

4）修改this的指向问题。

修改后的代码如下：

        

如果再有另外几个元素需要拖拽，只有创建对象，执行相应函数就行了，代码复用性高。

三、总结

面向对象其实就是在模拟系统对象的行为。比如数组对象的sort、push方法，插拔式的随插随用，还可以组合使用。