前端知识突击

hearaway 发布于2019-08-02 15:11 / 3011人阅读

摘要：清空中所有信息它实现了浏览器和服务器全双工通信建立在传输层上它允许服务端向客户端传递信息，实现浏览器和客户端双工通信。

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

通过. 或者[]

let test = {
    name: "leemo"
}

test.name 
test["name"]

test.age //undefined

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

如果指定的属性存在于对象或原型链中，返回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接受返回的数据

云服务器 GPU云服务器前端知识前端知识阿里云 html前端知识前端开发基础知识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53952.html

前端知识突击

摘要：清空中所有信息它实现了浏览器和服务器全双工通信建立在传输层上它允许服务端向客户端传递信息，实现浏览器和客户端双工通信。 JS判断对象中是否有某属性通过. 或者[] let test = { name: leemo } test.name test[name] test.age //undefined 可根据 Obj.x!== undefined 判断是否有该属性，但是不...

ShevaKuilin 2019-08-26 13:58 评论0 收藏0
前端知识突击

摘要：清空中所有信息它实现了浏览器和服务器全双工通信建立在传输层上它允许服务端向客户端传递信息，实现浏览器和客户端双工通信。 JS判断对象中是否有某属性通过. 或者[] let test = { name: leemo } test.name test[name] test.age //undefined 可根据 Obj.x!== undefined 判断是否有该属性，但是不...

yagami 2019-08-30 11:00 评论0 收藏0
初学者福音！可能是最适合你的Java学习路线和方法推荐。

摘要：学习完多线程之后可以通过下面这些问题检测自己是否掌握，下面这些问题的答案以及常见多线程知识点的总结在这里。可选数据结构与算法如果你想进入大厂的话，我推荐你在学习完基础或者多线程之后，就开始每天抽出一点时间来学习算法和数据结构。我自己总结的Java学习的系统知识点以及面试问题，已经开源，目前已经 35k+ Star。会一直完善下去，欢迎建议和指导，同时也欢迎Star： https://...

yanest 2019-08-16 17:28 评论0 收藏0
20W字囊括上百个前端面试题的项目开源了

摘要：字囊括上百个前端面试题的项目开源了这个项目是什么项目内容这个项目目前在上刚刚开源主要内容如下前端面试题主要整理了高频且有一定难度的前端面试题对这些面试题进行解读前端原理详解针对一些有一定难度面试题涉及的知识点进行详解比如涉及的编译原理响应式 20W字囊括上百个前端面试题的项目开源了这个项目是什么? 项目内容这个项目目前在GitHub上刚刚开源,主要内容如下: 前端面试题: 主要整...

Euphoria 2019-08-26 10:49 评论0 收藏0
作为一技术人员，面试前都需要做哪些准备？

摘要：部分公司会存在其他部门领导，例如腾讯在较高级别岗位面试时，跨部门的交叉面试，面试内容与三面基本相同。如何在面试时稳定发挥一面试考查点是可以在短期内突击的，也是面试前需要重点准备的内容。 showImg(https://segmentfault.com/img/remote/1460000019309535); showImg(https://segmentfault.com/img/r...

chengtao1633 2019-08-16 17:42 评论0 收藏0