首页 > 其他分享 >前端小知识点扫盲笔记记录8

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

时间：2023-04-14 11:00:39浏览次数：35  
标签：function 知识点 execute console name 笔记 扫盲 var prototype

前言

我是歌谣 放弃很容易 但是坚持一定很酷 今天继续对前端知识的小结

命令模式宏命令

<!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>

总结

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

标签：function,知识点,execute,console,name,笔记,扫盲,var,prototype
From： https://blog.51cto.com/u_14476028/6189695

相关文章

  • Cadence应用笔记：圆弧走线
    说明走线有时候要走圆弧，拉线方法如下：选择拉线后在选项栏中设置为arc模式，根据需求拉45度或者90度、结果如下......
  • mysql笔记
    1.3、数据库分类关系型数据库：（sql）MySql，Oracle，SqlServer,DB2，SQLlite通过表和表之间，行和列之间的关系进行数据的存储，学员信息表，考勤表，。。。。。非关系型数据库：（NoSQL）NotOnlyRedis,MongDB非关系型数据库，对象存储，通过对象的自身属性来决定。DBMS(数据库管理系统)数据库的......
  • Go笔记(六)：切片
    切片是对数组的拓展，在Go中数组的长度一旦定义无法被修改，切片的长度是不固定的，可以理解为切片是一个可变长度数组，是一个有相同类型元素的可变长度序列。1、声明切片1.1、显示声明切片1、语法声明切片语法如下：varsclicename[]type2、示例代码1packagemain2......
  • pytest学习笔记
    pytest是python的一种单元测试框架，与python自带的unittest测试框架类似，但是比unittest框架使用起来更简洁，效率更高。根据pytest的官方网站介绍，它具有如下特点：非常容易上手，入门简单，文档丰富，文档中有很多实例可以参考能够支持简单的单元测试和复杂的功能测试支持参数化执行测......
  • Java基础知识点内部类之成员内部类
    一：概述1.成员内部类顾名思义就是写在成员位置的，属于外部类成员。2.成员变量可以被一些修饰符所修饰，比如：private,default,public,static等。3.在成员内部类中，jdk16之前不能定义静态变量，jdk16开始才可以定义静态变量。二;获取内部类对象方法一;当成员内部类被private修饰时，在外部类中......
  • Django笔记六之外键ForeignKey介绍
    本文首发于公众号：Hunter后端原文链接：Django笔记六之外键ForeignKey介绍这是一种一对多的字段类型，表示两张表之间的关联关系。本篇笔记的目录如下：on_deleterelated_namerelated_query_name外键字段的保存1、on_delete假设有两个application，app1和app2app1下的某......
  • Django笔记二十三之case、when操作条件表达式搜索、更新等操作
    本文首发于公众号：Hunter后端原文链接：Django笔记二十三之条件表达式搜索、更新等操作这一篇笔记将介绍条件表达式，就是如何在model的使用中根据不同的条件筛选数据返回。这个操作类似于数据库中ifelifelse的逻辑。以下是本篇笔记的目录：model和数据准备When和Case......
  • Linux操作系统汇编指令入门级整理知识点
    前言我们大都是被高级语言惯坏了的一代，源源不断的新特性正在逐步添加到各类高级语言之中，汇编作为最接近机器指令的低级语言，已经很少被直接拿来写程序了，不过我还真的遇到了一个，那是之前的一个同事，因为在写代码时遇到了成员函数权限及可见性的问题，导致他无法正确调用想执行的函数，结......
  • 烘焙笔记
    目录贝壳边贝壳边标准头大尾小大小均匀，纹路清晰收口要圆不留缝......
  • 虚幻引擎 4 学习笔记 [1] ：蓝图编程 Demo
    虚幻引擎4学习笔记[1]：蓝图编程Demo​ 最近学习虚幻引擎，主要看的是Siki学院的课，课程链接：Unreal蓝图案例-基础入门-SiKi学院|SiKi学堂-unity|u3d|虚幻|ue4/5|java|python|人工智能|视频教程|在线课程(sikiedu.com)​ 以下为课程笔记：1.创建工程​ 选择蓝图，不带初......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99