首页 > 其他分享> > 面向过程与面向对象

面向过程与面向对象

2021-12-12 14:59:44 作者：互联网

面向过程与面向对象

面向过程与面向对象，不是学什么新代码或者新语法

他们两只是一种编程思想

面向过程：

侧重于实现功能的每一步

面向对象：

侧重于把每一步封装好，放到一个对象里，以后找到这个对象，就能调用方法起到对应的功能

例如：洗衣服

假设：生活中的面向过程

\1. 把脏衣服扔到盆里

\2. 倒水

\3. 倒洗衣粉、洗衣液

\4. 浸泡后揉搓

\5. 踩两脚

\6. 拧干

\7. 再倒掉脏水

\8. 再倒清水

\9. 再清洗拧干

面向过程是侧重于实现功能的每一步

面向对象是侧重于找到能实现这个功能的对象，调用它的功能即可

面向对象的思想：就是直接找个洗衣机调用它的功能来完成即可

洗衣机也是由某个“工程师”封装而来的

所以，其实面向对象这种思想，也没有完全脱离面向过程，只是对面向过程的高度封装

如果一直用面向过程，就会产生很多冗余代码

一段功能用面向过程实现了，但是可能这个功能你下次还要用，甚至别的人也要用

那就可以对它进行高度封装，（不仅仅是封装函数，而是封装到一个对象里）方便下次使用和给别人使用，这就是面向对象封装

所以开发思维应该是这样：

如果要实现某个功能，

可以先看看有没有对应的对象已经实现功能了，有就调用对象的功能即可

如果没有就自己封装

体验面向对象封装思想

需求：写三个div和三个p，找到他们并设置样式，再把代码封装起来

具体见代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

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

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


    <script>
        // 需求，找到三个div，三个p标签
        // 给每个div设置宽高和边框为红色，给每个p设置宽高和边框为绿色
        /*
        let divs = document.querySelectorAll('div')
        let ps = document.querySelectorAll('p')
        // 遍历
        for (let i = 0; i < divs.length; i++) {

            divs[i].style['width'] = '150px'
            divs[i].style['height'] = '150px'
            divs[i].style['border'] = '1px solid red'
        }


        for (let i = 0; i < ps.length; i++) {

            ps[i].style['width'] = '50px'
            ps[i].style['height'] = '50px'
            ps[i].style['border'] = '1px solid green'
        }
        */


        // 封装一个获取元素的方法
        /*
            function getEle(selector) {
    
                return document.querySelectorAll(selector)
            }
    
            function css(els, attrs) {
    
                for (let i = 0; i < els.length; i++) {
    
                    for (let key in attrs) {
    
                        els[i].style[key] = attrs[key]
                    }
                }
            }
    
            
            let divs = getEle('div')
            css(divs, {
                width: '150px',
                height: '150px',
                border: '1px solid red'
            })
    
            let ps = getEle('p')
            css(ps, {
                width: '50px',
                height: '50px',
                border: '1px solid green',
                backgroundColor: 'yellow'
            })
        */


        // 此时封装存在一个问题：会造成变量名污染的问题
        // 就是：你这个名字叫 getEle 和 css，那么以后放到项目里，别人就没法用 getEle 和css这个名字
        // 但凡别人用了就会冲突
        // 如何解决？把他们统统封装到一个对象里面，这样即使有变量污染也只污染一个
        let my$ = {

            getEle: function (selector) {

                return document.querySelectorAll(selector)
            },

            css: function (els, attrs) {

                for (let i = 0; i < els.length; i++) {

                    for (let key in attrs) {

                        els[i].style[key] = attrs[key]
                    }
                }
            },
        }


        let divs = my$.getEle('div')
        my$.css(divs, {
            width: '150px',
            height: '150px',
            border: '1px solid red'
        })

        let ps = my$.getEle('p')
        my$.css(ps, {
            width: '50px',
            height: '50px',
            border: '1px solid green',
            backgroundColor: 'yellow'
        })

// 你所想到的功能，其实很多作者也想到了，早就帮你封装好了
// 所以你以后要实现某个功能，可能先尝试搜一下有没有封装好的对象
// 有直接调用,没有就自己写再自己封装即可


    </script>
</body>

</html>

标签：ps,style,封装,divs,面向对象,let,面向,过程
来源： https://blog.csdn.net/gaoyan426926/article/details/121887561