自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Samuel的博客

前端小菜鸡

  • 博客(32)
  • 资源 (1)
  • 收藏
  • 关注

原创 个人博客完成啦~

博客代码地址、线上地址、使用步骤

2022-10-14 02:55:42 724

原创 Webpack 深入浅出 —— 学习笔记

想要源文件加入构建流程中,则配置 entry想要自定义出书文件位置和名称,则配置 output想要自定义寻找依赖模块时的策略,则配置 resolve想要自定义解析和转换文件的策略,则配置 module,通常是配置 module.rules 中的 loader其它大部分需求可以通过配置 plugin 实现虽然我们减少了加载的代码内容大小,但最影响用户的还是首次加载时的等待,其根本原因是网络传输过程耗时太大cdn 的作用是将内容部署到世界各地,用户按照就近原则获取服务器资源。

2022-12-17 14:55:48 608

原创 自刷新Token——前端部分

这次做这个东西可以是纯属无用的自嗨,甚至是什么的,希望大家嘴下留情,并且可以给我一些建议,因为对于token这一块实在并不是算很了解的,毕竟也是看别人博客慢慢学的,谁还不是一个学生呢(doge)

2022-07-03 01:03:01 1231

原创 计网——未来网络前沿技术

扩展——未来网络前沿技术软件定义网络网络层有介绍数据命名网络(Named Data Networking,NDN)IP架构与NDN架构对比IP模型NDN模型如果在中间节点缓存了数据,直接返回NDN报文数据命名报文格式TLV基本格式Name的TLV封装Interest报文的TLV封装Data报文的TLV封装NDN路由器三个关键结构转发处理移动优先网络存在问题移动设备不断移动,在不同接入点上线,IP会改变[外链图片转存失败,源站可能有防盗链机制

2022-02-13 00:06:49 1526 1

原创 计网——网络安全

六、网络安全什么是网络安全机密性:只有发送方和预定的接受方能否理解传输的报文内容发送方加密报文接收方解密报文认证:发送方和接收方需要确认对方的身份报文完整性:发送方、接收方需要确认报文在传输过程中或者事后没有被改变访问控制和服务的可用性:服务可以接入以及对用户而言是可用的网络中的坏蛋加密原理对称密钥密码学:发送方和接收方的密码相同公开密钥密码学:发送方使用接收方的公钥进行加密,接收方使用自己的私钥进行解密对称密钥加密替换密码:将一个事情换成另外一个事情单码替换密码:将一个

2022-02-12 22:55:15 3926

原创 计网——链路层和局域网

五、链路层和局域网引导[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-squKKeti-1644576093426)(image-20220210135942899.png)]一个子网中的若干节点是如何连接到一起的点到点连接多点连接:共享型介质、通过网络交换机数据链路层和局域网导论和服务链路层导论上下文链路层服务成帧,链路接入在(一个网络内)相邻两节点间完成可靠数据传递流量控制使得相邻的发送方和接收方节点的速度匹配错误检测差错由信

2022-02-11 18:42:03 2245

原创 计网——网络层

四、网络层网络层服务在发送主机和接收主机之间对传送段(segment)在发送端将段封装到数据报中在接收端,将段上交给传输层实体网络层协议存在于每一个主机和路由器路由器检查每一个经过它的IP数据报头部网络层关键功能转发数据平面(实施怎么走)将分组从路由器的输入接口转发到合适的输出接口路由控制平面(决定怎么走)使用路由算法来决定分组从发送主机到目标接收主机的路径路由选择算法路由选择协议传统方式在每一路由器中的单独路由器算法原件,在控制平面进行交互SDN方式一个不同的

2022-02-09 16:07:51 2406

原创 计网——传输层

三、传输层传输层工作原理:多路复用/解复用可靠数据传输流量控制拥塞控制传输层协议:UDP:无连接传输TCP:面向连接的可靠传输TCP拥塞控制传输服务和协议为运行在不同主机上的应用进程提供逻辑通信传输协议运行在端系统发送方:将应用层的报文分成报文段,然后传递给网络层接收方:将报文段重组成报文,然后传递给应用层有多个传输层协议可供应用层选择Internet:TCP和UDP传输层VS网络层网络层服务主机之间的逻辑通信传输层服务进程间的逻辑通信依赖于网络

2022-02-03 13:42:11 1918

原创 计网——应用层

二、应用层应用层协议原理网络应用的原理:网络应用协议的概念和实现方面传输层的服务模型客户-服务器模式对等模式(peer-to-peer)内容分发网络网络应用的实例:互联网流行的应用层协议HTTPFTPSMTP/POP3/IMAPDNS编程:网络应用程序Socket API创建一个新的网络应用编程在不同的端系统上运行通过网络基础设施提供的服务,应用进程彼此通信网络核心中没有应用层软件网络核心没有应用层功能网络应用只在端系统上存在,快速网络应用开发

2022-01-18 18:35:54 4150

原创 计网——计算机网络和互联网

导论一、计算机网络和互联网网络:节点和边所构成(人际关系网、蜘蛛网、神经网)互联网(Internet):从构成角度看:节点(主机及其上运行的程序、路由器、交换机等网络交换设备)边【通信链路】(接入网链路:主机连接到互联网的链路;主干链路:路由器间的链路)协议协议协议定义了在两个或多个通信实体之间交换的报文格式和次序,以及在报文传输和/或接收或其他事件方面所采取的动作从具体构成角度上看:数以亿计、互联的计算设备(主机=端系统、运行的网络应用程序)通信链路(光纤、同轴电缆、无线

2022-01-18 18:33:25 2938

原创 针对原生JS、jQuery实现登录态而进行网络请求的封装

在这里我都使用了ES6新语法Class,这样会少很多代码(可以看作构造函数+原型链的语法糖)运用Get、Set函数对XHR进行简单的封装在每次请求前,添加Cookie相关属性,向Header中加入Token,然后对返回值先进行一边解析,因为我这里是服务端返回50001代表登录态失效如果失效我会直接将页面跳转到login,这里我使用replace,因为我不想让用户带着未登陆的状态回到应用内运用对obj对象的属性修改来封装jQuery-Ajax将创建实例所传的obj拿到,然后和对XHR进行封装一样,对

2021-10-31 17:15:03 470

原创 Vue + Webpack 学习笔记

Vue学习之旅 o( ̄▽ ̄)ブvue是一个渐进式框架可以将vue作为应用的一部分嵌入其中相关高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM引入方式1、CDN直接引入<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>或者:<!-- 生产环境版本,优化了尺寸和速度 -->

2021-09-28 19:17:36 5011

原创 JavaScript 最佳实践学习笔记

最佳实践可维护性协作开发中的代码量很惊人,大多数开发者会花大量时间去维护别人写的代码;让自己的代码更容易维护,可以保证其它开发者更好地完成自己的工作什么是可维护代码容易理解:无需求助原始开发者,任何人一看代码就知道干什么,以及怎么实现符合常识:代码中一切都显得顺理成章容易适配:即使数据发生变化也不用完全重写容易扩展:代码架构经过认真设计,支持未来的功能容易调试:出问题时代码可以给出明确信息编码规范编码规范对JavaScript而言非常重要,因为这门语言实在太灵活了1、可读性想要代码容

2021-08-31 17:17:49 239

原创 JavaScript 工作者线程学习笔记

工作者线程价值:允许把主线程的工作转嫁给独立的实体,而不会改变现有的单线程模型工作者线程简介JavaScript实际上是运行在托管操作系统中的虚拟环境;浏览器中每打开一个界面,就会分配一个它自己的环境;每个页面就相当于一个沙盒,不会干扰其它界面;所有的这些环境都是并行执行的使用工作者线程,浏览器可以在原始页面环境之外再分配一个完全独立的二级子环境,这个子环境不能与依赖单线程交互的API(如DOM)互操作,但可以与父环境并行执行代码工作者线程与线程工作者线程与线程有一些相似之处:​ 工作者线程是

2021-08-30 18:52:42 1044

原创 JavaScript 模块学习笔记

模块理解模块模式将逻辑分块,各自封装,相互独立,每个块自行决定对外暴露什么,同时自行决定引入执行哪些外部代码模块标识符模块标识符是所有模块系统通用的概念;模块系统本质上是键/值实体,每个模块都有个可用于引用它的标识符;这个标识符在模拟模块系统中可能是字符串,在原生实现的模块系统中可能是模块文件的实际路径原生浏览器模块标识符必须提供实际JavaScript文件的路径;除了文件路径,Node.js还会搜索node_modules目录,用标识符去匹配包含index.js目录模块依赖模块系统的核心是管

2021-08-25 23:20:58 268

原创 JavaScript 客户端存储学习笔记

客户端存储cookieHTTP cookie通常也叫做cookie,最初用于在客户端储存绘画信息;这个规范要求服务器在响应HTTP请求时,通过发送Set-CookieHTTP头部包含会话信息名和值在发送时都会经过URL编码;浏览器会储存这些会话信息,并在之后的每个请求中都会通过HTTP头部cookie再将它们发回服务器这些发送回服务器的额外信息可用于唯一标识发送请求到客户端限制cookie是与特定域绑定的;设置cookie后,它会与请求一起发送到创建它的域;这样可以保证cookie中储存的信息只

2021-08-25 23:20:21 572

原创 JavaScript 网络请求与远程资源学习笔记

网络请求与远程资源XMLHttpRequest,实际上是Web过时规范的产物,应该只旧版浏览器中使用;实际开发中应该尽可能使用fetch()AJAX—asychronous javascript and xmlAJAX 不是新的编程语言,而是一种使用现有标准的新方法AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下AJAX = 异步 JavaScript 和 XMLAJAX 是一种用于创建快速动态网页的技术XMLHttpRequest对象所有的现代浏览器都通过XM

2021-08-23 17:08:36 737

原创 JavaScript JSON学习笔记

JSON一种数据格式,本质是对象;它不属于JavaScript,只是拥有相同的语法语法JSON支持三种类型的值:​ 简单值:字符串、数值、布尔值和null;但是undefined不行​ 对象:键值对组成的数据类型​ 数组JSON没有变量、函数、对象实例的概念;JSON的所有标记都只是为了表示结构化数据,虽然它借用了JavaScript的语法,但是二者本质上有区别简单值最简单的JSON可以是一个数值,例如:5;还可以是一个字符串,例如:"hello"JavaScript字符串与JSON字符

2021-08-23 17:07:44 146

原创 JavaScript 处理XML学习笔记

处理XML浏览器对XML DOM的支持在正式标准问世前,很多浏览器就开始实现自己的XML解析方案,不同浏览器对标准的支持不仅有级别上的差异,也有实现上的差异;DOM Level 3增加了解析和序列化的能力;在DOM Level 3制定完成时,大多数浏览器也已实现了自己的解析方案DOM Level 2 Core12章中所述,DOM Level 2 增加了document.implementation的createDocument()方法,用于创建XML文档let xmldom = document.

2021-08-23 17:06:45 1549

原创 JavaScript 错误处理与调试学习笔记

错误处理与调试浏览器错误报告所有主流桌面浏览器都提供了向用户报告错误的机制;默认情况下,所有浏览器都会隐藏错误信息;因为除了开发者外这些信息对其他人没有什么用,还有就是网页在正常操作中报错的固有特性桌面控制台所有的现代桌面浏览器都会通过控制台暴露错误,不同浏览器进入控制台方式不一样,详情看红宝书p675移动控制台浏览器不会直接在移动设备上提供控制台界面错误处理有良好的错误处理策略可以让用户知道发生了什么;为此必须理解各种捕获和处理JavaScript错误方式try/catch语句ECMA

2021-08-23 17:05:53 434

原创 JavaScript API学习笔记

JavaScript APIWeb API数量之多令人难以置信,这里我们了解开发中常用的一些Atomics与SharedArrayBuffer多个上下文访问SharedArrayBuffer时,如果同时对缓冲区进行操作,可能出现资源争用问题Atomic API通过强制同一时刻只能对缓冲区执行一个操作,让多个上下文安全地读写一个SharedArrayBuffer;Atomic API是ES2017中定义(类似于操作系统的原语)SharedArrayBufferSharedArrayBuffer与A

2021-08-23 17:04:45 796

原创 JavaScript 表单脚本学习笔记

表单脚本表单基础Web表单在HTML中以form元素表示,在js中以HTMLFormElement类型表示HTMLFormElement类型继承自HTMLElement,但是它有自己的属性和方法:​ acceptCharset:服务器可以接收的字符集,HTML的accept-charset属性​ action:请求的URL,HTML的action属性​ elements:表单中所有控件的HTMLCollection​ enctype:请求的编码类型,HTML的enctype属性​ lengt

2021-08-14 14:40:45 266

原创 JavaScript 动画与Canvas图形学习笔记

动画与Canvas图形使用requestAnimationFrame早期定时动画早期动画就是使用setInterval()来控制动画的执行无论是setInterval()还是setTimeout()都是不能保证时间精度的。作为第二个参数的延时只能保证何时将代码添加到任务队列,不能保证添加到队列就会立即执行时间间隔的问题浏览器自身计时器会让这个问题雪上加霜,浏览器的计时器精度不足毫秒,以下是浏览器几个计时器精度情况:​ IE8及更早版本的计时器精度为15.625秒​ IE9及更晚版本的计时器精

2021-08-14 14:39:38 473

原创 JavaScript 事件学习笔记

事件事件流——事件冒泡流、事件捕获流事件流描述页面接收事件的顺序冒泡结构上(非视觉上)嵌套关系的元素会存在冒泡事件功能,及同一事件,子元素向父元素冒泡捕获IE没有将addEventListener第三个参数设置true结构上(非视觉上)嵌套关系的元素会存在捕获事件功能,及同一事件,父元素向子元素捕获DOM事件流DOM2 Event规范规定事件流分三阶段:事件捕获、到达目标、事件冒泡通常不认为到达目标后的事件处理阶段不属于事件捕获,而被认为是冒泡阶段的一部分现代浏览器会在捕获阶段在事件

2021-08-14 14:32:26 904

原创 JavaScript BOM学习笔记

BOM(Browser Object Model)window对象BOM的核心是window对象,表示浏览器实例window对象在浏览器中有两重身份,一个是es中的global对象,另一个是浏览器窗口的js接口网页中定义的所有对象、变量和函数都以window作为其Global对象,都可以访问其上定义的全局方法Global作用域所有通过var声明的全局变量和函数都会称为window对象的属性和方法窗口关系top:始终指向最上层窗口(最外层),即浏览器窗口本身parent:始终指向当前窗口的父

2021-08-13 18:17:09 312

原创 JavaScript DOM学习笔记

DOM(Document Object Model)dom提供了操作html和xml的机会,他是一个操作html和xml功能的一类对象的集合DOM的基本操作document代表整个文档NodeList,一种节点集合有item(x)方法(与NodeList[x]效果一样)HTMLCollection,HTML文档中的一种集合类型该集合是对元素的引用,也就是说不是元素的闪照有item(x)方法;有namedItem(name)方法,通过标签的name属性获取某一项的引用(可以直接用中括号使用如

2021-08-13 18:15:59 805

原创 JavaScript ECMAScript学习笔记

JAVASCRIPT语言(负责前端行为)· 解释性语言:JavaScript、php优点:跨平台逐行翻译成机械语言缺点:稍微慢· 编译性语言:c、c++优点:快通篇翻译成机械语言缺点:移植性不好(不跨平台)· oak语言:Java1、JavaScript是单线程2、ECMA标注:为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格JavaScript兼容于ECMA标准,因此也称为ECMAScript。

2021-06-11 14:42:23 867 2

原创 CSS学习笔记

CSS语言(负责前端样式)引入方法1、行间样式 <div style="...."></div> style中的就是css代码2、页面级 <style type="text/css"></style> 在head里编写(important)3、外部css文件 命名: abc.css 并在html的head里用link导入,如:<link rel="stylesheet" type="text/css" href="lesson4.css

2021-05-20 19:30:56 742

原创 HTML学习笔记

HTML语言(负责前端结构)lesson1-3hyperText markup language超文本标记语言一、根标签 结构化标签 head 配置文件,for browserbody 为可视化,面向用户<meta charset="utf-8">属性值必须加双引号charset 编码字符集gb2312 国家标准第2312条 包括亚裔字符集但不包括繁体中文gbk 国家标准扩展版本 包括繁体中文unicode 万国码-> utf-8 任何国家的语言都有&l

2021-05-20 19:24:53 131

原创 利用JS+JQuery写提示小组件

接着上一篇的文 利用JS+JQeury,来实现一个弹窗提示小组件,这里我就不多赘述了,有疑问可以在上篇查看相关结视组件JSclass Toast{ constructor(options){ this.options = options; this.init(); } self(){ return this.$showToast; } get template(){ let { title,typ

2021-03-23 00:07:22 288

原创 利用JS+JQuery写弹出层组件

利用JQuery写弹出层组件对于很多初学者来说,组件可以大大节省代码量,但是又没有接触过Vue以及其他框架,可以用js+JQuery完成,当然还可以添加css样式文件,有很大的自定义性,对于菜鸡的我来说还是很香的。组件大概分为两个文件:js和cssjs利用class模板化组件html代码以及open和close方法class SettingBox { //构造器,接收传参以及初始化dialog constructor(options) { this.options = o

2021-03-22 20:39:08 691 4

转载 HTML+CSS生成点击滑动块选择器

图片演示HTML代码每个选择项是一个单独的元素根据叠加顺序规定层级 后勤部元素z-index = 7除第一个元素外 每个块都向上偏移30个像素点击元素块时调用函数 将顺序作为参数传入<!-- 实际应用时使用数组进行for循环渲染 --><div class="selector"> <div class="items" style="z-index: 1;margin-top: 0;background-color: #B4D3EE;" onclick="onC

2021-03-18 10:33:19 941

PVSZ(Infinity).exe

和寝室的小伙伴写的一个~歪布巴布~的植物大战僵尸(无限版),至于为什么无限,玩下去就知道了,而且放置植物的那个脚本很不稳定,手残党劝退~ 如果要在失败前退出游戏,请按住Alt+F4 这个游戏除了图片是网上找的,其他东西:植物animation、僵尸animation、音效、bgm......全是我们自己创作的,呜呜呜

2021-10-31

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除