前端学习总结
这学期进行了近2个月的前端学习,学习了html、css、js,同时还接触了前后端交互方式(ajax),以及接触了一些模块化开发、框架前置课(webpack、node),还了解了git代码管理工具。
html
首先web是b/s架构,在页面中,我们浏览的每个页面都是一个文档,多个页面构成了一个网站。
html就是超文本标记语言,是由一个个标签构成的。
标签有属性,分为行内块标签、块元素、行内元素。
大致分为:
排版标签、语义化标签、媒体标签、链接标签、列表标签、表单标签、框架标签、文本标签、状态标签。
其中 最重要的是 要写好一个版心,不要注意他标签默认的样式,要注重标签的语气。
css
css也是一种标记语言,可以美化页面。
全名层叠样式表,其中层叠体现在 不同元素的层级(文档流 先后顺序 浮动元素 定位元素 包含块。
分为行内样式 内部样式 外部样式 。
行内>内部=外部(实现代码复用性 结构样式分离 )
语法规范:选择器+声明块(多个声明组成)
选择器分为基本选择器和复合选择器
基本选择器:
通配选择器、
元素选择器、
类选择器、
id选择器
复合选则器:
交集选择器
并集选择器
后代选择器
子元素选择器
兄弟选择器
伪类选择器(动态伪类 结构伪类 否定伪类 ui伪类 目标伪类)
属性选择器
伪元素选择器
css三大特性: 层叠性、继承性、优先级
- 层叠性
概念:如果发生了样式冲突,那就会根据一定的规则(选择器优先级),进行样式的层叠(覆盖)。 - 继承性
概念:元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则:优先继承离得近的。
只要不跟盒子模型(不影响布局)相关 都能继承 - 优先级
!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 可以对代码版本进行管理,记录、切换、合并代码,还可以完成多人协同开发(远程仓库)。
经过这段时间的学习,我在慢慢进入互联网的世界中。
很羡慕那些代码大神,感觉他们是真的在和代码交流说话,同时也越发很期待我的代码学习之旅,希望接下来的时间,我能更快成长,能写出一些看得过去的东西。