- 博客(79)
- 收藏
- 关注
RSS订阅
原创 Jenkins实现nodeJS项目持续部署和持续集成
我们在做个人小项目或者demo的时候会因为频繁的部署项目浪费大量时间，无论是版本迭代还是代码优化，哪怕就算你只是改了一行代码都要重新部署项目。不使用jenkins的时候：前端提交到代码到git/svn 后端提交代码到git/svn人工手动打包整合前后端代码 放到服务器的指定位置运行使用jenkins的时候：前端/后端提交代码jenkins点击构建进行 构建前端/后端 ,甚至可以通过钩子函数轮询或者定时构建 然后通过shell脚本进行前后端代码的整合（可以只发布前端或者只发布后端）
2020-09-06 20:06:40
1808
1
转载 什么是CPU密集型、IO密集型？
这种计算密集型任务虽然也可以用多任务完成，但是任务越多，花在任务切换的时间就越多，CPU执行任务的效率就越低，所以，要最高效地利用CPU，计算密集型任务同时进行的数量应当等于CPU的核心数。对于IO密集型任务，任务越多，CPU效率越高，但也有一个限度。CPU密集型也叫计算密集型，指的是系统的硬盘、内存性能相对CPU要好很多，此时，系统运作大部分的状况是CPU Loading 100%，CPU要读/写I/O(硬盘/内存)，I/O在很短的时间就可以完成，而CPU还有许多运算要处理，CPU Loading很高。
2023-02-15 09:14:15
648
1
原创 指定行数的超出省略
使用text-overflow:ellipsis只能设置某一行文字的超出省略，display: -webkit-box则可以设置超出指定行数后省略。下面的例子中设置的是文字超出两行进行省略。
2023-01-29 18:34:07
199
原创 手写call、apply、bind
核心思路是给context添加一个属性,将原函数指向这个属性,再通过context调用原函数。与 Function.prototype.myCall类似,只有入参形式有所区别。## Function.prototype.myCall的实现、Function.prototype.myApply的实现Function.prototype.myBind的实现
2022-12-02 10:30:02
126
原创 Promise期约函数的实现
Promise也叫期约函数,是ES6中新增的特性,是解决异步编程的一种方案,取代回调函数避免回调地狱。});// 链式调用 p . then(res => Promise . resolve(res + 2)) . then(res => Promise . resolve(res + 3)) . then(res => console . log(res));// 6。
2022-12-01 23:29:26
417
原创 webpack自定义loader
根目录下新建replace-hello-loader文件夹执行yarn init -y初始化项目，新建index.js文件作为loader的入口文件。下面的loader实现了将js源码中的 ‘hello’ 替换为 “你好”webpack.config.js中添加配置。将loader安装到本地。
2022-11-14 19:06:33
157
原创 redux的实现（包含combineRerucers、applyMiddleware、react-redux的connect)
Redux的核心思想很简单,就是一个发布订阅监听数据的变化,再限定只能通过dispatch去更改数据。数据来源唯一数据只读,只能通过dispatch修改数据reducer是一个纯函数实现一个发布订阅实现combineReducers对reducer进行切片实现react-redux的connection函数,将发布订阅和视图渲染关联到一起实现applyMiddleware。
2022-11-11 16:58:45
557
原创 redux中间件的实现思路
知道了redux中间件原理后,现在来手动实现一个中间件。- 这里applyMiddleware的作用是时dispatch可以接收一个函数,并使用函数柯理化编排middleware。- redux-thunk的逻辑也很简单,判断如果action是个函数就执行这个action,否则继续执行编排后的柯理化函数。- 注意函数执行的顺序,[thunk,logger2,logger1 ]的执行顺序是logger1、logger2、thunk。thunk必须放到最后执行,否则会提前执行action,漏掉其它中间件的执
2022-11-10 19:27:56
226
原创 Redux Tool Kit(RTK)的使用
RTK是redux的开发工具,以配置的方式编写redux逻辑,能减少样板代码和错误代码,其中还内置了redux-thunk等一些基础插件, redux官方强烈推荐使用RTK。
2022-11-09 16:42:35
547
原创 redux的概念介绍和基础使用
当前端项目越来越庞大,使用到的诸如缓存数据、服务端数据、本地持久化数据也就越来越多,mode的变化会引起view的更新,而mode的来源是不确定,经常是错综复杂,甚至十分混乱的,遇到错误时很难排查和追踪。你可能使用过React中的context(上下文)把状态提升到顶层,被所有的子组件共享,这样还避免了props的层层传递。Redux也是一款类似的状态管理工具,不过它的功能更加全面,它是独立的,不仅仅可以应用在react中,还可以应用在javaScript项目中。
2022-11-06 17:12:36
520
原创 React Router v6的使用以及v5升级v6的一些问题
传统的多页应用: 改变url请求对应的html资源单页: 单页一次请求所有的资源, 首屏加载会比较慢,后续通过路由切换组件,只需要请求数据单页首屏渲染耗时多,不利于SEO,页面切换流畅,前后端分离,用户体验好,多页利于SEO,每次页面切换都要请求资源会对服务器有一定压力,影响用户体验。单页在经过分片和路由懒加载后性能会好过多页,因此现在的前端工程化项目一般都是使用单页,当项目体量非常庞大的时候再考虑拆分多页。
2022-10-23 19:16:02
1374
1
原创 react-router v5的使用
给Route添加exact属性开启精确匹配。被Switch包裹的组件只渲染一个。使用 /* 匹配所有路径。Route渲染组件的的方式有element、render、children,render和children是通过函数渲染可以获取路由的参数。将每个模块的路由单独抽离封装，再以数据驱动的方式渲染Route更有利于路由的重组和耦合,提高代码复用。使用withRoute()方法获取history、location、match对象。其中包含路由动态匹配的参数以及url中的query参数。
2022-10-16 23:31:30
843
原创 TypeScript的使用(上)
TypeSecript是JavScript的超集,提供了类型检测功能,ts的类型检测是在编译阶段。TypeScript适用于复杂的大型协作项目,提升开发效率和降低代码维护成本。typeScript提供了numbe、string、boolean、undefined、null的基础类型,数组的类型有两种表示方式,还可以使用元组表示具有多种数据类型的数组。对象类型用interface定义,Object.proptotype的属性使用ts提供的Object类型。
2022-10-13 21:55:56
1211
原创 Reack hooks的使用
react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。useEffect、useState、useMemo、useReducer、useRef、useContext、useLayoutEffect、useCallback、memo、
2022-10-11 11:37:29
347
原创 React的高阶组件(HOC)
高阶组件的作用有代复用、代理属性、拦截渲染、劫持生命周期反向继承能直接操作和拦截组件的state和生命周期,功能比属性代理更加强大。
2022-10-10 21:38:48
538
原创 cookie和session的使用及两者的区别
cookie是解决http无状态的一种方案。服务端与服务端经过三次握手后建立连接,数据发送完后连接关闭,在之后的请求中服务端无法判断每次的请求是不是由同一个用户发出的。当后面的请求依赖之前的请求数据的时候,客户端每次请求数据的时候必须先将之前的数据保存下来然后放在后面请求体中。而cookie正是解决这个问题的方案,服务端在响应客户端请求的时候将cookie放在请求头中一起传递到客户端,在之后的请求中客户端都会带上这个cookie,服务端验证cookie做出响应。
2022-10-09 20:25:00
745
原创 JavaScript中的OOP面向对象编程
面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟。每个对象都是一个功能中心,具有明确分工,可以处理信息,处理信息,发出信息。面向对象编程具有灵活性、可复用性、模块化等好处,适合更多合作完成的大型项目。
2022-09-29 10:35:00
420
原创 UDP和TCP以及TCP的三次握手和四次挥手
1.TCP是面向连接的,连接需要一定的时间,但保证了传输的稳定性,UDP面向无连接即时性高,但不稳定,容易丢包。2.TCP的报文要包含SYN和ACK,首部占用比较多的字节,最少需要20个,UDP的首部只需要8个字节3.TCP的传输方式是字节流,UDP的传输方式是数据包4.TCP只能对多连接,UDP比较随意,可以一对多,多对一或者多对多。 为什么是三次握手？ 第一次握手确认了客户端的发送能力和服务端的接收能力,第二此握手确认了客户端和服务端的发送和接收能力。第三握手确认syn是最新的,是为了防止网络延迟,
2022-09-28 21:24:38
1096
原创 OSI七层模型和TCP/IP协议
OSI(Open System InterConnection)开放式系统互联。应用层直接为用户提供服务,如HTTP、FTP、STMP(邮件服务)、DNS、Telnet(远程控制)等，表示层将应用层的数据转换为OSI模型支持的数据格式,还提供数据加密/解密、压缩/解压缩的功能，会话层 管理两个实体之间的会话状态,提供寻址功能,如根据ip地址建立两台主机之间的连接，传输层传输层的主要作用是确保数据正确的传输,可在此层进行流量控制和错误处理。分为面向连接(TCP)和面向无连接(UTP)两种，网络层提供寻址功
2022-09-28 20:13:49
799
原创 JavaScript中Object标准库的静态方法和实例方法
Object的静态方法和实例方法: Object.keys()、Object.getOwnPropertyNames()、Object.defineProperty()、Object.defineProperties()、Object.getOwnDescriptor()、Object.getOwnDescriptors、Object.preventExtensions() 、Obejct.isExtensibel()、Object.protoType.valueOf()...
2022-09-27 09:53:26
473
原创 console对象与控制台
console对象所有的方法都可以被覆盖,因此可以自定义自己的方法重写console.log()方法,将其改为document.write};设置连console对象本身也可以被修改//null。- copy() 复制，某个值到粘贴板- clear() 清空控制台- dir(object)：显示特定对象的所有属性，是console.dir方法的别名- dirxml(object)：显示特定对象的 XML 形式，是console.dirxml方法的别名
2022-09-25 16:51:10
871
原创 JS中的错误处理机制
除了JS提供的7种原生的错误类型,还可以通过继承Error自定义错误类型};throw new CustomError('这是一个自定义错误');//CustomError {message: '这是一个自定义错误', name: 'CustomError'};JS内置了六种内错误类型: SyntaxError、ReferenceError、TypeError、RangeError、URIError、EvalError。
2022-09-25 12:30:36
835
原创 JavaScript比较运算符
比较运算符用于比较两个值的大小,返回一个布尔值1 > 2;//true比较运算符不仅可以用于数字,各种类型的值都可以比较大小。JavaScript一共提供了8种比较运算符> 大于运算符< 小于运算符>= 大于或等于运算符
2022-09-23 15:20:51
1190
原创 #算术运算符
JavasScript提供十个算术运算符加法运算符减法运算符乘法运算符除法运算符指数运算符余数运算符数值运算符负数值运算符自增运算符自减运算符减法、乘法、除法运算符就是单纯的数学运算,下面介绍其它几个运算符,重点是加法运算符。加号运算符再运算的时候分为数学运算和连接运算。
2022-09-22 22:17:27
243
原创 JavaScript 中的数组类型
数组是按次序依次排列的一组值任何数据类型都可以放入数组数组可以嵌套形成多维数组//二维数组数组的empty和undefined有所区别,empty不会被for…in和forEache以及Object.keys运算,但计算length的时候会包含empty,因此使用length循环带有empty的数组时要格外小心类数组也叫伪数组,是指对象的属性为正整数或者零而且具有length属性的对象。
2022-09-22 14:13:53
493
原创 JavaScript中的一等公民: 函数(Function)
函数的基础使用使用函数表达式或者函数声明去创建一个函数函数声明整体提升,函数表达式只提升变量匿名函数构造函数构造函数返回一个对象,使用new操作符执行构造函数构造函数执行的过程:1. 生成一个对象将this绑定到这个对象 2. 执行构造函数的代码 3.返回结果构造函数默认返回一个对象,手动返回应用类型的数据将代替默认的返回结果闭包闭包产生的三个条件:1. 函数嵌套 2.内部函数使用了外部函数作用域内的变量 3.被返回的内部函数在外部作用域有被引用。
2022-09-21 09:31:11
474
转载 toB和toC的区别?
TOC面向消费者，具有很大的发展空间。如果运营得好，借助风口，可以短时间内积累很大的财富，譬如：共享单车。但是也可以在短时间内迅速破产，譬如：OFO。因为人的从众性很强，可以短时间内将你捧起来，也可以墙倒众人推。TOB面向企业，具有稳定的消费团体，商业关系需要一步步的磨，建立稳定的利益链。TOC的初级门槛低，做得很烂，也可以推向市场。甚至说在量边引起质变之前，你的用户，收入各方面都相当稳定。TOB需要一定的门槛，产品开发到一定程度才能推向市场。如果有用户，在一段时间内，还是有相对稳定收入的。
2022-09-20 11:31:19
5218
原创 Object.defineProperty和proxy代理模式
proxy是浏览器提供的代理方式,相比较defineProperty来说Proxy更加灵活,能代理对象的多个属性proxy还能捕捉和拦截数组、函数、构造器、以及Object的一些方法和操作符。
2022-09-19 22:31:51
919
原创 Mysql 聚合函数的使用
聚合函数用来对表中的数据进行统计和计算。count函数用来求某一字段的行数不包含null,count(*)用来求总行数max\min函数用来计算某一列的最大\最小值sum函数对某一列进行求和avg函数用来计算平均数在对列进行计算式,聚合函数会默认忽略值为null的记录,使用ifnull进行null值的替换。
2022-09-17 17:09:06
880
原创 Javascript中的对象(Object)类型
读写对象属性可以通过.操作符和方括号运算符,方括号运算符里面可以放变量使用delete 关键字删除对象自身属性,无法删除继承来的属性。通过defineProperty设置configuarble后将不可被删除Object.keys()方法获取的是对象自身的可枚举的key的数组, for…in遍历的是自身属性以及原型上的属性,原型上的toString方法不会被遍历使用in关键字或者hasOwnProperty方法判断对象中是否包含某个属性,区别是in关键字能判断出原型上的属性。
2022-09-15 14:14:57
864
原创 reduce方法的使用以及一些使用场景
reduce是数组的一个高阶方法,用来实现对数组的累加计算在数组遍历的时候,回调函数的返回值会累加给previousValue,一直到数组遍历完毕返回这个累加值。在没有传递initialValue的情况下,首次累加的时候previousValue为数组的第1项,currentValue为数组的第2项,当传递了initialValue的时候previousValue初始值为initialValue,currentValue初始值为数组的第一项。
2022-09-14 15:28:08
717
原创 JavaScript中使用compose对函数进行编排
开始之前先介绍下reduce函数的使用。reduce是数组的一个高阶方法,用来遍历数组的每一项实现累加//abctotal初始值默认为数组的第一项,还可以通过reduce的第二个参数给total设置初始值//sabc。使用reduce进行函数的编排;redux的compose;koa中的compose
2022-09-12 17:44:50
248
原创 JavaScript字符串类型
有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。Base64是一种编码方式,可以将任意值转成A-Z、a-z、+和\这64个字符组成的可以打印的字符,它的目的不是为了加密而是为了不出现特殊字符，简化程序的处理。Js中的字符串可以使用单引号也可以使用双引号,单引号可以嵌套双引号,双引号也可以嵌套单引号。字符串可以看作是类型为字符的数组,它具有数组的length属性,还可以使用方括号运算符。
2022-09-11 18:37:57
840
原创 渐进增强和优雅降级
我们在想写css的时候经常有加一些前缀,如-webkit-、-moz-、-ms-，这些前缀主要都是针对css3的。在css3标准还没发布的时候,为了能使前端开发者更早的使用一些新特性,浏览器厂商根据css3拟定的草案提前支持了这些属性,使用前缀与标准的css3属性进行区分。-ms- -ms-box-sadow //IE浏览器专属的css-webkit- -webkit-box-shadow //所有基于Webkit引擎的浏览器的专属css,如Chore和Safari。
2022-09-11 17:15:02
274
原创 Javascript中的数值类型
Javascript使用64位浮点数存储数值类型的数据,在进行小数计算的时候会失去精度,大安全数范围是-2^53 ~ 253,最大数值范围是2通过Number.MAX_VALUE/Number.MIN_VALUE访问最大值和最小值，通过Number.SAFE_MAX_INTEGER/Number.SAFE_MIN_INTEGER获取最大/最小安全范围Javascript中数值超过一定程度后会使用科学计数法表示:123e+3NaN是数字类型中的一个特殊值;
2022-09-10 17:41:51
937
原创 JS数据类型之null和undefined
JavaScript最早像Java一样只有null用来表示值不存在,根据C语言的传统null可以自动转为0,是一个对象类型,最早的时候JavaScript没有错误处理机制,null在自动转换成0的时候很难发现错误。于是 JavaScript的作者Brendan Eich又设计了新的类型undefined用来代替null。undefined在在进行数字类型转换的时候会转换成NaN。我们在阅读别人的代码时经常见到 return void(0)和return void 0的写法,这种写法被称作安全的undefin
2022-09-09 22:24:31
430
原创 ES6总结
const 和 let是对var问题的补充和修复,使用const和let声明的变量不会提升模板字符串做函数参数的时候与普通的函数参数有所区别箭头函数内的this指向上级作用域的this,也就是箭头函数本身所在的词法作用域的this使用拓展运算符可以从对象或数组中获取部分参数,而剩下的部分可以通过…拓展运算符获取数组在合并的时候按照从左往右的顺序,对象在合并的时候相同的属性会被后面的覆盖掉。
2022-09-07 12:13:09
89
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人