Coderhyp'Blog

webpack模块化原理webpack打包的代码 允许我们使用各种模块化 如最常用的CommonJS ES Module CommonJS模块化实现原理；使用commonjs 后 webpack打包好的bundle.js源码 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849// 定义了一个对象// 模块的路径(key): 函数(value)var __webpack_modules__ = { "./src/js/format.js": (function (module) { const dateFormat = (date) => { return "2020-12-12"; } const priceFormat = (price) => { return "100.00&q ...

Plugin认识plugin除了loader plugin也是webpack的核心 官方中的描述： While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables. Loader是用于对特定的模块类型进行转换 Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等； cleanWebpackPlugin 当修改了一些配置后需要重新打包我们之前要手动删除打包后的文件夹 但是我们可以借助一个插件帮助我们完成 cleanWebpackPlugin 安装 这个插件 npm install clean-webpack-plugin -D 在插件中进行配置 123456const { CleanWebpackP ...

前端面试题记录(二)

前端面试题记录(一)CSS_水平垂直居中 绝对定位方式（注意子绝父相） 不确定div的宽高的时候 left:50% top:50% 和 transfrom：translate(-50%,50%)的方式实现 如果确定了当前div的宽度，利用margin负值的方法实现 在绝对定位下给top left right bottom 都设置为0 配合margin：auto实现 calc() 函数动态计算实现水平垂直居中 flex布局 父级 设置display:flex 主轴 justify-content:center 侧轴 align-content:center display：table-cell方法 文字 table-cell实现水平垂直居中: 父级 display:table-cell vertical-align:middle text -align:center 子div display：inline-block CSS_BFC BFC是块级格式上下文 有BFC特性的元素可以看作一个不会在布局上影响外部的独立容器 触发BFC 有body根元素 ...

传输层(Transport) 传输层有两个协议 TCP (Transmission Control Protocol) 传输控制协议 UDP(User Datagram Protocol) 用户数据报协议 UDP一般用于实时场景 有些DNS可以用TCP 有的可以用UDP UDP UDP是无连接的 减少了建立和释放连接的开销 UDP尽最大能力交付 不保证可靠交付 因此UDP不需要维护一些复杂的参数 首部只有8个字节（TCP的首部至少有20个字节） UDP长度（Length） 占16位 首部的长度+数据的长度 检验和计算内容：伪首部+首部+数据 伪首部只在计算检验和时起作用 不会传递给网络层 端口（Port） UDP首部中端口是占用2字节 可以推测出端口号的取值范围是 0 - 65535 客户端的源端口是临时开启的随机端口 防火墙可以设置开启关闭某些端口提高安全性 比如可以在数据库的端口设置防火墙 只有通过内部间接的形式可以访问 常用指令 netstat-an:查看被占用的端口 netstat- ...

Web安全前端的攻击方式都有哪些？XSS攻击XSS(Cross-Site Scripting ，跨站脚本攻击)是一种代码注入攻击 攻击者在目标网站上注入恶意代码 当被攻击者登录网站就会执行这些恶意代码 这些脚本可以读取被攻击者的cookie session tokens 或者其他的敏感信息 对用户进行钓鱼欺诈甚至发起蠕虫攻击 XSS攻击实现的本质是 恶意代码没有经过过滤就和网站的正常代码混在一起 浏览器无法分辨哪些脚本可信 就导致了恶意脚本被执行， 因为恶意脚本是在用户的终端执行 所以恶意代码能够直接获取用户的信息， 利用这些信息可以冒充用户向网站发送攻击者自定义的请求 XSS攻击的分类1.反射型XSS当用户点击一个恶意链接或者提交一个表单 或者进入一个恶意网站 注入脚本进入被攻击者的网站 web服务器注入脚本 比如错误信息等 这些恶意信息没有进行过滤直接返回到用户的浏览器上 反射型XSS的攻击步骤： 攻击者构造出特殊的URL 其中包含恶意代码 用户打开带有恶意代码的URL时 网站服务端将恶意代码从URL中取出 拼接在HTML返回给浏览器 浏览器接收到响应后解析执行 这 ...

网络层(NetWork) 网络层数据包(IP数据包，Packet)由首部，数据两部分组成 很多时候是由传输层传递下来的数据段 网络层首部版本(version) 占四位 0b0100：IPv4 0b0110：IPv6 首部长度(Header Length) 占四位 二进制乘以四才是最终长度 0b0101:20字节(最小值) 0b1111:60字节(最大值) 区分服务 占八位 可以用于提高网络的服务质量（Qos） 可在操作系统中配置 总长度 占16位 首部+数据的长度之和 最大值是65535 数据要传输给数据链路层 然而数据链路层的帧的数据部分不能超过1500字节 所以过大的IP数据包 需要分成片(fragments)传输给数据链路层 每一片 都有自己的网络层首部(IP首部) 标识，标志标识 占16位 数据包的ID 当数据包过大进行分片时，同一个数据包的所有片的标识都是一样的 有一个计数器专门管理数据包的ID 每发出一个数据包 ID+1 标志 占三位 第一位(Reserved Bit)： 保留 第二位 (Don’t fragment)： 1代表不允许 ...

物理层_数据链路层网络互连模型客户端向服务器发送请求 会经过层层封装 然后服务器再进行拆包 ISO在1985年制定了网络互连模型 OSI参考模型 具有七层结构 TCP/IP协议 学习研究 物理层 物理层定义了接口标准 线缆标准 传输速率 传输方式等 模拟信号( Analog Signal) 连续的信号,适合长距离传输 抗干扰能力差,受到干扰时波形变形很难纠正 数字信号( Digital Signal) 离散的信号,不适合长距离传输 抗干扰能力强。收到干扰时候波形失真可以修复 数据通信模型 局域网通信模型 网线一般不超过一百米 广域网通信模型 信道信道：信息传输的通道 一条传输介质上 （比如网线）可以有多条信道 单工通信 信号只能往一个方向传输 任何时候都不能够改变信号的传输方向 比如无线电广播 半双工通信 信号可以双向传输 但必须是交替进行 同一时间只能往一个方向传输 比如对讲机 全双工通信 信号可以同时双向传输 比如打电话 数据链路层（Date Link） 链路：从1个节点到相邻节点的一段物理 ...

路由在不同网段之间转发数据 要有路由支持 默认情况下 路由器只知道跟它直连的网段 非直连的网段需要通过静态路由、动态路由告诉它 静态路由 管理员手动添加路由信息 通过配置路由器的静态路由表 的下一跳 路由器来寻找想去的网段 路由器一般配置的是网段 所以配置后一个网段下的都可以通信了 如果想配置某一个ip地址那么配置子网掩码匹配特定IP 配置默认路由是当不知道往哪里走的时候使用 适用于小规模网络 动态路由 路由器通过路由选择协议(如RIP，OSPF)自动获取路由信息 适用于大规模网络 静态路由配置练习： 路由器0: 路由器1： 练习2： 路由器的配置 数据包的传输 首先源IP和目标IP是固定的 因为目标是从A发送数据到F 。 但是源MAC地址和目标MAC地址会改变 先从MA到路由器0 M0 从路由器0到路由器1 再从路由器1到F 这个过程可以理解成快递站点 从商家到目标客户客户需要走快递站点(路由器) 不同路由器路由器不同 效果也不同 有的路由器可以让同一网段的两个主机传递数据 第一个包的丢失第一次Pin的时候会超时的原因 ...

MAC地址每一个网卡都有一个6字节（48bit）的MAC地址 MAC地址全球唯一 固化在网卡ROM中 由IEEE802标准规定 前三个字节 OUI —组织唯一标识符 由IEEE的注册管理机构分配给厂商 后三个字节 —网络接口标识符 厂商自行分配 MAC地址的表现形式 windows 40-55-82-0A-8C-6D Linux Android MAC IOS 40:55:82:0A:8C:6D 当48位全为1 代表广播地址 MAC地址为 FF-FF-FF-FF-FF-FF MAC地址操作 查看mac地址:ipconfig/all 修改mac地址 更改适配器选项 - 属性 - 配置 - 高级 - 网络地址 填写的时候要去掉 - 有时可以通过修改mac地址蹭网 学校有可能会通过mac地址来确认是否可以上网 MAC地址的获取 当不知道对方主机的MAC地址时，可以通过发送ARP广播获取对方的MAC地址 获取成功后 会缓存IP地址 MAC地址的映射信息 俗称ARP缓存 通过ARP广播获取到的MAC地址 属于动态缓存(dynamic) 存储时间比较短 默认是 ...