文章15
标签3
分类5

被误导的面试

前端还是要多看看网络原理还有浏览器。
我上次在成都的面试,技术说他们是三件套引入vue.js,来构建项目,这样做是单页应用为了seo。
这句话误导了我很久,导致我做的不管是测试,还是常规项目我都是这样,三件套引入vue或者是react,众所周知不管是框架还是库,vue和react都用的虚拟dom,我觉得seo优化还是要模板渲染,后端渲染,你原生三件套引入还不是脱了裤子放屁。
我对于很多原理还是模模糊糊说不清楚,基础网络原理,还有浏览器渲染。
这是我手机上写的,格式不是很好,因为这几天在绵阳面试,也是打算做好躺平的准备,没过的话准备回家闭门沉淀沉淀自己。博客又准备开始迁移,我在使用 hexo,我做了一个hexo的主题,目前的话首页已经做好了,还有文章页,关于页,友情链接页,可以到我的 github看看,如果觉得主题好看的话可以点个star,或者提点建议,我修改。

五款精品推荐

image-20220627195052072.png#### Figma 介绍

Figma 是一款支持多人协作的在线设计工具。目前,使用 Figma 的核心人群是从事互联网产品研发的团队,他们使用 Figma 进行设计创作,包括产品原型设计、交互设计、UI 设计,以及设计协作,包括设计共创、审核、交付。

疫情让很多人只能居家办公,对于产品研发团队来说,产品经理、设计师和开发之间需要频繁沟通,远程交流很不方便,这个时候 Figma 多人在线协作的优势就发挥出来了,于是迅速流行开来,甚至直接超越了 Sketch,成为最受欢迎的 UI 设计工具。

汉化版

Clippy

Clippy是一个在线网址,如果你想用 css 写好看的动画那么你就需要它。cool

clippy

icons8

人如其名这是一个图标库,阿里的 iconfont 虽然图标很多,还有很多设计师上传的图标,给我的感觉都是一些 二次元,中二,Q版的图标,我觉得不好看,于是我找到了 icons8 支持中文,里面还有很多好用的工具图标插图照片音乐和设计工具。棒级了!!!

Devtools

小技巧,当我们在做移动端网页的时间,f12 审查看 Dom 总是很麻烦。

image-20220627195052072

我们点击三个小点选择图片蓝色的那个图标这样 审查就会以一个新窗口打开,方便我们调试。

idea许可证服务器

打开 https://search.censys.io/

然后搜索 services.http.response.headers.location: account.jetbrains.com/fls-auth

网址右边有导航栏点击 80/HTTP 80/HTTP Status Code 为302的网址

复制到 idea 激活不是百分百有用,可以多试几个。

前端 .等. 音视频流


场景:通过浏览器调摄像头麦克风传输流

我刚开始以为调摄像头麦克风api是 库里面的。

Call another peer by calling peer.call with the peer ID of the destination peer. When a peer calls you, the call event is emitted.

Unlike data connections, when receiving a call event, the call must be answered or no connection is established.

通过呼叫对等体呼叫另一个对等体。 使用目的对等体的对等体ID调用。 当一个对等方调用您时,会触发调用事件。

与数据连接不同,当接收呼叫事件时,呼叫必须被应答,否则不建立连接。

给我整迷了,JS 调摄像头 api 更换了

getUserMedia

getUserMedia 传的是个对象,audio,video,video可以控制宽高

=-=,浏览器只能一次调用摄像头,我以为我代码写错了,目前只能看到别人摄像头的流,或者我把我的流给别人,我再优化一下,部署到服务器到时候两个设备测试一下。。

.对.传送文件 前端下载保存

场景:测试传送一个图片 另一端接收保存

<input type="file" style={{display:'none'}} ref={this.refFile}/>

input上传文件,我们不设置样式,调它的 click 方法 然后我们 watch input的 change事件

current.files 这个就是文件类型了,

image-20220612150435422

它是一个类数组的对象,[0]就是文件了,那我们有这个文件对象那怎么发送给别人了???

我以前做过markdown上传图片但是它是走的后端,比如说图片一般就是转文件格式image-20220612151350866.png,后端处理了弄成 url 发给前端。

那我们不走后端,[0]那个类数组对象怎么来处理呢?怎么发送呢?我是这样处理的:

1.创建一个 formDate. 对象 formDate.append('file',[0]文件);

image-20220612151350866

2.当我们打印的时候发现它是一个空对象我们通过 它的 get方法 里面传的是 name 我这里就是 “file”

image-20220612151537400

  1. 这时候其实可以做很多比如说缩率图 就是我们比如上传图片,将图片展示到那里。
  2. 然后我们 new File
  let FileTs = new File([files],file.name,{
            type:files.type});
   例子
  var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
   [传的就是 formdata 的对象,foo.txt:名字:type:类型]
});

这时候我们得到个 File 类型

  1. 我们通过new FileReader 里面的.onload 它是回调函数我们要传 file 返回值就是base64字符串我们可以通过这些字符串来展示缩率图
  2. 我这里是传到另外一端那传过去我们怎么 base64 下载保存呢?
  3. 我刚开始直接复制 base64 通过浏览器 url 的方式能看到我的图片,我以为就直接发送过去之后我直接创个 a标签 href里面是 base64 直接 click 就行了,没想到不行 Chrome 禁止从页面打开 Data URI 网址了,这篇文章叫我迁移到后端生成。我寻思我都 .对. 了为啥还要走后端啊,解决办法
  4. 我们现在已经有了 base64 还是通过 file 对象转换的,那我们另一端直接转回来不就好了,说干就干。
  5. base 64 转 Blob

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
    1. 通过 URL.createObjectURL() 这里面传的是 blob 对象,接收一个 url 这个时候我们就可以下载保存了
        let  blod =  dataURLtoBlob(content);
        let a =  document.createElement('a');
       let url = URL.createObjectURL(blod)
       
        a.href = url;
        a.download = blod.type;
        a.click();
     

我的图片已经成功从另一客户端发送与接收到了!
image-20220612151537400

React defaultValue && setState的问题

场景

我在做一个类似 p2p 好友发送信息的场景 B连接到A之后,将 defauleValue 值改变

我控制了 input 不可输入 和 默认值 连接之后改变成可输入默认值修改。

问题:可输入解决了,默认值没变 :我刚以为是 useState 的问题

react 为了提高整体的渲染性能,会将一次渲染周期中的 state 进行合并,在这个渲染周期中你对所有setState的所有调用都会被合并起来之后,再一次性的渲染,这样可以避免频繁的调用setState导致频繁的操作dom。于是我写了 useState 回调

 setWait((wait)=>wait = false);
 setWaitTitle((waitTitle)=>waitTitle = '开始发送信息吧');

事实证明还是不行,与是我觉得是 defaultValue 的问题,都知道 react 的受控表单控件 其实 defaultValue 是 react库自己的属性,我一直以为是原生属性 所以 react 为处理这样的问题让我们为元素加 key

 <textarea id="comment" ref={refValue} disabled={wait} defaultValue={waitTitle} key={waitTitle} rows="1"></textarea>

现在就成功解决了

">