前端学习-大一

前端学习总结

---

这学期进行了近2个月的前端学习，学习了html、css、js，同时还接触了前后端交互方式（ajax），以及接触了一些模块化开发、框架前置课（webpack、node），还了解了git代码管理工具。

html

首先web是b/s架构，在页面中，我们浏览的每个页面都是一个文档，多个页面构成了一个网站。
html就是超文本标记语言，是由一个个标签构成的。
标签有属性，分为行内块标签、块元素、行内元素。
大致分为：
排版标签、语义化标签、媒体标签、链接标签、列表标签、表单标签、框架标签、文本标签、状态标签。
其中 最重要的是 要写好一个版心，不要注意他标签默认的样式，要注重标签的语气。

css

css也是一种标记语言，可以美化页面。
全名层叠样式表，其中层叠体现在 不同元素的层级（文档流 先后顺序 浮动元素 定位元素 包含块。
分为行内样式 内部样式 外部样式 。
行内>内部=外部（实现代码复用性 结构样式分离 ）
语法规范：选择器+声明块（多个声明组成）
选择器分为基本选择器和复合选择器
基本选择器：
通配选择器、
元素选择器、
类选择器、
id选择器
复合选则器：
交集选择器
并集选择器
后代选择器
子元素选择器
兄弟选择器
伪类选择器（动态伪类 结构伪类 否定伪类 ui伪类 目标伪类）
属性选择器
伪元素选择器
css三大特性： 层叠性、继承性、优先级

1. 层叠性
   概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。
2. 继承性
   概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
   规则：优先继承离得近的。
   只要不跟盒子模型（不影响布局）相关 都能继承
3. 优先级
   !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样
   式。 计算权重
   其中 css属性大致分为：
   文本相关（基线对齐 阴影 溢出）
   字体相关
   列表相关
   表格相关
   背景相关
   鼠标相关
   盒子模型
   其中盒子模型（怪异盒模型 flex布局）涉及到了阴影 边框
   浮动 （清除浮动 ）
   定位（相对 绝对 粘性 固定）
   2d 3d 转换
   渐变
   过渡 动画 （在做个人介绍 demo的时候有所利用）
   多列布局 响应式布局（涉及到媒体查询）
   其中完成了一个尚品汇的项目（html+css）

javasript

JavaScript是一门解释型语言，Java也是一门面向对象的语言，但是JavaScript是基于原型的面向对象。
基于浏览器的v8引擎环境，浏览器才能识别编译js，同时，我们可以通过node.js，它也提供了v8引擎，所以我们也能在node环境下运行js。
js可以编写在script标签、指定的属性（href 事件）、还有js文件（引入时，加入defer，可以最早在文档加载完成后执行）
js有字面量和变量，变量可以对字面量进行描述。
数值类型分为 原始值和复杂类型
原始值：
1.数值 Number
2.大整数 BigInt
3.字符串 String
4.布尔值 Boolean
5.空值 Null
6.未定义 Undefined
7.符号 Symbol
复杂类型：
对象
数组
其他内置类、包装类（map set date math String Number Boolen BigInt Symbol）
还有浏览器对象模型（bom）文档对象模型（dom）
运算的时候 会进行类型隐士转化
显性类型转化：String（）Number（）…
流程控制与c++差不多
关于函数：
如果是调用函数的方式调用 则this指向window
如果是调用方法 则指向调用的对象
在es6中 有一个箭头函数，他没有this指向，
他由外部作用域决定。
函数在作用域，在函数创建时就已经确定的（词法作用域）
和调用的位置无关
利用词法作用域可以创造 闭包
可以通过apply bind call 为函数绑定this。
在面向对象的思想中，js也是封装、继承（原型）、多态。
关于数组、对象的复制：
浅复制 数组用slice 对象object.assgin。
深复制 structuredClone 对象还可以用josn来实现
const str = JSON.stringify(obj)
const obj2 = JSON.parse(str)
关于json（JavaScript Object Notation）
对象转换为字符串后，可以将字符串在不同的语言之间进行传递，甚至人可以直接对字符串进行读写操作，使得JS对象可以不同的语言之间传递
正则表达算机可以检查一个字符串是否符合规则、将字符串中符合规则的内容提取出来。
new RegExp test（）、exec（）
Dom
通过dom可以操作网页
在网页中，所有部分都是一个节点，通过document对象可以获得节点，对节点进行增删改操作，从而修改页面内容 css样式。
事件：
可以将事件绑定响应函数，实现用户与页面交互、
事件分为3个过程：
1.捕获阶段 （由祖先元素向目标元素进行事件的捕获）（默认情况下，事件不会在捕获阶段触发）
2.目标阶段 （触发事件的对象）
3.冒泡阶段 （由目标元素向祖先元素进行事件的冒泡）
事件还可以通过委派，将本该绑定给多个元素的事件，统一绑定给document，这样可以降低代码复杂度方便维护
BOM

• 浏览器对象模型
• BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作
  • BOM对象：
  • Window —— 代表浏览器窗口（全局对象）
  • Navigator —— 浏览器的对象（可以用来识别浏览器）
  • Location —— 浏览器的地址栏信息
  • History —— 浏览器的历史记录（控制浏览器前进后退）
  • Screen —— 屏幕的信息
• BOM对象都是作为window对象的属性保存的，所以可以直接在JS中访问这些对象
  到此 还完成了一ge贪吃蛇demo

框架前置知识

ajax

ajax === async javascript and XML
能实现前后端交互 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的工具
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。（局部更新技术）
默认异步执⾏机制的功能,
AJAX分为同步（async = false）和异步（async = true）
使用：
创建 ajax 对象
使⽤ ajax 对象的⽅法去发送请求和接受响应
const xhr = new XMLHttpRequest()
xhr.open(‘get’, ‘./data.php’)
xhr.send()
请求之后，readyState = 4 的时候，我们才可以正常使用服务端给我们的数据
请求参数：
get
post（ 无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）

基于promise 包装的axios
Axios（ajax i/o system）：
这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端。
axios可以请求的方法：
get：获取数据
post：向指定资源提交数据（例如表单提交或文件上传）
put：更新数据
patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
delete：请求服务器删除指定的数据
还可以设置拦截器 （请求拦截器 相应拦截器 取消拦截器）
代码实现：

axios.interceptors.request.use(config=>{
				// 发生请求前的处理

				return config
			},err=>{
				// 请求错误处理

				return Promise.reject(err);
			})


axios.interceptors.response.use(res=>{
				//请求成功对响应数据做处理

				return res //该返回对象会传到请求方法的响应对象中
			},err=>{
				// 响应错误处理

				return Promise.reject(err);
			})

跨域问题
首先 同源策略是如果两个url协议、主机地址、端口都相同，那么这两个url是同源，否则就是非同源，故而引起了跨域问题（Ajax请求无效，请求可以发送，服务器也会处理这次请求，但是响应结果会被浏览器拦截
违反了同源策略的请求，叫做跨域请求。）
解决方法：
JSONP:script标签没有同源问题，利用script标签里的src属性指定服务端，服务端返回一个函数的调用，把要传的数据放在函数的实参中，然后在客户端准备这个函数的定义。

node

Node全称NodeJS，是一个基于Chrome V8引擎的JavaScript运行环境，能让JavaScript 运行在服务端的开发平台，是建立在谷歌V8引擎的用来解析和执行js代码的运行环境。（可以实现js脱离浏览器运行）
其中 npm是node的软件包管理工具
关于包：
分为软件包和项目包
是把模块、代码等资料整合到一块的文件夹
模块化：
每个文件都是一个模块
模块之间通过导入导出联系
有内置模块 也可以自定义模块
node的作用：
可以快速构建 API 接口项目
读写和操作数据库、创建实用的命令行工具辅助前端开发（比如webpack打包工具）
创建一个简单的本地服务器
1.引入http模块

const http = require('http');

2。创建http服务

const server = http.createServer();

3.服务请求响应事件
4.服务连接端口

webpack

是node的三方库，是 javascript 应用程序的 静态模块打包器 (module bundler)
将静态模块内容压缩整合，实现前端工程化，同时 为vue脚手架做铺垫。

git

git是一个分布式版本控制系统，可以处理管理项目。
分布式：
从主仓库拉取一份代码下来后，无需担心主仓库被删或者找不到的情况，可以在本地回滚，提交，把代码提交到主仓库时，只需要合并推送到主仓库，同时可以把代码新建一份仓库分享给他人。
包括工作区 暂存区 版本库
常用命令：
git branch 查看本地所有分支
git status 查看当前状态
git commit 提交
git branch -a 查看所有的分支
git branch -r 查看远程所有分支
git commit -am “init” 提交并且加注释
git push origin master 将文件给推到服务器上
git push origin master:hb-dev 将本地库与服务器上的库进行关联
git checkout --track origin/dev 切换到远程dev分支
git branch -D master d 删除本地库d
git checkout -b dev 建立一个新的本地分支dev
git merge origin/dev 将分支dev与当前分支进行合并
git checkout dev 切换到本地dev分支
git remote show 查看远程库
git add .
git rm 文件名(包括路径) 从git中删除指定文件

利用git 可以对代码版本进行管理，记录、切换、合并代码，还可以完成多人协同开发（远程仓库）。

---

经过这段时间的学习，我在慢慢进入互联网的世界中。
很羡慕那些代码大神，感觉他们是真的在和代码交流说话，同时也越发很期待我的代码学习之旅，希望接下来的时间，我能更快成长，能写出一些看得过去的东西。