前端学问突击

2024年5月27日 234次阅读 来源: 李默

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞