cles's blog

面试焦虑、紧张、期待第一次面试，面了十多分钟，面试官正好就是进入公司实习后带我的领导，我以为这份实习已经石沉大海了，但是并没有，这家小公司给了我一个机会。五一假期之前收到了实习通知书。我既开心又忐忑，因为在这之前没有真真正正的接触社会，一直生活在校园的象牙塔中，这次要一个人面对工作、生活上的琐事。 生活尝试一个人租房子我这个人一直这样，当第二天有一些激动人心的事情，我会胡思乱想一整夜睡不着————比如即将一个人单枪匹马去一个陌生的地方独自生活。我不敢想象这有多么爽(因为比较喜欢安静，在宿舍被折磨坏了)，果不其然，当天到南京在去看出租屋的公交上睡了好久，都不知道坐过了多少站。 因为是一家小厂，我不确定入职之后会有一些什么非人的要求，当初计划是先不租房子，避免入职后自己无法接受这个岗位。 先是在酒店住了两个晚上，入职的前两天基本上没什么事情，都是在熟悉项目，改一些不起眼的 bug，节奏还算很舒服。自己也很快的融入到工作当中，融入这个办公室中。随后就是寻找一个比较好的地段暂时住下，我发现这个过程还是挺锻炼人的。后来的两天，我都在找房子，先是在手机软件上看，然后约线下看房，好在当时已经意识到通 ...

记录一下前端布局的知识点在实际需求当中，最常见的布局需求就是各种各样的居中，水平居中、垂直居中、水平垂直居中，我常常记不住，然后又去翻文档(说白了就是代码写少了>_<)。不 bb 了，直接上代码吧 margin 0 auto + 绝对定位123456789101112131415161718192021222324252627282930<style> * { padding: 0; margin: 0; box-sizing: border-box; } .container { position: relative; width: 80%; height: 400px; margin: 0 auto; background-color: red; } .box { position: absolute; width: 50%; background-color: yellow; height: 50%; left: 50% ...

何谓“链”链表？链条？在 JavaScript 中都不是JavaScript 中的每一个对象都有一个特殊的内置属性[[Prototype]]可以通过__proto__进行访问。他指向的是一个原型对象。当我们访问一个对象的某个属性的时候，如果对象本身没有这个属性，就会向其原型查找，如果找到了就停止，如果没找到则为undefined(未定义),比如当我们 new 一个对象,我们根本就没有定义 toString 方法呀,但是它就在那里,不在这个对象身上,在它的原型链上！ Function? Object? 你是谁？先看一段代码 1console.log(Function.__proto__ === Object.__proto__) 猜猜会输出什么，查看答案 true在 JavaScript 里面，万物皆对象，所以函数也是对象，它叫做函数对象,所以一个函数身上会有__proto__这个属性就不奇怪了。 然而，在学习的过程中，函数不仅仅有__proto__这个属性，还有另外一个属性prototype,这两个又有什么区别呢？ 不妨假设现在有一个函数 fn ,它的定义如下 123functi ...

生命周期理解生命周期是指一个组件从被创建至销毁会经历的一系列的过程，这个过程就叫生命周期 生命周期钩子函数是类组件独有的东西，自从react16.8推出hooks以来，整体就已经开始以函数组件为主了。 Hook从此告别类组件Hook实际上就是JavaScript的函数，但是这些函数相较于其他普通的函数，有些不一样。在React中使用的时候要遵循以下规则 只能在函数最外层调用Hook。不要在循环、条件判断、或者子函数中调用 只能在React的函数组件中调用Hook，不要在其他JavaScript函数中调用 useState使用useState可以创建组件的状态，使用解构进行接收，相当于之前在类组件里面的state 简单使用 1234567891011121314151617import React from "react";export default function UseState() { const [count, setCount] = React.useState(0); const handleClick = () => &# ...

在 React 项目中实现小球动画效果大概是这样的 实现思路总体思路 将小球封装成一个组件，这个组件有半径、移动速度、颜色等属性 然后再随机生成一堆小球 实际的代码单个小球 这是一个类组件 Ball.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475import React, { Component } from "react";import "./Ball.css";export default class Ball extends Component { constructor(props) { super(props); this.state = { radius: props.radius || 100, left: p ...

创建一个简单的受控表单组件实现两个input框 一个将输入的字符串的小写字母自动转换成大写 只允许输入数字 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485import React, { Component } from "react";export default class TableDemo extends Component { state = { value1: "", value2: "", }; onClickSubmit = (e) => { e.preventDefault(); console.log(this.state); } ...

React 组件通信1. 父子组件的通信方式props是最为常用的父子组件通信方式 直接上示例代码了 Father.js 父组件 12345678910111213141516171819202122232425262728293031323334353637383940// 父组件import React, { Component } from "react";import Son from "./Son";import { getRandomNumber } from "../utils/Random";// 类组件的写法export default class Father extends Component { state = { msg: "", sonTome: "", }; callback = (data) => { this.setState({ ...

使用脚手架去搭建一个React的项目开发环境1. 安装脚手架1yarn create react-app [项目名称] 2. 进入项目目录1cd [项目名称] 3. 启动项目1yarn start 4. 打包项目1yarn build 本节主要是使用yarn去搭建React项目的开发环境创建项目之后，尝试在项目中输出 hello word 和Vue一样,重要的东西都在src下面去修改index.js文件中的内容 123import React from 'react';import ReactDOM from 'react-dom/client';ReactDOM.createRoot(document.getElementById('root')).render(<h1>Hello <span>world</span></h1>); 然后把项目跑起来就可以了,效果如下图所示

es6的class定义通过class来定义一个类，这个与java中很相似 12345678910111213141516171819202122class Person { // 属性 name age = 18 // 构造方法 constructor(name, age) { this.name = name this.age = age } // 类方法 sayHi() { console.log('hello') console.log(`my name is ${this.name}`) }}// 实例化const p = new Person('clesbit', 20)console.log(p)p.sayHi() 继承通过extends关键字来继承一个一个类，语法如下 12345678class Person { //属性 ...

一、心路历程写在前面最近在忙比赛的项目，项目有一个实时预览监控摄像头的画面的需求。按道理说我一个臭前端不负责这一块的东西，但是没办法，时间紧任务重，只好硬着头皮上了。刚做到这一块的业务的时候，毫无头绪，因为摄像头用的是海康的，然后就四处查阅文档，四处碰壁。并且对摄像头这一块完全不了解，花了三天时间才做出一个demo。如果你的摄像头配置比较好，如果可以通过各大摄像头厂商给demo连接上，那就会省下很多麻烦事。**一定一定在做之前看摄像头的配置，支持什么，不支持什么！！！**因为时间肥肠的宝贵。 一些必要的认知 一些常见的流媒体传输协议：RTSP、RTMP、HLS、HTTP-FLV 当时我查阅文档的时候也很蒙b，这些都是什么啊，这么多协议，而且都用来干啥的。反正就是一脸懵逼， 经过好多番的学习。我这边提供的摄像头是支持RTSP取流的，所以打算在服务器上通过ffmpeg进行取流，然后推流到Nginx上，*Nginx将流处理成对前端友好的传输格式HLS*(m3u8格式的文件)，然后前端再拉流就行了。这里实现的流程是这样的 什么你说什么拉流推流，根本听不懂诶！ 说实话，我也不懂，我三 ...