2021-07-14

最新推荐文章于 2024-09-14 18:52:56 发布

ddtol

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量82

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_52401926/article/details/118720764

版权

webpack笔记——了解面向过程与面向对象的前端开发。

在这里插入图片描述
首先，我们先简单看一下面向过程的前端开发
（面向过程：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用）
如下示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        #tabBox input {
            background: #F6F3F3;
            border: 1px solid #FF0000;
        }
        #tabBox .active {
            background: #E9D4D4;
        }
        #tabBox div {
            width:300px;
            height:250px;
            display:none;
            padding: 10px;
            background: #E9D4D4;
            border: 1px solid #FF0000;
        }
    </style>
    <meta charset="utf-8" />
    <title>选项卡</title>
    <script>
        window.onload=function(){
            var tabBox = document.getElementById('tabBox');
            var tabBtn = tabBox.getElementsByTagName('input');
            var tabDiv = tabBox.getElementsByTagName('div');

            for(var i=0;i<tabBtn.length;i++){
                tabBtn[i].index = i;
                tabBtn[i].onclick = function (){
                    for(var j=0;j<tabBtn.length;j++){
                        tabBtn[j].className='';
                        tabDiv[j].style.display='none';
                    }
                    this.className='active';
                    tabDiv[this.index].style.display='block';
                };
            }
        };
    </script>
</head>

<body>
    <div id="tabBox">
        <input type="button" value="游戏" class="active" />
        <input type="button" value="旅行" />
        <input type="button" value="音乐" />
        <div style="display:block;">GTA5、孤岛惊魂</div>
        <div>澳大利亚、西藏</div>
        <div>暗里着迷、一生有你</div>
    </div>
</body>
</html>

相比与面向对象，面向过程的前端开发有以下明显缺点：
*（1）不易维护。面向过程代码比较集中，不易于进行调试纠错。
（2）不易复用。面向过程不易于实现模块化，代码的重复利用的几率低，两个页面实现相似的页面需要写两份相同的代码。
（3）不易扩展。相同的逻辑，如果要有两份相似逻辑，那在面向过程中，就很多时候需要写两份。
面向对象的前端开发
javascript本身是一种基于对象(object-based)的语言，我们日常编码过程中用到的所有东西几乎都是对象(Number, String, Boolean, etc.)。但是，相对于一些流行的面向对象语言(C++, C#, java)，它又不是一种真正的面向对象编程(OOP)语言，因为它的语法中没有class的概念。因此相比与Java，c++其类的定义是不太一样的。
示例如下：

、、、

/**
**js代码**
 * 选项卡
 * @param {Object} id 选项卡id   
 */
function Tab(id){
    var tabBox = document.getElementById(id);
    this.tabBtn = tabBox.getElementsByTagName('input');
    this.tabDiv = tabBox.getElementsByTagName('div');

    for(var i=0;i<this.tabBtn.length;i++){
        this.tabBtn[i].index = i;
        var _this = this;
        this.tabBtn[i].onclick = function(){
            _this.clickBtn(this);
        };
    }
};
/**
 * 为Tab原型添加点击选项卡方法
 * @param {Object} btn 点击的按钮
 */
Tab.prototype.clickBtn = function(btn){
    for(var j=0;j<this.tabBtn.length;j++){
        this.tabBtn[j].className='';
        this.tabDiv[j].style.display='none';
    }
    btn.className='active';
    this.tabDiv[btn.index].style.display='block';
};
、、、
<!DOCTYPE html>
<html>
<head>
    <style>
        .tab input {
            background: #F6F3F3;
            border: 1px solid #FF0000;
        }
        .tab .active {
            background: #E9D4D4;
        }
        .tab div {
            width:300px;
            height:250px;
            display:none;
            padding: 10px;
            background: #E9D4D4;
            border: 1px solid #FF0000;
        }
    </style>
    <meta charset="utf-8" />
    <title>选项卡</title>
    <!-- 引入tab.js -->
    <script type="text/javascript" src="../js/tab.js" ></script>
    <script>

        window.onload = function(){
            var tab1 = new Tab("tabBox1");

            var tab2 = new Tab("tabBox2");
        }

    </script>
</head>

<body>
    <div class="tab" id="tabBox1">
        <input type="button" value="游戏" class="active" />
        <input type="button" value="旅行" />
        <input type="button" value="音乐" />
        <div style="display:block;">GTA5、孤岛惊魂</div>
        <div>澳大利亚、西藏</div>
        <div>暗里着迷、一生有你</div>
    </div>
    <br />
    <div class="tab" id="tabBox2">
        <input type="button" value="技术" class="active" />
        <input type="button" value="工具" />
        <input type="button" value="网站" />
        <div style="display:block;">Java、Spring</div>
        <div>Eclipse、HBuilder</div>
        <div>博客园、CSD</div>
    </div>
</body>
</html>