前端小知识点扫盲笔记记录8

<!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>命令模式宏命令</title>
</head>
<body>
  <script>
    var command1 = {
    execute: function(){
        console.log(1);
    }
}; 
var command2 = {
    execute: function(){
        console.log(2);
    }
};
var command3 = {
    execute: function(){
        console.log(3);
    }
};
// 定义宏命令，command.add方法把子命令添加进宏命令对象，
// 当调用宏命令对象的execute方法时，会迭代这一组命令对象，
// 并且依次执行他们的execute方法。
var command = function(){
    return {
        commandsList: [],
        add: function(command){
            this.commandsList.push(command);
        },
        execute: function(){
            for(var i = 0,commands = this.commandsList.length; i < commands; i+=1) {
                this.commandsList[i].execute();
            }
        }
    }
};
// 初始化宏命令
var c = command();
c.add(command1);
c.add(command2);
c.add(command3);
c.execute();  // 1,2,3
  </script>
</body>
</html>

<!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>命令模式</title>
</head>
<body>
  <button id="button1">刷新菜单目录</button>
<button id="button2">增加子菜单</button>
<button id="button3">删除子菜单</button>
  <script>
    var b1 = document.getElementById("button1"),
      b2 = document.getElementById("button2"),
      b3 = document.getElementById("button3");
    // 定义setCommand 函数，该函数负责往按钮上面安装命令。点击按钮后会执行command对象的execute()方法。
    var setCommand = function (button, command) {
      button.onclick = function () {
        command.execute();
      }
    };
    // 下面我们自己来定义各个对象来完成自己的业务操作
    var MenuBar = {
      refersh: function () {
        alert("刷新菜单目录");
      }
    };
    var SubMenu = {
      add: function () {
        alert("增加子菜单");
      },
      del: function () {
        alert("删除子菜单");
      }
    };
    // 下面是编写命令类
    var RefreshMenuBarCommand = function (receiver) {
      this.receiver = receiver;
    };
    RefreshMenuBarCommand.prototype.execute = function () {
      this.receiver.refersh();
    }
    // 增加命令操作
    var AddSubMenuCommand = function (receiver) {
      this.receiver = receiver;
    };
    AddSubMenuCommand.prototype.execute = function () {
      this.receiver.add();
    }
    // 删除命令操作
    var DelSubMenuCommand = function (receiver) {
      this.receiver = receiver;
    };
    DelSubMenuCommand.prototype.execute = function () {
      this.receiver.del();
    }
    // 最后把命令接收者传入到command对象中，并且把command对象安装到button上面
    var refershBtn = new RefreshMenuBarCommand(MenuBar);
    var addBtn = new AddSubMenuCommand(SubMenu);
    var delBtn = new DelSubMenuCommand(SubMenu);
    setCommand(b1, refershBtn);
    setCommand(b2, addBtn);
    setCommand(b3, delBtn);
  </script>
</body>
</html>

<!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>四次挥手</title>
</head>
<body>
  <!-- 因为当服务端收到客户端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，
  SYN报文是用来同步的。但是关闭连接时，当服务端收到FIN报文时，很可能并不会立即关闭SOCKET，
  所以只能先回复一个ACK报文，告诉客户端，"你发的FIN报文我收到了"。只有等到我服务端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四次挥手。 -->
</body>
</html>

<!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>圣杯布局</title>
</head>
<style>
  #container {
    padding-left: 200px;
    padding-right: 150px;
    overflow: auto;
  }
  #container p {
    float: left;
  }
  .center {
    width: 100%;
    background-color: lightcoral;
  }
  .left {
    width: 200px;
    position: relative;
    left: -200px;
    margin-left: -100%;
    background-color: lightcyan;
  }
  .right {
    width: 150px;
    margin-right: -150px;
    background-color: lightgreen;
  }
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
</style>
<body>
  <!-- 三栏布局，中间一栏最先加载和渲染(内容最重要，这就是为什么还需要了解这种布局的原因)。
两侧内容固定，中间内容随着宽度自适应。 -->
  <div id="container" class="clearfix">
    <p class="center">我是中间</p>
    <p class="left">我是左边</p>
    <p class="right">我是右边</p>
  </div>
</body>
</html>