前端小知识点扫盲笔记记录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>

在构造函数上定义方法

<!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>
            //在构造函数上直接定义方法(不共享)
            // function Animai(){
            //     this.eat=function(){
            //         console.log("我爱吃饭")
            //     }
            // }
            // let dog=new Animai()
            // let cat=new Animai()
            // dog.eat();//我爱吃饭
            // cat.eat();//我爱吃饭
            // console.log(dog.eat===cat.eat)//false
            //在原型上直接定义方法(共享)
            function Animai() {
                this.name = name
            }
            Animai.prototype.eat = function () {
                console.log('我爱吃饭', this.name)
            }
            let dog = new Animai()
            let cat = new Animai()
            dog.eat() //我爱吃饭
            cat.eat() //我爱吃饭
            console.log(dog.eat===cat.eat)//true
        </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>Document</title>
    </head>
    <body>
        <!-- 有两种垃圾回收策略：
        标记清除：标记阶段即为所有活动对象做上标记，清除阶段则把没有标记(也就是非活动对象)销毁。
        引用计数：它把对象是否不再需要简化定义为对象有没有其他对象引用到它。如果没有引用指向该对象(引用计数为
        0)，对象将被垃圾回收机制回收。 标记清除的缺点：
        内存碎片化，空闲内存块是不连续的，容易出现很多空闲内存块，还可能会出现分配所需内存过大的对象时找不到合适的块。
        分配速度慢，因为即便是使用 First-fit 策略，其操作仍是一个 O(n)
        的操作，最坏情况是每次都要遍历到最后，同时因为碎片化，大对象的分配效率会更慢。
        解决以上的缺点可以使用 **标记整理(Mark-Compact)算法
        **，标记结束后，标记整理算法会将活着的对象(即不需要清理的对象)向内存的一端移动，最后清理掉边界的内存
        引用计数的缺点：
        需要一个计数器，所占内存空间大，因为我们也不知道被引用数量的上限。
        解决不了循环引用导致的无法回收问题。 V8
        的垃圾回收机制也是基于标记清除算法，不过对其做了一些优化。
        针对新生区采用并行回收。 针对老生区采用增量标记与惰性回收。 -->
    </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>
        <script>
            //第一步 定义自行车的构造函数 两个属性 一个name和一个方法method
            var BicycleShop = function (name) {
                this.name = name
                this.method = function () {
                    return this.name
                }
            }
            BicycleShop.prototype = {
                constructor: BicycleShop,
                /*
                 * 买自行车这个方法
                 * @param {model} 自行车型号
                 */
                sellBicycle: function (model) {
                    var bicycle = this.createBicycle(model)
                    // 执行A业务逻辑
                    bicycle.A()
 
                    // 执行B业务逻辑
                    bicycle.B()
 
                    return bicycle
                },
                createBicycle: function (model) {
                    throw new Error(
                        '父类是抽象类不能直接调用，需要子类重写该方法'
                    )
                },
            }
            // 实现原型继承  Sub表示子类，Sup表示超类
            function extend(Sub, Sup) {
                // 首先定义一个空函数
                var F = function () {}
 
                // 设置空函数的原型为超类的原型
                F.prototype = Sup.prototype
 
                // 实例化空函数，并把超类原型引用传递给子类
                Sub.prototype = new F()
 
                // 重置子类原型的构造器为子类自身
                Sub.prototype.constructor = Sub
 
                // 在子类中保存超类的原型,避免子类与超类耦合
                Sub.sup = Sup.prototype
 
                if (
                    Sup.prototype.constructor === Object.prototype.constructor
                ) {
                    // 检测超类原型的构造器是否为原型自身
                    Sup.prototype.constructor = Sup
                }
            }
            var BicycleChild = function (name) {
                this.name = name
                // 继承构造函数父类中的属性和方法
                BicycleShop.call(this, name)
            }
            // 子类继承父类原型方法
            extend(BicycleChild, BicycleShop)
            // BicycleChild 子类重写父类的方法
            BicycleChild.prototype.createBicycle = function () {
                var A = function () {
                    console.log('执行A业务操作')
                }
                var B = function () {
                    console.log('执行B业务操作')
                }
                return {
                    A: A,
                    B: B,
                }
            }
            var childClass = new BicycleChild('歌谣')
            console.log(childClass,"childClass")
            console.log(childClass.createBicycle())//a方法和b方法
            console.log(childClass.sellBicycle())//执行a b业务操作
        </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>
  <script>
 
//函数的参数为回调函数
function fangfang(callback) {
    var data = {
        "name": "fangyalan",
        "age": 18
    };
    callback(data);
}
//调用
fangfang(function (data) {
    //这里操作回调返回的数据
    console.log(data)
})
 
 
  </script>
</body>
</html>

总结

我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣

posted @   前端导师歌谣  阅读(3)  评论(0)  编辑  收藏  举报  
相关博文：
·  前端小知识点扫盲笔记记录7
·  前端小知识点扫盲笔记记录6
·  【js学习笔记八】如何写一个简单的前端回调函数
·  如果把前端的知识做个体系分类，你是如何划分的？
·  第二周第四天
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示