聊聊面向对象那些事

最新推荐文章于 2024-07-15 17:15:41 发布

不做秃头的程序员

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量342

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/wuhan_perfect/article/details/124369518

版权

一、面向对象理解

今日讲到面向对象编程,就必须得说一下面向过程编程。"面向对象"不是一门技术，而是一种解决问题的思维方式。

区别 :

1. 面向对象 : 注重的结果

2. 面向过程 : 注重的是过程

举例 :

1. 面向对象 : 去火锅店吃火锅

2. 面向过程 : 自己买火锅底料,食材,锅等等自己做

大道至简,无言即言直接上代码

二、面向对象举例

需求 : 给三个 div 和 p 标签设置边框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      height: 50px;
      margin-top: 20px;
      background-color: greenyellow;
    }

    p {
      height: 50px;
      margin-top: 20px;
      background-color: hotpink;
    }
  </style>
</head>

<body>

  <div></div>
  <div></div>
  <div></div>
  <p></p>
  <p></p>
  <p></p>
</body>

</html>

1. for循环来做

 <script>
    // 1.获取页面的元素
        let divList = document.getElementsByTagName('div')
        let pList = document.getElementsByTagName('p')

    // 2.遍历数组每一个元素，设置边框
        for (let i = 0; i < divList.length; i++) {
            divList[i].style.border = '10px solid red'
        }
        for (let i = 0; i < pList.length; i++) {
          pList[i].style.border = '10px solid red'
        }
  </script>

弊端：（1）获取元素代码过长（2）两个for循环，代码冗余（3）不便于维护

2. 使用函数封装来做

  <script>
    // 1.获取页面的元素
    let divList = tagName('div');
    let pList = tagName('p');

    // 2.封装第一个函数
    function tagName(name) {
      return document.getElementsByTagName(name);
    }

    // 3.封装第二个函数
    function setStyle(eles, value) {
      for (let i = 0; i < eles.length; i++) {
        eles[i].style.border = value;
      }
    }
    // 4.函数调用
    setStyle(divList, '10px solid red');
    setStyle(pList, '10px solid red');
  </script>

好处：代码复用

弊端：函数名是全局变量，会造成全局变量污染

3.使用对象封装

 <script>
    // 1.获取页面的元素
    let divList = obj.tagName('div')
    let pList = obj.tagName('p')

    // 2.创建一个对象
    let obj = {
      // 3.创建第一个具名函数
      tagName: function (name) {
        return document.getElementsByTagName(name);
      },

      // 4.创建第二个具名函数
      setStyle: function (eles, value) {
        for (let i = 0; i < eles.length; i++) {
          eles[i].style.border = value
        }
      }
    }

    // 5.传值
    obj.setStyle(divList, '10px solid red')
    obj.setStyle(pList, '10px solid red')
  </script>

好处：（1）便于维护，以后添加修改方法很方便（2）避免全局变量污染

三、面向对象编程的小结

1.面向对象的本质其实是对面向过程的一个封装（将面向过程的逻辑步骤封装到对象中，然后一行代码搞定）

2. 在实际开发中尽量使用 "面向对象" 的思维

3. 别人造好的对象 : 快捷方便，但是不好维护

4. 自己造的对象：好维护，但是耗费时间和精力

5. 多多使用 "面向对象" 的思维,这样大大提高自己的工作效率待自己有业余时间的同时,学习更多的知识以及技能丰富自己！！！

不做秃头的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
聊聊面向对象那些事

一、面向对象理解今日讲到面向对象编程,就必须得说一下面向过程编程。"面向对象"不是一门技术，而是一种解决问题的思维方式。区别 :1. 面向对象 : 注重的结果2. 面向过程 : 注重的是过程举例 :1. 面向对象 : 去火锅店吃火锅2. 面向过程 : 自己买火锅底料,食材,锅等等自己做大道至简,无言即言直接上代码二、面向对象举例需求 : 给三个 div 和 p 标签设置边框<!DOCTYPE html><html lang="en">
复制链接

扫一扫