面向对象——三级联动——面向对象思维（学）不会

Posted 2022-08-16 勇敢*牛牛

一、在客户端完成bootstrap的下载与安装

"devDependencies": 
  "http-server": "^14.1.1"
,
"dependencies": 
  "jquery": "^3.6.0",
  "bootstrap": "^3.0.0"
,

<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.js"> </script>

二、粘贴复制就成了这个bootstrap的样式，删除一些不必要的样式。
先学一个bootstrap的使用方法。

三，面向对象就：需要顺序思维但不是一味的顺序，多想到关联和关系，关系中有顺序关系。
例如这里需要三个下拉菜单。我们就不用直接在html复制粘贴三次了

而是把它放在一个类型中，调用三次（new）写一次生成三个，引入。

---

（以下代码都为伪代码，只为说明思路）

---

constructor()
        this.elem.innerHTML = `
            <button type="button" class="btn btn-default"></button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">

            </ul>
        `
    
**********
 把生成的是哪个对象身上的this.elem放入这个页面，就是一个简简单单的面向对象写法，避免重复   
this.list = [new Menu(), new Menu(), new Menu()];

更加分解的细化代码功能，我们把生成菜单和填入数据方法写在一个类中，让index.js去修改这个对象上的数据，这样对于我们来说，数据和收发和数据的处理就分成的两部分，从而只关注实现这部分功能。注意这个过程是异步的，也就是（通过fetch发送数据，得到服务器发来的数据，就必须用到async await）。

async getData(router,data)
      var res = await fetch("http://localhost:3000/"+router,
          method:"POST",
          body:data?JSON.stringify(data):""
      );
      var result = await res.json();
      console.log(result);
      this.updataMenu(router,result)
  

function getData(req)
    return new Promise(function(resolve,reject)
        var data = "";
        req.on("data",_chunk=>data+=_chunk);
        req.on("end",()=>
            try
                data = JSON.parse(data);
                console.log(data);
            catch(e)
            resolve(data)
        );
    )