SoulReader

全局函数（function） decodeURI() 解码某个编码的URI encodeURI() 把字符串编码为URI decodeURIComponent() 解码一个编码的URI组件 encodeURIComponent() 把字符串编码为URI组件 escape() 对字符串进行编码 eval() 计算javascript字符串并把它作为脚本来执行 isFinite() 检查某个值是否为有穷大的数 isNaN() 检查某个值是否是数字 Number() 把对象的值转化为数字 parseFloat() 解析一个字符串并返回一个浮点数 parseInt() 解析一个字符串并返回一个整数 String() 把对象的值转为字符串 unescape() 对由escape()编码的字符串进行解码 数组（Array） concat() 连接两个或者更多的数组，并返回结果 copyWithin(target, start, end) 将数组的指定位置拷贝元素到数组的另一个指定位置中 （target 指的是元素复制的位数， start指的是元素开始复制的 ...

本片文章根据bilibili vue源码分析 视频练习及知识点记录 模仿vue原理 实现简单的DOM模板替换123456789<div id="app"> <div> <div> {{name}} is {{behavior}} </div> </div> <p>人员：{{name}}</p> <p>行为：{{behavior}}</p></div> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950let data = { name: 'SoulReader', behavior: 'w ...

本片文章只用于引导自己如何对源码进行探索，因为看到源码的时候是一脸懵逼，完全不知道该从那个地方看起，所以用本篇文章记录一下自己的解读顺序，以免自己忘记 LIFECYCLE_HOOKS vue 钩子函数 beforeCreatecreatedbeforeMountemountedbeforeUpdateupdatedbeforeDestorydestoryedactivateddeactivatederrorCapturedserverPrefetch SOME USERFUL METHODS 判断浏览器类型1234567891011121314// packages/vue-template-compiler/browser.jsvar inBrowser = typeof window !== 'undefined';var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;var weexPlatform = inWeex ...

转载前端大全 前言电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名，其作用类似于纸质合同上的手写签名或加盖的公章。虽然电子签名多年来合法性一直遭到质疑，但其在企业工作流审批、请柬、单据保全等场景应用广泛，最近的项目中就有这样一个手写签名并生成PDF文件的需求。 实现思路使用canvas来实现手写签名的功能，然后将canvas转化为图片，贴在签名的位置；将整个需要生成文档的dom区域使用html2canvas插件转成一张大图；使用JsPDF插件将上述图片生成PDF文档；对于文件内容较多的情况，需要合理选择分页位置；生成签名 在tsx中定义canvas画布 1<canvas className={styles.canvas} ref={canvasDom} width="350" height="150" /> 注意：Canvas的宽高必须要使用内联样式定义，这是因为Canvas标签有自己的默认宽高300px×150px。它内联样式定义的width和height是绘画区域（画布） ...

前言当我们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对项目做性能优化吗？或者你了解哪些性能优化的方法？听到这个问题的你可能是这样的： 似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的回答。那么，本文就带你简单了解前端性能优化的几个主要方面，旨在抛砖引玉。 一、资源的合并和压缩web前端应用的开发与部署过程： 输入url到页面显示出来的过程： 请求过程中一些潜在的性能优化点： dns是否可以通过缓存减少dns查询时间？ 网络请求的过程如何走最近的网络环境？ 相同的静态资源是否可以缓存？ 能否减少http请求的大小和次数？ 能否进行服务端渲染？ 总结：深入理解http请求的过程是前端性能优化的核心。 优化核心 减少http请求数量； 减少请求资源的大小； google首页案例学习 html压缩； css压缩； js的压缩和混乱； 文件合并； 开启gzip； 1.html压缩HTML代码压缩就是压缩一些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩； 一个简单 ...

前言 简单值（基本类型值）总是通过值复制的方式来赋值/传递 null,undefined,symbol,string,number,boolean 复杂值（对象和函数）总是通过引用复制的方式来赋值/传递 object, array, function 由于引用指向的值本身而非变量，因此一个引用无法更改另一个引用的指向 不能通过引用一个新的引用来更改旧的引用的指向，只能修改新旧引用共同指向的值 如果通过值复制的方式来传递复合值，就需要创建一个复本，这样传递的就不是原始值foo(a.slice())，foo中的操作不会影响到a指向的数组 因此会发现复杂值的赋值的时候，例如 a = obj，当我们改变a中某个属性的值时，这是obj里面对应属性的值也发生了变化，这种就是浅拷贝 如果a的属性的值发生改变，obj对应属性的值不发生变化，这种就是深拷贝 浅拷贝 浅拷贝拷贝的是引用地址，实现方式有以下几种 Object.assign(target, obj1, obj2...)将第二个参数及以后的参数合并到第一个对象里 – 前提传入的参数都是多层嵌套，单层的话是深拷贝 for. ...

定义Symbol 12var sym = Symbol()var sym1 = Symbol('foo') Symbol('foo')并不会强制将字符串foo转化成symbol类型，他每次都会创建一个新的symbol类型 因此Symbol('foo') !== Symbol('foo') 如果想要创建一个Symbol包装器对象，可以使用Object()函数 1234var sym = Symbol('foo')typeof sym // 'symbolvar symObj = Object(sym)typeof symObj // 'object' 全局共享的Symbol 可以使用Symbol.for()或Symbol.keyFor()方法从全局的symbol注册表设置和取得symbol 在对象中查找symbol属性 Object.getOwnPropertySymbols()查找一个给定对象的符号属性时返回一个symbol类型的数 ...

第一章 类型和语法 内置类型 空值 null typeof null === 'object' 未定义 undefined typeof undefined === 'undefined' 布尔值 boolean typeof true === 'boolean' 数字 number typeof 42 === 'number' 字符串 string typeof '42' === 'string' 对象 object typeof {life: 42} === 'object' 符号 symbol typeof Symbol() === 'symbol' typeof function() {/* .. */} === 'function' typeof [1,2,3] === 'object' 数组是object的一个子类型 对变量执行typeof操作时，得到的结果并 ...

什么是Pick就是从一个符合类型中，取出几个想要的类型的组合 12345678910111213type Pick<T, K extends keyof T> = { [key in k]: T[key]}interface TState { name: string; age: number; like: string[]}// if i just want one or two attribute of TState// we can use Pick to get the attribute we wantinterface TSingleState extends Pick<TState, 'name' | 'age'> {} 泛型中的extends 并不是用来继承的，而是用来约束类型的，所以K extends keyof T，应该是说key被约束在T的key中，不能超出这个范围 原文链接

属性 Object.length 值为1 Object.prototype 可以为所有的Object类型的对象添加属性 方法 Object.assign() 用于将所有可枚举属性的值从一个或多个源对象分配到目标对象，并返回目标对象 此方法只会拷贝源对象自身的并且可枚举的属性到目标对象，该方法调用源对象的get和目标对象的set，如果为了将属性定义复制到原型应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() Object.assign()是浅拷贝,会改变源对象的值 Object.create() 创建一个新对象，使用现有的对象来提供新创建的对象的__proto__ Object.defineProperty() Object.defineProperties() Object.entries() Object.freeze() Object.getOwnPropertyDescriptor() Object.getOwnPropertyNames() Object.getOwnProper ...