面向对象与面向过程&&举例

面向过程（洗衣服）-- 站在一个执行者的角度去做事情

    //  1. 找个盆
    //  2. 收集要洗的衣服
    //  3. 放水放洗衣液
    //  4. 洗一洗
    //  5. 晒一晒

面向对象 – 站在指挥者的角度

    //  1. 找个对象
    //  2. 让他去洗

    // 面向对象不是用来替代面向过程， 是封装了面向过程的代码
    // 面向对象 + 面向过程的代码

    // 面向对象编程的三大特征：
    //  1. 封装：函数封装，使用对象来封装
    //  2. 继承：子承父业，一个对象没有的属性和方法，另外一个对象有，拿过来直接使用，就实现了继承（拿来主义）
    //          js中继承是指对象之间的关系
    //          其他编程语言中，类与类的关系
    //  3. 多态：多种形态，js不支持多态的
            // int num = 10; // 只有强类型语言才有多态,,,例如java就是强类型语言
            // num = "abc";

            // var num = 10; // js是弱类型语言
            // num = 'abc';
            // num = function(){}
            
    // 小结：
    //  1. 对象：无序键值对的集合
    //  2. 面向对象编程：是一种开发思想
    //  3. 面向过程： 关注点：做事情的顺序， 先干嘛，然后干嘛，最后做啥
    //     面向对象： 关注点：找对象(把要干的事情封装在自己的方法里了)

    //  4. 三大特征：
    //     封装   继承  多态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div, p{
            height: 100px;
            background-color: #f99;
            margin: 20px;
        }
    </style>
</head>
<body>

    <div></div>
    <div></div>
    <div></div>

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

    <script>
        // 举例-面向过程&&面向对象

        // 需求：给所有的div添加5px边框

        // 面向过程
        // 1. 找对象
        // 2. 循环设置每个div的边框

        // 1.
        /*
	        var divs = document.querySelectorAll("div");
	        var ps = document.querySelectorAll("p");
	
	        // 2.
	        for (var i = 0; i < divs.length; i++) {
	            divs[i].style.border = "5px solid #ccc";
	        }
	
	        for (var i = 0; i < ps.length; i++) {
	            ps[i].style.border = "5px solid #ccc";
	        }
        */


        // 使用函数上面的代码
        // 获取元素
       /* 
	       function getEle(ele){
	            return document.querySelectorAll(ele);
	       }

        // 设置边框
	        function setBorder(ele){
	            for (var i = 0; i < ele.length; i++) {
	                ele[i].style.border = "5px solid #ccc";
	            }
	        }

        	setBorder( getEle("div") );
        	setBorder( getEle("p") );
        */
     
        // 上面造成全局污染


        // 面向对象
        // 使用对象进行封装, 可以减少全局污染的问题
        var tools = {
            // 获取元素
            getEle: function (ele){
                return document.querySelectorAll(ele);
            },

            // 设置边框
            setBorder: function (ele){
                for (var i = 0; i < ele.length; i++) {
                    ele[i].style.border = "5px solid #ccc";
                }
            }
        }
        tools.setBorder( tools.getEle("div") );
        tools.setBorder( tools.getEle("p") );

        // 使用面向对象的好处：
        // 找个那个对象，让对象里面的功能(方法)去实现效果
    </script>
</body>
</html>

面向对象与面向过程&&举例

猜你喜欢