qq_44621394的博客

使用text-overflow:ellipsis只能设置某一行文字的超出省略，display: -webkit-box则可以设置超出指定行数后省略。下面的例子中设置的是文字超出两行进行省略。

发布订阅实现的方法:on 订阅事件、emit 发布事件、remove 取消发布、 once 只订阅一次

核心思路是给context添加一个属性,将原函数指向这个属性,再通过context调用原函数。与 Function.prototype.myCall类似,只有入参形式有所区别。## Function.prototype.myCall的实现、Function.prototype.myApply的实现Function.prototype.myBind的实现

Promise也叫期约函数,是ES6中新增的特性,是解决异步编程的一种方案,取代回调函数避免回调地狱。});// 链式调用 p . then(res => Promise . resolve(res + 2)) . then(res => Promise . resolve(res + 3)) . then(res => console . log(res));// 6。

根目录下新建replace-hello-loader文件夹执行yarn init -y初始化项目，新建index.js文件作为loader的入口文件。下面的loader实现了将js源码中的 ‘hello’ 替换为 “你好”webpack.config.js中添加配置。将loader安装到本地。

Redux的核心思想很简单,就是一个发布订阅监听数据的变化,再限定只能通过dispatch去更改数据。数据来源唯一数据只读,只能通过dispatch修改数据reducer是一个纯函数实现一个发布订阅实现combineReducers对reducer进行切片实现react-redux的connection函数,将发布订阅和视图渲染关联到一起实现applyMiddleware。

知道了redux中间件原理后,现在来手动实现一个中间件。- 这里applyMiddleware的作用是时dispatch可以接收一个函数,并使用函数柯理化编排middleware。- redux-thunk的逻辑也很简单,判断如果action是个函数就执行这个action,否则继续执行编排后的柯理化函数。- 注意函数执行的顺序,[thunk,logger2,logger1 ]的执行顺序是logger1、logger2、thunk。thunk必须放到最后执行,否则会提前执行action,漏掉其它中间件的执

RTK是redux的开发工具,以配置的方式编写redux逻辑,能减少样板代码和错误代码,其中还内置了redux-thunk等一些基础插件, redux官方强烈推荐使用RTK。

react-query是一个异步状态管理的hook,内置了loading,error等状态。

当前端项目越来越庞大,使用到的诸如缓存数据、服务端数据、本地持久化数据也就越来越多,mode的变化会引起view的更新,而mode的来源是不确定,经常是错综复杂,甚至十分混乱的,遇到错误时很难排查和追踪。你可能使用过React中的context(上下文)把状态提升到顶层,被所有的子组件共享,这样还避免了props的层层传递。Redux也是一款类似的状态管理工具,不过它的功能更加全面,它是独立的,不仅仅可以应用在react中,还可以应用在javaScript项目中。

Redux和React的状态管理都是用发布订阅实现的。

给Route添加exact属性开启精确匹配。被Switch包裹的组件只渲染一个。使用 /* 匹配所有路径。Route渲染组件的的方式有element、render、children,render和children是通过函数渲染可以获取路由的参数。将每个模块的路由单独抽离封装，再以数据驱动的方式渲染Route更有利于路由的重组和耦合,提高代码复用。使用withRoute()方法获取history、location、match对象。其中包含路由动态匹配的参数以及url中的query参数。

react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。useEffect、useState、useMemo、useReducer、useRef、useContext、useLayoutEffect、useCallback、memo、

高阶组件的作用有代复用、代理属性、拦截渲染、劫持生命周期反向继承能直接操作和拦截组件的state和生命周期,功能比属性代理更加强大。

cookie是解决http无状态的一种方案。服务端与服务端经过三次握手后建立连接,数据发送完后连接关闭,在之后的请求中服务端无法判断每次的请求是不是由同一个用户发出的。当后面的请求依赖之前的请求数据的时候,客户端每次请求数据的时候必须先将之前的数据保存下来然后放在后面请求体中。而cookie正是解决这个问题的方案,服务端在响应客户端请求的时候将cookie放在请求头中一起传递到客户端,在之后的请求中客户端都会带上这个cookie,服务端验证cookie做出响应。

面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟。每个对象都是一个功能中心,具有明确分工,可以处理信息,处理信息,发出信息。面向对象编程具有灵活性、可复用性、模块化等好处,适合更多合作完成的大型项目。

1.TCP是面向连接的,连接需要一定的时间,但保证了传输的稳定性,UDP面向无连接即时性高,但不稳定,容易丢包。2.TCP的报文要包含SYN和ACK,首部占用比较多的字节,最少需要20个,UDP的首部只需要8个字节3.TCP的传输方式是字节流,UDP的传输方式是数据包4.TCP只能对多连接,UDP比较随意,可以一对多,多对一或者多对多。 为什么是三次握手？ 第一次握手确认了客户端的发送能力和服务端的接收能力,第二此握手确认了客户端和服务端的发送和接收能力。第三握手确认syn是最新的,是为了防止网络延迟,

OSI(Open System InterConnection)开放式系统互联。应用层直接为用户提供服务,如HTTP、FTP、STMP(邮件服务)、DNS、Telnet(远程控制)等，表示层将应用层的数据转换为OSI模型支持的数据格式,还提供数据加密/解密、压缩/解压缩的功能，会话层 管理两个实体之间的会话状态,提供寻址功能,如根据ip地址建立两台主机之间的连接，传输层传输层的主要作用是确保数据正确的传输,可在此层进行流量控制和错误处理。分为面向连接(TCP)和面向无连接(UTP)两种，网络层提供寻址功

Object的静态方法和实例方法: Object.keys()、Object.getOwnPropertyNames()、Object.defineProperty()、Object.defineProperties()、Object.getOwnDescriptor()、Object.getOwnDescriptors、Object.preventExtensions() 、Obejct.isExtensibel()、Object.protoType.valueOf()...

console对象所有的方法都可以被覆盖,因此可以自定义自己的方法重写console.log()方法,将其改为document.write};设置连console对象本身也可以被修改//null。- copy() 复制，某个值到粘贴板- clear() 清空控制台- dir(object)：显示特定对象的所有属性，是console.dir方法的别名- dirxml(object)：显示特定对象的 XML 形式，是console.dirxml方法的别名

除了JS提供的7种原生的错误类型,还可以通过继承Error自定义错误类型};throw new CustomError('这是一个自定义错误');//CustomError {message: '这是一个自定义错误', name: 'CustomError'};JS内置了六种内错误类型: SyntaxError、ReferenceError、TypeError、RangeError、URIError、EvalError。

比较运算符用于比较两个值的大小,返回一个布尔值1 > 2;//true比较运算符不仅可以用于数字,各种类型的值都可以比较大小。JavaScript一共提供了8种比较运算符> 大于运算符< 小于运算符>= 大于或等于运算符

JavasScript提供十个算术运算符加法运算符减法运算符乘法运算符除法运算符指数运算符余数运算符数值运算符负数值运算符自增运算符自减运算符减法、乘法、除法运算符就是单纯的数学运算,下面介绍其它几个运算符,重点是加法运算符。加号运算符再运算的时候分为数学运算和连接运算。

数组是按次序依次排列的一组值任何数据类型都可以放入数组数组可以嵌套形成多维数组//二维数组数组的empty和undefined有所区别,empty不会被for…in和forEache以及Object.keys运算,但计算length的时候会包含empty,因此使用length循环带有empty的数组时要格外小心类数组也叫伪数组,是指对象的属性为正整数或者零而且具有length属性的对象。

函数的基础使用使用函数表达式或者函数声明去创建一个函数函数声明整体提升,函数表达式只提升变量匿名函数构造函数构造函数返回一个对象,使用new操作符执行构造函数构造函数执行的过程:1. 生成一个对象将this绑定到这个对象 2. 执行构造函数的代码 3.返回结果构造函数默认返回一个对象,手动返回应用类型的数据将代替默认的返回结果闭包闭包产生的三个条件:1. 函数嵌套 2.内部函数使用了外部函数作用域内的变量 3.被返回的内部函数在外部作用域有被引用。

proxy是浏览器提供的代理方式,相比较defineProperty来说Proxy更加灵活,能代理对象的多个属性proxy还能捕捉和拦截数组、函数、构造器、以及Object的一些方法和操作符。

读写对象属性可以通过.操作符和方括号运算符,方括号运算符里面可以放变量使用delete 关键字删除对象自身属性,无法删除继承来的属性。通过defineProperty设置configuarble后将不可被删除Object.keys()方法获取的是对象自身的可枚举的key的数组, for…in遍历的是自身属性以及原型上的属性,原型上的toString方法不会被遍历使用in关键字或者hasOwnProperty方法判断对象中是否包含某个属性,区别是in关键字能判断出原型上的属性。

reduce是数组的一个高阶方法,用来实现对数组的累加计算在数组遍历的时候,回调函数的返回值会累加给previousValue,一直到数组遍历完毕返回这个累加值。在没有传递initialValue的情况下,首次累加的时候previousValue为数组的第1项,currentValue为数组的第2项,当传递了initialValue的时候previousValue初始值为initialValue,currentValue初始值为数组的第一项。

开始之前先介绍下reduce函数的使用。reduce是数组的一个高阶方法,用来遍历数组的每一项实现累加//abctotal初始值默认为数组的第一项,还可以通过reduce的第二个参数给total设置初始值//sabc。使用reduce进行函数的编排;redux的compose;koa中的compose

有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。Base64是一种编码方式,可以将任意值转成A-Z、a-z、+和\这64个字符组成的可以打印的字符,它的目的不是为了加密而是为了不出现特殊字符，简化程序的处理。Js中的字符串可以使用单引号也可以使用双引号,单引号可以嵌套双引号,双引号也可以嵌套单引号。字符串可以看作是类型为字符的数组,它具有数组的length属性,还可以使用方括号运算符。

我们在想写css的时候经常有加一些前缀,如-webkit-、-moz-、-ms-，这些前缀主要都是针对css3的。在css3标准还没发布的时候,为了能使前端开发者更早的使用一些新特性,浏览器厂商根据css3拟定的草案提前支持了这些属性,使用前缀与标准的css3属性进行区分。-ms- -ms-box-sadow //IE浏览器专属的css-webkit- -webkit-box-shadow //所有基于Webkit引擎的浏览器的专属css,如Chore和Safari。

Javascript使用64位浮点数存储数值类型的数据,在进行小数计算的时候会失去精度,大安全数范围是-2^53 ~ 253,最大数值范围是2通过Number.MAX_VALUE/Number.MIN_VALUE访问最大值和最小值，通过Number.SAFE_MAX_INTEGER/Number.SAFE_MIN_INTEGER获取最大/最小安全范围Javascript中数值超过一定程度后会使用科学计数法表示:123e+3NaN是数字类型中的一个特殊值;

JavaScript最早像Java一样只有null用来表示值不存在,根据C语言的传统null可以自动转为0,是一个对象类型,最早的时候JavaScript没有错误处理机制,null在自动转换成0的时候很难发现错误。于是 JavaScript的作者Brendan Eich又设计了新的类型undefined用来代替null。undefined在在进行数字类型转换的时候会转换成NaN。我们在阅读别人的代码时经常见到 return void(0)和return void 0的写法,这种写法被称作安全的undefin

const 和 let是对var问题的补充和修复,使用const和let声明的变量不会提升模板字符串做函数参数的时候与普通的函数参数有所区别箭头函数内的this指向上级作用域的this,也就是箭头函数本身所在的词法作用域的this使用拓展运算符可以从对象或数组中获取部分参数,而剩下的部分可以通过…拓展运算符获取数组在合并的时候按照从左往右的顺序,对象在合并的时候相同的属性会被后面的覆盖掉。

我们都知道Javascript通过原型实现继承};ES6提供了class类,class本质上还是function,它可以看作是function的语法糖。

npm install typescript --save-dev 或者 npm install typescript -D。npm install typescript --global 或者npm install typescript -g。yarn add typescript --dev 或者 yarn add typescript -D。npm uninstall typescript 或者 npm un typescript。根据package.json安装。以typescript为例子。

混入通过注入配置项到vue实例用来提升复用性除了使用上述默认的合并规则,还可以通过Vue.config.optionMergeStrategies自定义合并规则。//返回合并的值};通常对于值为对象的属性我们可以借用已有的合并规则//借用methods的规则mixin混入通过注入配置项到vue实例提升复用性属性冲突时以组件内的属性为准,声明周期的钩子会保留多个。

使用函数能保证每个组件的data的内存是独立的而不是共用。因为组件是可以复用的,多个组件共用数据会相互影响。子组件通过props获取父组件传递的属性值,子组件通过$emit执行父组件的回调函数与父组件进行通信。组件也是一个vue实例,也具有methods,computed,data,计算属性等。Vue.component注册的是全局组件,在所有vue实例/组件中都能使用。需要注意的是回调函数的名字不能是驼峰。vue提供了slot插槽用来占位。............

使用v-model后value或标签内的文字将不再生效。

Vue的修饰符包含了事件修饰符、按键修饰符、系统键修饰符、exact修饰符、鼠标按键修饰符、表单修饰符。事件修饰符包含stop、once、capture、prevent等,按键修饰符包含enter、esc、delete、left等,系统键修饰符包含alt、ctrl、shift、meta(系统键,win或command),鼠标按键修饰符包含left、right、middle,表单修饰符包含lazy、trim、number。exact用于更精准的控制系统键。......