前端知识突击

2024年5月21日 86次阅读 来源: 李默

JS判断对象中是否有某属性

  • 通过. 或者[]
let test = {
    name: 'leemo'
}

test.name 
test["name"]

test.age //undefined

可根据 Obj.x!== undefined 判断是否有该属性，但是不能判断属性存在且值等于undefined的情况

  • in

如果指定的属性存在于对象或原型链中，返回true

'name' in test //true

无法分辨该属性存在于本身还是原型链上

  • hasOwnProperty()
test.hasOwnProperty('name')

只能判断自身属性

node.js自己写服务器的方法

//引入http模块
var http = require("http");
//设置主机名
var hostName = '127.0.0.1';
//设置端口
var port = 8080;
//创建服务
var server = http.createServer(function(req,res){
    res.setHeader('Content-Type','text/plain');
    res.setHeader('Access-Control-Allow-Origin',"*")//解决跨域
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); //解决跨域
    res.end("hello world");
});
server.listen(port,hostName,function(){
    console.log(`服务器运行在http://${hostName}:${port}`);
});

在html代码中添加

  function getText(){
        $(".text").load("http:127.0.0.1:8080");
    }

即可用该页面请求我们写的web服务器
参考文档

React兄弟组件间通信

原理：先把一个子组件数据传输到父组件，通过父组件传输到另外一个子组件，实现兄弟件组件通信

*待续

react 16.0以后的生命周期函数

  • 钩子函数componentDidCatch 如果render()函数抛出错误，则会触发该函数
  • 16.3引入的两个全新的生命周期函数：
    getDerivedStateFromProps
    首先以前需要利用被删除的那些生命周期函数才能实现的功能，都可以通过 getDerivedStateProps 的帮助来实现。
    另外对于 React16 架构最大的变动就是 Fiber 了，在 Fiber 架构下启用了启用 async render 之后，render 之前的生命周期函数可能会被调用多次，如果在 componentWillMount 进行 AJAX 请求可能会导致无谓地多次调用AJAX。

其次在 React v16.3 刚发布这个函数的时候，getDerivedStateFromProps 这个生命周期函数，我在从它的名字来看的时候，还以为它主要是为了代替 componentWillReceiveProps 的，但进过了解后发现，这样说其实并不准确。因为 componentWillReceiveProps 只在因为父组件而引发的Updating过程中才会被调用。而getDerivedStateFromProps在Updating和Mounting过程中都会被调用。还需要注意的是，同样是 Updating 过程，如果是因为自身进行的 setState 或者 forceUpdate 所引发的渲染，getDerivedStateFromProps 也不会被调用。

那 getDerivedStateProps 究竟是啥东西呢？首先 getDerivedStateProps 生命周期函数是一个静态函数，所以函数体内不能访问this。


getSnapshotBeforeUpdate
这函数会在render之后执行，而执行之时DOM元素还没有被更新，给了一个机会去获取DOM信息，计算得到一个snapshot，这个snapshot会作为componentDidUpdate的第三个参数传入。

getSnapshotBeforeUpdate(prevProps, pr

  • 在17.0移除了三个生命周期函数
    componentWillMount
    componentWillReceiveProps
    componentWillUpdate
    即render之前的生命周期函数除了shouldUpdateComponent都被删除了

flex垂直水平居中

display: flex;
justify-content: center; /* 水平居中 */
align-items: center;     /* 垂直居中 */

generator co async

generator
特点
function*
可以使用yield返回多次

co模块思路
co 模块的思路就是利用 generator 的这个特性，将异步操作跟在 yield 后面，当异步操作完成并返回结果后，再触发下一次 next() 。当然，跟在 yield 后面的异步操作需要遵循一定的规范 thunks 和 promises。

sync优点
内置执行器。 Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。
更好的语义。 async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。
更广的适用性。 co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。

webStorage

LocalStorage/SessionStorage
**(LocalStorage&SessionStorage)&&Cookie: cookie服务端 webstorage服务于本地
1都是用来存储客户端临时信息的对象
2均只能存储字符串类型的对象
3LocalStorage的生命周期为永久，除非在浏览器上的UI清楚信息，否则永远存在
SessionStorage的生命周期为当前窗口/网页，一旦关闭该标签、窗口，存储的数据就被清空了
4不同浏览器不能共享L或者S的信息。
相同浏览器的不同页面（顶级窗口）可以共享相同的LocalStorage但是不能共享SessionStorage
如果是嵌入式框架(iframe) 则可以共享S信息
localStorage和sessionStorage使用时使用相同的API：
localStorage.setItem(“key”,”value”);//以“key”为名称存储一个值“value”
localStorage.getItem(“key”);//获取名称为“key”的值
localStorage.removeItem(“key”);//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息

websocket

https://www.jianshu.com/p/2ba…
它实现了浏览器和服务器全双工通信 建立在传输层上
它允许服务端向客户端传递信息，实现浏览器和客户端双工通信。
弥补了HTTP不支持长连接的特点
，，只建立一次连接 连接不会断 服务端有数据就会自动返回数据给客户端
因为是一次长连接 就不用一次次加入cookie
，，服务器和浏览器只需要做一个握手的动作，
然后在浏览器和服务器之间就形成了一条快速通道
两者之间就可以通过TCP连接直接交换数据
获取web socket连接后可以用过send（）方法向服务器发送数据
通过onmessage接受返回的数据

    原文作者：李默
    原文地址: https://segmentfault.com/a/1190000019322208
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞