网页知识总结

最新推荐文章于 2024-03-18 12:09:27 发布

七灵微

最新推荐文章于 2024-03-18 12:09:27 发布

阅读量235

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41775119/article/details/84729910

版权

前端专栏收录该内容

60 篇文章 0 订阅

订阅专栏

setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。

setTimeout()只执行一次，而setInterval可以多次调用。
————————————————
版权声明：本文为CSDN博主「mayue24」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mayue24/article/details/80879685

dva及异步请求问题
https://blog.csdn.net/qq_38719039/article/details/80566766

关于localstorage存取及调试中出现{object Object}的情况
https://blog.csdn.net/she8362315/article/details/82900662

promise及[[PromiseValue]]
https://segmentfault.com/q/1010000010670739

	axios.get('http://dailyreport.lyzwhh.top/report/weeklyFrequency',{
                 headers:{
                   'token':JSON.parse(localStorage.getItem("data")).tokenStr } 
             }).then(
                 function(res){
                     console.log(res);
                 }
             )

axios({
  method: 'post',
  url: 'http://154.8.214.49:8080/yzzh/login',
  data: {
    login_name: "13933528963",
    password: "maoqiu...",
    login_type: "yzzh"
  }
}).then(res => {
  alert("succ");
  console.log(res);
  localStorage.setItem("token",res.data.data.token)
});

webstorage
webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage

localStorage
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

localStorage.getItem("key");//获取名称为“key”的值

localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();//清空localStorage中所有信息

实现不使用border画出1px高的线，在不同浏览器的标准模式和怪异模式下都能保持一样的效果。
div、hr（height=“1px”）、hr（size=“1”）

描述HTTP POST GET工作原理及区别？
https://blog.csdn.net/chen_changying/article/details/80117702

描述cookies sessionStorage localStorage 区别？
相同点：都存储在客户端
不同点：
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie其它缺点：
安全性问题：由于在HTTP请求中的cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的。
网络负担：我们知道cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。

页面导入样式时link与@import有什么区别？
https://blog.csdn.net/qq_41155191/article/details/82796626

在这里插入图片描述

总结get和post区别—面试用
转自https://www.cnblogs.com/longm/p/7205318.html?utm_source=itdadao&utm_medium=referral

get参数通过url传递，post放在request body中。

get请求在url中传递的参数是有长度限制的，而post没有。

get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

get请求只能进行url编码，而post支持多种编码方式

get请求会浏览器主动cache，而post支持多种编码方式。

get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET产生一个TCP数据包；POST产生两个TCP数据包。
长的说：

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

（据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。）

在subline里面批量替换某名，选中，ctrl+d

redux中间件是啥？

applyMiddleware的功能：改造dispatch函数，产生真假dispatch，而中间件就是运行在假真（dispatchAndLog假和next真）之间的代码。它只是一个用来加工dispatch的工厂，而要加工什么样的dispatch出来，则需要我们传入对应的中间件函数

react只能兼容到最低IE8
在这里插入图片描述
这里的 delay，是我这边写的一个延时的函数，我们在 utils 里面编写一个 utils.js ，一般请求接口的函数都会写在 servers 文件夹中。
export function delay(timeout) {
return new Promise((resolve) => {
setTimeout(resolve, timeout);
});
}

接着我们在 models/example.js 导入这个 utils.js
import { delay } from ‘…/utils/utils’;

要做到gif里面的效果，我们应该在effect中发送一个关于添加的action，但是我们在effect中不能直接这么写：
effects: {
*add(action, { call, put }) {
yield put({ type: ‘add’ });
yield call(delay, 1000);
yield put({ type: ‘minus’ });
},
},

因为如果这样的话，effect与reducers中的add方法重合了，这里会陷入一个死循环，因为当组件发送一个dispatch的时候，model会首先去找effect里面的方法，当又找到add的时候，就又会去请求effect里面的方法。

我们应该更改reducers里面的方法，使它不与effect的方法一样，将reducers中的add改为add1

链接：https://www.jianshu.com/p/e184cd6d253c
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

一个class里面只有render函数称为无状态组件
可以变为
const 类名 = (props) => {
return(
把return里的东西粘贴到这里来
然后把this.props替换成props
);
}
作用：提升性能

制作假数据
public/api/headerList.json
要跟接口地址对应它会替换作为数据
如：

export const getList = () => {
	return (dispatch) => {
	axios.get('/api/headerList.json').then((res) =>{
	
	}).catch(()=>{
		console.log('error');
		})
	}
};

api/headerList.json
{
"success":true,
"data":["高考","区块链"];
}
//JSON名身为字符串必须用双引号包裹不然会报错

2.Web 标准的制定者是？
万维网联盟（W3C）
3.在下列的 HTML 中，哪个是最大的标题？
正确答案：< h1 >
5.在下列的 HTML 中，哪个可以添加背景颜色？
正确答案：< body bgcolor=“yellow”>
6.请选择产生粗体字的 HTML 标签：
正确答案：< b>
7.请选择产生斜体字的 HTML 标签：
正确答案：< i>
17.在下列的 HTML 中，哪个可以产生下拉列表？
正确答案：< select>
20.在下列的 HTML 中，哪个可以插入背景图像？
正确答案：< body background=“background.gif”>

1.CSS 指的是？
正确答案：Cascading Style Sheets
8.哪个属性可用于改变背景颜色？
正确答案：background-color
14.如何使文本以大写字母开头？
正确答案：text-transform:capitalize
19.请判断以下说法是否正确：如需定义元素内容与边框间的空间，可使用 padding 属性，并可使用负值？
正确答案：错误
20.如何产生带有正方形项目的列表？
您的回答：list-style-type: square

3.插入 Javacript 的正确位置是？
正确答案：< body> 部分和 < head> 部分均可
5.外部脚本必须包含 < script> 标签吗？
正确答案：否
11.在 JavaScript 中，有多少种不同类型的循环？
正确答案：两种。for 循环和 while 循环。
16.如何把 7.25 四舍五入为最接近的整数？
正确答案：Math.round(7.25)
18.打开名为 “window2” 的新窗口的 JavaScript 语法是？
正确答案：window.open(“http://www.w3school.com.cn”,“window2”)
19.如何在浏览器的状态栏放入一条消息？
您的回答：window.status = “put your message here”

在这里插入图片描述