HTTP跟学笔记
HTTP正经人谁学HTTP啊
初识
什么是HTTP?
协议分析变化
分析以HTTP/1.1为例:
1.Method常见
特点
Safe安全:不会修改服务器的数据的方法
GET HEAD OPTIONS
Indempotene幂等:同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的,所有的safe的方法都是幂等的
GET HEAD OPTIONS PUT DELETE
2.状态码常见
RESTful APIRepresentational State Transfer(REST)ful API
一种API设计风格
特点
每个URI代表一种资源
客户端和服务器之间,传递这种资源的某种表现层
客户端通过HTTP method,对服务器端资源进行操作,实现“表现层状态转化”
举例
3.请求头常用请求头
4.缓存强缓存/协商缓存
优先级/流程
5.cookieSet-Cookie -response
HTTP/2概述更快更稳更简单
一些名词
帧:HTTP/2通信的最小单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流
二进制 极大提高效率
压缩算法 ...
TS跟学笔记
TS正经人谁学TS啊
发展历史
2012-10:微软发布了TypeScript第-个版本(0.8)
2014-10:Angular2发布了基于TypeScript的2.0版本
2015-04:微软发布了Visual Studio Code
2016-05:@types/react?发布,TypeScript可开发React
2020-09:ue发布了3.0版本,官方支持TypeScript
2021-11:v4.5版本发布
为什么TS和JS的比较
JS
TS
动态类型
静态类型
弱类型语言
弱类型语言
动态类型在执行阶段才确定类型的匹配。编译在执行时
静态类型提前确定类型匹配。编译在执行前
弱类型语言数据类型可以被忽略的语言=>一个变量可以赋不同的数据类型的值。
强类型语言强制数据类型定义的语言=>一个变量被指定了某个数据类型,如果不经过强制转换,永远是这个类型=>一个类型的变量不会被当成另一种类型处理,(强类型定义语言是类型安全的语言)
TS优势静态类型
可读性增强:基于语法解析TSDoc,ide增强
可维护性增强:在编译阶段暴露大部分错误= ...
JS跟学笔记
JS正经人谁学
一、本堂课重点内容:(如何写好JS↓)
JS编码原则
各司其责
组件封装(课程内容属实强,要花很长时间消化)
过程抽象
Left-pad事故背景引入
JS代码质量优化
二、详细知识点介绍:JS编码原则-各司其职
让HTML、CSS、JS职能分离
举例-深夜食堂的明暗模式modeHTML代码
CSS代码
码上掘金链接
总结
三者各司其责
避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示交互寻求零JS方案
JS编码原则-组件封装
好的UI组件具备正确性、扩展性、复用性
举例-原生JS电商网站轮播图原型轮播图-原型
HTML-结构
CSS-表现
JS-行为(功能API、控制流Event)
重构-插件化轮播图-插件化
解耦
将控制元素抽成插件
插件与组件之间通过依赖注入方式建立联系
重构-模块化轮播图-模块化
解耦
将HTML模板化,更易于扩展
抽象
将组件通用模型抽象出来,组件框架
总结组件设计原则
封装性
正确性
扩展性
复用性
实现组件的步骤
结构设计
展现效果
行为设计
三次重构
模块化
模板化
抽象化(组件框架-组件是 ...
CSS跟学笔记
CSS正经人谁学CSS啊
一、本堂课重点内容:
了解CSS(是什么、如何使用、如何工作、一些重要属性键值、如何调试)
深入了解CSS(哪条规则生效、选择器特异度、CSS求值过程、CSS继承、布局、块级与行级)
二、详细知识点介绍:走进前端技术栈-CSS什么是CSS
Cascading Style Sheets
用来定义页面元素的样式(字体、位置、动画效果等)
CSS组成
选择器Selector
属性Property
属性值Value
声明Declaration 🌰: selector { property: value; (声明语句) }
CSS使用内联、嵌入、外链
CSS的工作
选择器找出页面中的元素,以便给他们设置样式。
使用多种方式选择元素:按照标签名、类名或id,按照属性,按照DOM树中的位置
选择器类型
通配选择器 🌰:* {color:red; font-size: 20px}
标签选择器
id选择器
类选择器(可出现多次,常用)
属性选择器
属性🌰:<input value="haha&q ...
HTML跟学笔记
HTML正经人谁学HTML啊
一、本堂课重点内容:
HTML基本标签、属性、属性值
HTML语义化
二、详细知识点介绍:HTML: TyperText Markup Language
HTML基本标签序列<ol><li>序号排列</li></ol>
<ul><li>无序号排列</li></ul>
<dl><dt>描述列表标题</dt><dd>具体元素1</dd><dd>具体元素2</dd></dl>
链接<a href="" target="_blank">这_blank属性是让在新的页面中打开链接</a>
图片<img src="" alt="降级文字"/>
音频<audio src="" controls(默认显示)></audio> ...
Vite跟学笔记
Vite跟学笔记正经人谁学Vite啊
Vite系列课程前言冰山一角
Vite: 思维比较前卫而且先进的构建工具 他确实解决了一些webpack解决不了的问题, 同时降低了一些心智负担
已经有一些大厂在使用Vite去构建项目
Vite基于自己得天独厚的优势, 他未来一定会占有一席之地 前段时间阿里的面试已经在问Vite了
Vite是Vue团队的官方出品, 背靠这么大的生态, Vue-cli会在下面两个版本中将vite作为预设构建工具
未来你使用vue-cli去构建vue项目的时候你要写的vue.config.js不再是webpack的配置而是vite的配置(目前只基于浏览器项目)
Vite也支持直接构建react项目, 也支持构建angular项目, svelte项目也支持构建
学习模块
什么是构建工具?
webpack的一个缺点在哪
es module的规范
vite他到底是什么东西
vite的基本安装和使用
vite的编译结果
vite编译结果的分析
vite的配置文件(可能会有节课程)
vite中处理css, 静态资源怎么去做
vite的插件以及常用插件的使用
...
好面的糖炒栗子
好面的糖炒栗子!坚持打基础、提素质!好好笔试面试!
💻浏览器✅从在地址栏输入url地址到页面渲染的详细过程MDN原文 原文嵌套原文,建议大家好好看一下。我爱MDN
这一段过程主要分为五个阶段,分别是:导航、响应、解析、渲染、交互
导航首先在浏览器中输入URL
查找缓存浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面,如果有则显示页面内容。如果没有则进行下一步。
浏览器缓存:浏览器会记录DNS一段时间,因此,只是第一个地方解析DNS请求;
操作系统缓存:如果在浏览器缓存中不包含这个记录,则会使系统调用操作系统, 获取操作系统的记录(保存最近的DNS查询缓存);
路由器缓存:如果上述两个步骤均不能成功获取DNS记录,继续搜索路由器缓存;
ISP缓存:若上述均失败,继续向ISP搜索(ISP本身是一种宽带接入提供商给网页批量访问加速的技术。 ISP会将当前访问量较大的网页内容放到ISP服务器的缓存中,当有新的用户请求相同内容时,可以直接从缓存中发送相关信息,不必每次都去访问真正的网站,从而加快了不同用户对相同内容的访问速度,同时也能节省网间流量结算成本)。
...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
自我介绍
前端开发工程师