自己动手写一个render函数

本文介绍了如何从头开始编写一个简单的render函数,涉及对象定义、根节点挂载、渲染逻辑、props参数处理以及应对多个子元素的情况。通过逐步升级render函数,展示了如何处理元素属性、事件绑定等常见需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

在这个之前我们需要了解render是什么?

可以去之前的文章里面看看 《 搞懂vue-render函数(入门篇)

本文目录结构

  1. 定义一个对象

  2. 获取根节点挂载

  3. 开始重头戏

  4. 升级render

  5. props参数

  6. 多个子元素

  7. 全部代码

  8. 总结与福利

废话不多说,快快快 上车!!!

定义一个对象

先定义一个数据对象来作为我们的参数

let data = {
    tag:"h2",
    props:{},
    children:"严老湿"
}

tag 作为标签名,props 作为属性对象,children 作为子元素或者文本节点

哈哈哈 还是老套路 先写一个 h2 标签试试水

获取根节点挂载

这个So Easy啦

<div id="app"></div>
// app 作为我们的根节点
let app = document.querySelector('#app')

获取到 app 节点之后呢?我们是不是需要 appendChild 我们第一步定义的 data 对象

// 此时还没有render这个函数
app.appendChild(render(data))

这个 render 函数就是我们今天要写的重要内容

开始重头戏

天才第一步 ,先定义一个 render 函数

// 接收传入的参数
const render = (options) = >{
    // 获取数据中的标签并创建
    let el = document.createElement(options.tag);
 // 打印el
 console.log(el) // <h2></h2>
 // 将节点返回
 return el
}
app.appendChild(render(data))

此时我们的元素已经创建成功,接下来我们需要做的就是,把它的文本,渲染上去。

渲染文本节点

children 赋值给到节点文本内容

const render = (options) = >{
    let el = document.createElement(options.tag);
 // 我们在这里传入 children 文本
 el.textContent = options.children
 return el
}
app.appendChild(render(data))

严老湿 :好了,render 写完了,下课吧!

童鞋 :等等!!就这???

开个玩笑 当然不是啦!这写得也真是太简陋了吧

升级render

刚刚我们其实已经写了一个简陋版本的render 但是存在很多问题!

  • children 如果是数组,多个子元素呢?

  • 如果props 里面有属性呢?

  • 我还想要点事件触发函数呢?

....

还有很多问题,所以我们来加强一下,冲鸭!!!

props参数

我们现在先来升级一下 props 参数,如我们需要在元素上加 classidon

首先是一号选手 class

我们先将数据中的props中新增一个class 且 它的值为 myClass

let data = {
    tag:"h2",
    props:{
        class:"myClass"
    },
    children:"严老湿"
}

数据改造好了,我们来看看 render 改如何升级

const render = (options) = >{
    let el = document.createElement(options.tag);
 // 判断是否是对象,并且不是null
 if(typeof options.props ===&nb
<think>嗯,用户现在问的是如何用Python一个网络嗅探并生成拓扑图的脚本。首先,我需要回顾之前的对话历史,用户之前已经了解了网络嗅探自动生成拓扑图的基本概念和相关工具的问题,现在想自己动手用Python实现一个简单的脚本。 接下来,我需要确定用户的需求层次。用户可能有一定的编程基础,但对网络编程和数据分析可能不太熟悉。他们可能希望得到一个逐步的指导,从数据包捕获到分析再到可视化,每个步骤都有具体的代码示例和解释。 首先,我应该考虑使用Python的哪些库。常见的网络嗅探库有Scapy,它功能强大,可以捕获和分析数据包。然后,数据处理部分可能需要用到socket、netaddr来处理IP和MAC地址。可视化方面,Graphviz或者NetworkX结合Matplotlib都是不错的选择。 然后,用户可能需要知道如何安装这些库,所以在步骤中应该包括安装命令,比如pip install scapy graphviz。接下来,分步骤讲解:数据捕获、数据处理、构建拓扑、可视化。每个步骤给出代码片段,并解释关键部分,比如过滤ARP和ICMP包,提取源和目的地址,使用字典存储节点和边,最后生成图形。 还要考虑用户可能遇到的问题,比如权限问题,在Linux上需要sudo运行,在Windows上可能需要管理员权限。另外,解释为什么选择特定的协议(如ARP和ICMP)来构建拓扑,因为它们能有效反映设备间的连接关系。 可能用户想知道如何处理更复杂的情况,比如大规模网络或不同协议,这里需要提到脚本的局限性,比如性能问题或需要更复杂的分析逻辑,这样可以引导用户进一步学习或使用更专业的工具。 最后,确保代码示例简洁,避免复杂难懂的部分,让用户能够快速上手。同时,提醒用户注意隐私和法律问题,未经授权进行网络嗅探可能违法,这既是负责任的表现,也是避免用户陷入麻烦。</think>好的,我将分步骤讲解如何用Python编一个简单的网络嗅探+拓扑分析脚本,并提供可运行的代码框架。 --- ### **步骤1:安装依赖库** ```bash pip install scapy graphviz # 网络嗅探+绘图核心库 pip install matplotlib # 可选图形展示 ``` --- ### **步骤2:基础嗅探功能** ```python from scapy.all import sniff, Ether, ARP, IP, ICMP def packet_handler(packet): """抓包回调函数""" # 提取MAC地址(链路层) if Ether in packet: src_mac = packet[Ether].src dst_mac = packet[Ether].dst print(f"MAC: {src_mac} -> {dst_mac}") # 提取IP地址(网络层) if IP in packet: src_ip = packet[IP].src dst_ip = packet[IP].dst print(f"IP: {src_ip} -> {dst_ip}") # 启动嗅探(过滤ARP和ICMP流量) sniff(filter="arp or icmp", prn=packet_handler, count=50) ``` --- ### **步骤3:构建拓扑数据结构** ```python from collections import defaultdict class NetworkTopology: def __init__(self): self.nodes = set() # 存储所有设备(IP/MAC) self.edges = defaultdict(int) # 存储连接关系及通信次数 def add_connection(self, src, dst): self.nodes.update([src, dst]) self.edges[(src, dst)] += 1 topo = NetworkTopology() def packet_handler(packet): if ARP in packet: # ARP协议包含设备映射关系 src = f"{packet[ARP].psrc}({packet[ARP].hwsrc})" dst = f"{packet[ARP].pdst}({packet[ARP].hwdst})" topo.add_connection(src, dst) elif IP in packet: # IP通信体现逻辑连接 src = packet[IP].src dst = packet[IP].dst topo.add_connection(src, dst) ``` --- ### **步骤4:可视化拓扑图** ```python from graphviz import Digraph def visualize_topology(topo): dot = Digraph(comment="Network Topology") # 添加节点 for node in topo.nodes: dot.node(node) # 添加边(带通信次数标注) for (src, dst), count in topo.edges.items(): dot.edge(src, dst, label=str(count)) dot.render('network.gv', view=True) # 生成PDF/PNG文件 # 在嗅探结束后调用 visualize_topology(topo) ``` --- ### **完整脚本示例** ```python from scapy.all import sniff, ARP, IP from collections import defaultdict from graphviz import Digraph class NetworkTopology: def __init__(self): self.nodes = set() self.edges = defaultdict(int) def add_connection(self, src, dst): self.nodes.update([src, dst]) self.edges[(src, dst)] += 1 def packet_handler(packet, topo): if ARP in packet: src = f"{packet[ARP].psrc}({packet[ARP].hwsrc})" dst = f"{packet[ARP].pdst}({packet[ARP].hwdst})" topo.add_connection(src, dst) elif IP in packet: src = packet[IP].src dst = packet[IP].dst topo.add_connection(src, dst) def main(): topo = NetworkTopology() sniff(filter="arp or icmp", prn=lambda pkt: packet_handler(pkt, topo), timeout=60) # 绘图 dot = Digraph() for node in topo.nodes: dot.node(node) for (src, dst), count in topo.edges.items(): dot.edge(src, dst, label=str(count)) dot.render('network_topology', view=True) if __name__ == "__main__": main() ``` --- ### **关键要点说明** 1. **权限要求**:需要以管理员权限运行(Linux/Mac用`sudo`,Windows用管理员CMD) 2. **协议选择**:通过ARP协议获取设备真实MAC地址,通过IP协议分析逻辑连接 3. **优化方向**: - 添加OSI二层交换机发现(需解析STP协议) - 集成Nmap扫描增强设备识别 - 使用NetworkX库实现更复杂的布局算法 --- ### **注意事项** - **隐私问题**:仅限在自有网络中使用 - **性能局限**:Scapy处理高速流量可能丢包(建议结合`tcpdump`抓包后分析) - **专业工具**:大规模网络推荐使用Libpcap/C++实现 如果需要更详细的实现某个功能模块(如设备类型识别、流量统计等),可以告诉我具体需求!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值