js面向对象和面向过程实现修改背景颜色的小案例

最新推荐文章于 2023-04-18 11:16:23 发布

铁东博客

最新推荐文章于 2023-04-18 11:16:23 发布

阅读量543

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39801446/article/details/82585693

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

面向过程就是函数式编程，按照传统流程编写一个又一个的函数来解决需求的方式。
面向过程适合一个人的项目，如果是团队合作，别人想修改你的代码就不利于维护了。所以下面着重聊聊面向对象。
面向对象就是讲你的需求抽象成一个对象，然后针对这个对象分析其属性和方法。
面向对象的主要特点就是封装，继承，多态。

以下是我写的一个小例子来实现改变背景颜色的两种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background: gray;
        }
    </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
    //面向过程实现改变背景
//    document.getElementById("btn").onclick = function () {
//        my$("dv").style.background = "yellow";
//    };

    //利用面向对象实现属性的改变，
    function changeStyle(btnObj,dvObj,json) {
        this.btnObj = btnObj;
        this.dvObj = dvObj;
        this.json = json;
    }
    //通过原型来添加方法,解决数据共享,节省内存空间
    changeStyle.prototype.init = function () {
        var that = this;
        this.btnObj.onclick = function () {
            for ( var key in that.json ) {
                that.dvObj.style[key] = that.json[key];
            }
        }
    };
    var json = {"width":"500px","height":"500px","background":"pink","opacity":0.5};
    var chage = new changeStyle(my$("btn"),my$("dv"),json);
    chage.init();
</script>
</body>
</html>

原型的好处：解决数据共享,节省内存空间；

博主以为开发还是用面向对象开发好，感觉这样的代码更加高大尚

铁东博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js面向对象和面向过程实现修改背景颜色的小案例

面向过程就是函数式编程，按照传统流程编写一个又一个的函数来解决需求的方式。面向过程适合一个人的项目，如果是团队合作，别人想修改你的代码就不利于维护了。所以下面着重聊聊面向对象。面向对象就是讲你的需求抽象成一个对象，然后针对这个对象分析其属性和方法。面向对象的主要特点就是封装，继承，多态。以下是我写的一个小例子来实现改变背景颜色的两种方式&lt;!DOCTYPE html&gt;&...
复制链接

扫一扫

专栏目录