一个项目带来的学习

510 阅读7分钟

本来是想借着一个Vue项目复习一些知识,但因为复习知识不断的拓展,笔记也越记越多,期间看了很多大佬的文章,本着学习到的开源精神,把一些记录的笔记给一些可能需要的人。文章知识点可能有点琐碎,但我已经分好了大小标题,后续慢慢补充,再次感谢大佬们的文章

reset.css

  • 功能 :不同浏览器对相同标签的显示效果不同,所以我们需要重置css,在项目中达到不同浏览器显示效果相同的效果
  • 使用 :创建一个 css 文件,搜索reset css 将内容复制上去 ,在main.js中引用该文件

懒加载和预加载

预加载

作用

资源预加载是一个性能优化技术,在网页全部加载之前,先对一些主要内容进行加载,以提供更好的用户体验,减少等待空白的时间。否则,如果一个页面的内容过大,页面将会长时间处于空白加载状态,直到所有内容加载完毕。

实现

  1. 使用HTML标签
  2. 使用Image对象
  3. 使用XMLHttpRequest对象,虽然存在跨域问题,但会精细控制预加载过程

懒加载

作用

  1. 能提升用户的体验,如果一个页面内容很多,加载完需要很长时间难免降低用户体验
  2. 减少无效资源的加载,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。
  3. 防止并发加载的资源过多会阻塞js的加载,影响网站的正常使用。

原理

首先将页面上的图片src属性设为空字符串(或者javascript:;),而图片的真实路径设置在data-original属性中,当页面滚动的时候去监听scroll事件,在scroll事件的回调中,判断我们的懒加载图片是否可以进入可视区域,如果图片在可视区域内将图片的 src 属性设置为 data-orignal 的值,这样就可以实现延迟加载

实现

  1. 找轮子安装

  2. 在main.js引入 import

  3. 使用第三方组件需要use使用

    import def_lazy_img from "./assets/img/loading.gif"
    Vue.use(VueLazyload, {
    ​
     loading: def_lazy_img,
    ​
     //图片未加载出来时的默认图片
    ​
    })
    

fastclick

作用:手机存在双击页面放大功能,会存在有发送延迟 300ms 去除延迟

原理 :去除原本的浏览器默认点击实现(双击) 手动模拟实现 click 事件

实现 :

  1. npm安装

  2. import 引入

  3. 使用在main.js中

    fastclick.attach(document.body)
    

    绑定body( vue 是单页运用)

rem 与 em 的使用

区别

  • rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。

  • em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。

关于Ajax

感谢大佬的文章Ajax原理一篇就够了 (juejin.cn)

Ajax基础

什么是Ajax

Ajax 是一种异步请求数据的web开发技术,同于提升页面性能和用户体验。即在不需要重新刷新页面的情况下,Ajax通过异步请求加载数据,并在网页上呈现出来。就如下图的例子 领导接着做自己的事情,等秘书叫来小李后再听小李汇报工作,而不是叫秘书去叫小李后就停止自己的工作等小李来。会应用于表单提交,在文本框中给予输入提示,或者点击提交后页面不刷新,迅速出现更新后的结果

我们将 领导想找小李汇报工作这一流程看作Ajax请求的过程

img

img

Ajax 的请求步骤

var ajax = new XMLHttpRequest();
// 创建 XMLHttpRequest 对象
ajax.open('GET', url, true)
// 规定请求的类型 URL 是否异步处理请求
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 发送信息至服务器时内容编码类型
ajax.send(null);
// 发送ajax请求
ajax.onreadystatechange = function () {
  if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
  }
}

关于HTTP请求方式

GET 和 POST 的区别

  1. GET 是从服务器中获取数据 POST是向服务器推送数据
  2. GET 请求的参数会在 url 中看到 POST 请求的参数是添加到BODY中,在url中不可见
  3. 两请求的url 有长度限制,这个限制由浏览器和web服务器决定和设置。因为GET请求的参数是添加到url中,所以GET请求的长度限制要将参数的长度考虑进去
  4. GET请求会被浏览器缓存下来,POST不会
  5. GET请求的参数会被完整暴露在浏览器的历史记录中,而POST不会

PUT

向服务器存放一些内容

DELETE

删除服务器端的某些内容

HEAD

只想获取服务器返回的响应头信息,不要影响主题内容

OPTIONS

一般使用它向服务器发送探测性请求,如果有返回的信息说明建立了连接,可以继续执行其他请求

HTTP网络状态码具有代表性的 HTTP 状态码 (juejin.cn)

1XX:服务端已经收到信息但还未返回信息给客户端

2XX :成功 - 表示请求已被成功接收

200:客户端请求成功,服务器已经成功处理了请求

204:表示服务器接受的请求已经成功处理但在返回的响应中不含且不允许返回任何实体的主体

206:表示客户端的范围请求,故武器成功执行了这部分的GET请求

3XX :成功,但是已经重定向

301:请求的资源已经分配到一个新的URL ,即重定向

302:和301类似,但302代表的资源不是被永久的移动,只是临时性质的,临时重定向

304:表示自上次请求后,页面并未修改过,可以使用原来的缓存,即协商缓存

4XX : 客户端错误

400:客户端有语法错误,服务器不能理解

403:服务器拒绝请求

404:服务器找不到请求的网页

5XX : 服务端错误

500:服务器端在执行请求时发生错误

503:服务器暂时处于超负载或正在进行停机维护,无法处理请求

505:服务器不支持请求中的THHP协议版本

前端路由的实现原理

[文章](前端路由原理解析和实现 - 奔跑的太阳花 - 博客园 (cnblogs.com))

什么是前端路由

在服务端中路由描述的是URL与处理函数之间的映射关系关系,这种映射是单向的,即URL变化引起UI更新(无需刷新页面)

hash模式

hash 是URL中hash(#)及后面的那部分,hash的兼容性更好,但有#不够美观。

hash是使用 hashchange 事件来监听 URL 的变化,例如:浏览器的前进后退,标签改变URL,window.location改变URL

  1. class初始化路由
  2. 实现路由hash储存与执行
  • 2.1 将路由的hash以及对应的callback函数储存
  • 2.2 触发路由hash变化后,执行对应的callback函数
  1. 实例化class时监听事件

History模式

history 提供了 pushState 和 replaceState 两个方法来记录路由状态

history 提供类似 hashchange 事件的 popstate 事件,但 popstate 事件有些不同:通过浏览器前进后退改变 URL 时会触发 popstate 事件,通过pushState/replaceState或<a>标签改变 URL 不会触发 popstate 事件。好在我们可以拦截 pushState/replaceState的调用和<a>标签的点击事件来检测 URL 变化,所以监听 URL 变化可以实现,只是没有 hashchange 那么方便。

pushState(state, title, url)replaceState(state, title, url)都可以接受三个相同的参数:

state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取

title:标题,基本没用,一般传 null

url:设定新的历史记录的 url,新的 url 与当前 url 的 origin 必须是一样的,否则会抛错,url可以是绝对路径,也可以是相对路径。