- 博客(78)
- 收藏
- 关注
RSS订阅原创 常用ES标准
判断对象是否有子鼠星，比hasOwnProperty()（obj=null时会报错）安全；13.字符串方法startsWith、endsWith、includes。2.对象方法Object.values()、Object.entries。类似于Object.keys()返回对象所有的键、值、键值对数组。3.字符串方法padStart()、padEnd()3.字符串trimStart()、trimEnd()10.数据结构Set、Map、Symbol。1.数组includes方法。12.模块化module。
2024-03-24 23:30:47
449
原创 正向代理和反向代理
*正向代理：**是一个位于客户端和目标服务器之间的服务器（代理服务器），为了从目标服务器取得内容，客户端向代理服务器发送一个请求并指定目标，然后代理服务器向目标服务器转交请求并将获得的内容返回给客户端。通过正向代理服务器访问目标服务器，目标服务器是不知道真正的客户端是谁的，甚至不知道访问自己的是一个代理。其实是代理服务器代理了目标服务器去和客户端进行交互，通过反向代理服务器访问目标服务器时，客户端是不知道真正的目标服务器是谁的，甚至不知道自己访问的是一个代理。正向代理作用主要是用于解决访问限制问题。
2024-03-24 22:40:34
240
1原创 读书笔记（二十三）：代码整洁
一、有意义的命名1.名副其实选个好名称要花时间，但省下来的时间比花掉的多。注意命名，一旦发现有更好的名称，就换掉旧的。变量、函数或类的名称应该已经答复了所有的大问题，它该告诉你，它为什么会存在，它做什么事，应该怎么用。如果名称需要注释来补充，那就不算是名副其实。int d; // elapsed time in daysint elapsedTimeInDays;选择提现本意的名称能让人更容易理解和修改代码。2.避免误导程序员必须避免留下掩藏代码本意的错误线索，避免使用与本意相悖的词。比如
2022-04-24 17:14:15
368
原创 文字省略样式
1.中英文效果区别word-break:break-all; //只对英文起作用，以字母作为换行依据word-wrap:break-word; //只对英文起作用，以单词作为换行依据white-space:pre-wrap; //只对中文起作用，强制换行white-space:nowrap; //强制不换行，都起作用2.单行文字省略显示overflow: hidden;text-overflow:ellipsis;white-space: nowrap;注意：一定要指定容器的宽度
2022-04-21 17:55:38
415
原创 读书笔记（二十二）：前端安全
1.单页应用安全策略单页应用采用前后端分离的设计方式，路由由前端管理，通过ajax进行通信，用户请求页面时，后端经常无法获取用户身份信息。使用HTTPS来对传输内容（昵称、密码、token等）进行加密。不要在URL query中传递敏感数据。升级npm包，npm在6.0之后可以检测三方库隐患。# 扫描所有依赖，列出依赖中有安全隐患的包npm audit# 把不安全的包升级到可兼容的版本npm audit fix响应头设置Content-Security-Policy:设置应用是
2022-04-19 11:08:24
89
原创 读书笔记（二十一）：缓存
1.缓存分类web缓存可以分为很多种，如数据库缓存、服务器缓存、CDN缓存、HTTP缓存等。HTTP缓存是用于临时存储Web文档（HTML页面和图像），以减少服务器延迟的一种信息技术。使用的好处：使网页加载和呈现速度更快。由于减少了不必要的数据传输，因而可以节省网络流量和带宽。减少服务器的负担。浏览器缓存按位置可分为：内存缓存（memory cache）、硬盘缓存（disk cache）、service worker等。浏览器的资源缓存可分为硬盘缓存和内存缓存两类。当首次访问网页时，资源文
2022-04-18 17:02:54
691
原创 读书笔记（二十）：函数式编程
用函数式代码取代面向过程式的代码的好处：表达力更加清晰，通过函数的命名以及对函数进行原子拆分，能看出函数功能和执行过程。利于复用，函数本身具有天然的复用能力。利于维护，纯函数和幂等性可以保证输入相同输出相同，在维护和调试时能更加专注，减少共享带来的问题。1.纯函数函数的输入参数确定，输出结果是唯一确定的。不能修改外部变量，以避免造成副作用，不能调用random及发送异步请求等具有不确定性操作。例：array的slice方法属于纯函数，它不对数组本身进行操作；array的splice方法不属于
2022-04-18 14:38:57
102
原创 读书笔记（十九）：框架性能
1.react的虚拟DOM diffreact主要通过使用高效diff算法、进行batch操作、摒弃脏检测更新方式来保证虚拟DOM diff算法和更新都能高效。任何一个组件使用setState方法时，会被认为变‘脏’了，进而触发组件本身的重新渲染。因为react始终维护两套虚拟DOM，一套是更新后的，另一套是前一个状态的，可以通过对两套执行diff算法，找到需要的最小单元集，并应用在真实的DOM中。react的大胆假设：对DOM节点跨层级移动的情况忽略不计。拥有相同类型的两个组件生成相似的树形结
2022-04-13 16:40:26
508
原创 读书笔记（十八）：性能优化
1.图片优化除了传统的图片懒加载手段，还可以使用WebP图片格式替换。WebP是Google开发的一种新的图片格式，它支持有损压缩、无损压缩和透明度，压缩后的文件大小比JPEG、PNG等都要小。所以可以节省带宽，减少页面载入时间，节省用户的流量。由于可能存在兼容性问题，需要在替换之前进行兼容性试探：const supportWebp = () => new Promise(resolve => { const image = new Image() image.onerror = (
2022-04-13 13:53:38
84
原创 读书笔记（十七）：性能监控和错误收集
1.性能衡量指标首次绘制时间：页面发生第一次绘制的时间点。首次有内容绘制时间：指浏览器完成渲染DOM中第一部分内容（文本、图像或其他任何元素）的时间点，用户应该在视觉上有直观的感受。首次有意义绘制时间：指页面关键元素的渲染时间。首屏时间：进入页面之后，应用渲染完成整个屏幕（未滚动之前）内容的时间。用户可交互时间：用户可以与应用进行交互的时间。一般认为是DOMReady的时间。DOMContentLoaded指的是文档中DOM内容加载完毕的时间，HTML结构已经是完整的了。Load事件是指页面
2022-04-12 17:30:11
666
原创 读书笔记（十六）：代码规范工具及技术设计
1.prettier格式化、规范化代码，使其更加工整。它一般不会检查代码的具体写法，而是在可读性上，目前支持Js、JSX、Angular、Vue、Flow、Ts、CSS（Less、Scss）、Json等多种语言。它能够将原始代码风格移除，并替换为团队统一配置的代码风格。安装后，在根文件中创建prettier.config.js文件，并添加prettier规则，如：module.exports = { printWidth: 100, singleQuote: true, trailingComm
2022-04-12 15:50:25
120
原创 axios请求传参方式
1.request//原始的Axios请求方式axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }, timeout: 1000, ...//其他相关配置});2.get/deleteaxios.get('demo/url', { params: { id: 123, name: 'Henry',
2022-03-16 17:40:19
1889
原创 element ui 实际使用问题
1.table过滤table组件的过滤是当前页面数据过滤，过滤字段需要filters=[]和filter-method方法。如果需要调接口并同时需要分页查询，需要在el-table根组件上加@filter-change方法，并同时在过滤字段上加column-key属性，以及去掉filter-method方法。2.form表单属性绑定属性表单绑定对于特定的单词不会生效，比如：name等。...
2022-03-15 15:01:00
1949
原创 读书笔记（十五）：项目组织设计
1.项目组织管理multirepo：将应用按照模块分别在不同的仓库中进行管理，在需要依赖时引入；倡导分而治之，存在问题：开发调试及版本更新效率低下。团队技术选型分散，不同库的实现风格可能存在较大差异。changelog梳理困难，Issues管理混乱monorepo：将应用中所有的模块全部都放在同一个项目中；倡导集中管理，存在问题：库体积超大，目录结构复杂度上升。需要使用维护工具，学习成本比较高。2.管理工具LernaBabel和React都是典型的monorepo，Lerna是Ba
2022-03-08 11:46:23
263
原创 axios传参以及mock对应接收方式
axios传参有三种方式：一、params传参axios.get(url,{ params:{ a:1, b:2 }})在mock中接收时，参数是拼接在url中的，如：{url:"?a=1&b=2",type="GET",body：null}二、data传参axios.get(url,{ data:{ a:1, b:2 }})在mock中接收参数时，参数是在body中显示的，如： {url:"",type="GET",body
2022-03-02 16:07:19
1190
原创 vue的filters、computed、methods、watch使用区别
filters：访问不到vue 实例，适合对数据进行筛选、数据格式化。methods：可以访问vue 实例，其他同filters。computed：不能传参，不支持异步，只能监听现有属性，通过现有的属性计算出一个新的属性。属性依赖改变，自动调用对应的方法，并进行缓存；当改变其他数据时，computed 属性并不会重新计算，从而提升性能。watch：监听现有属性，属性需要先声明，一旦属性发生了改变就去自动调用对应的方法。watch不会缓存数据，每次打开页面都会重新加载一次。当需要在数据变化时执行异步或.
2022-02-23 16:58:31
257
原创 读书笔记（十四）：webpack
1.产出结果webpack打包输出的结果就是一个IIFE，通过这个立即执行函数及webpack_require来支持各种模块化打包方案。按需加载时会输出执行入口文件和异步加载文件。2.工作原理读取配置：读取项目中开发者定义的webpack.config.js配置文件，或者从shell语句中获取必要参数。挂载插件：将所需插件实例化，在事件流上挂载插件钩子。编译解析：从定义的入口文件（可以不止一个）开始，进行依赖收集，依赖loaders对所有依赖的文件进行编译。编译好的内容使用acorn或其他抽象语
2022-02-18 16:26:06
93
原创 读书笔记（十三）：模块化
1.发展历程函数模式：借助函数作用域来模拟模块化，将不同功能封装成不同的函数。缺点：各个函数在同一个文件中，混乱地相互调用，存在命名冲突的风险。对象模式：利用对象实现命名空间的概念。缺点：数据不安全，任何开发者都可以修改。CommonJs规范：本地同步加载。Node.js中，每个文件就是一个模块，具有单独的作用域，对其他文件是不可见的。特点：1.文件即模块，文件内的所有代码都运行在独立的作用域中，因此不会污染全局空间。2.模块可以被多次引用、加载，第一次加载时会被缓存，之后都从缓存中直接读取结果。3
2022-02-18 09:46:06
430
原创 git凭据失效权限问题
当因为某些问题导致git权限问题时，有可能是凭据不匹配当前登录人的信息。尝试卸载凭据后再安装：git credential-manager uninstallgit credential-manager install如果出现需要反复要求输入用户名、密码的情况，需要重新生成凭据文件：删除用户目录下的.git-credentials文件git config --global credential.helper store然后git命令操作后输入一次用户名、密码即可更新文件。...
2022-02-14 09:09:58
2463
原创 读书笔记（十二）：React和Vue
1.数据绑定vue：采用了双向数据绑定策略，依靠Object.defineProperty（3.0已迁移到Proxy）及监听DOM事件实现。实例中的data与模板展现在一条线上，无论谁被修改，另一方都会发生变动。react：局部刷新策略。当数据发生变化时，直接重新渲染组件，得到最新的视图。看似粗暴，换来了简单直观的效果：数据变化只需要刷新即可，而且框架能够对这种刷新在性能上提供一定的保障。比较：vue有computed计算属性，和react-redux中的mapStateToProps差不多，都是通过
2022-01-28 15:32:55
804
原创 读书笔记（十一）：同构应用
同构应用能够实现的基础是虚拟DOM，基于虚拟DOM我们可以生成真实的DOM，并由浏览器渲染；也可以调用不同框架的API，将虚拟DOM生成字符串，由服务器端传输给客户端。1.打包环境区分同构应用实现了客户端代码和服务器端代码的基本统一，我们只需要编写一种组件，就能生成适用于服务器端和客户端的组件。大多数情况下还是需要单独处理的，差别决定了代码复用难易程度。路由代码差别服务器端需要根据请求路径匹配页面组件，客户端需要通过浏览器中的地址匹配页面组件。const App = () => {
2022-01-27 17:32:11
1054
原创 读书笔记（十）：react
1.JSX直观上看，JSX是将HTML直接嵌入了JS代码中。它让前端实现真正意义上的组件化，通过函数抽离或IIFE（立即执行函数）可以调试JSX。JSX会被编译为React.createElement，而React.createElement的底层逻辑是无法运行js的，只能渲染一个结果。因此，JSX中除了js表达式不能直接写js语法。JSX只是函数调用和表达式的语法糖。2.setStatesetState方法并不总是能够立刻更新组件，它可能会延迟更新，这样在通过this.state读取内容时，就有可
2022-01-26 17:57:21
627
原创 读书笔记（九）：响应式框架
1.基本原理数据在变化时不需要开发者去手动更新视图，视图会根据变化的数据自动进行更新。想完成这个过程，需要做到：知道收集视图依赖了哪些数据、感知被依赖数据的变化、数据变化时自动通知需要更新的视图部分并进行更新。对应的技术为：依赖收集、数据劫持/数据代理、发布/订阅模式。可以使用Object.defineProperty和Proxy实现拦截，对比之下：Object.defineProperty不能监听数据的变化，需要对数组方法进行重写。Object.defineProperty必须遍历对象的每个属
2022-01-26 09:56:44
101
原创 读书笔记（八）：响应式布局
1.相对单位em：相对于当前元素或继承来的字体的宽度。rem：相对于根节点的字体大小。vh、vw、vmin、vmax：相对于视口的宽度、高度。%、calc():根据屏幕宽度计算。禁用用户缩放功能，使页面宽度和设备宽度对齐，这种操作一般是移动端响应式适配的标配。<meta name="viewport" content="width=device-width,initial-scale=1,mininum-scale=1,maximun-scale=1,user-scaleble=no,vi
2022-01-24 18:04:09
372
原创 读书笔记（七）：HTML和CSS
1.HTML语义化简单来说，就是根据结构化的内容选择合适的标签。合适的标签是对内容表达的高度概括，在浏览器爬虫或者任何机器读取HTML时，都能更好的理解代码表达的意思，进而获得更高的解析效率。好处有：利于SEO、开发维护体验更好、用户体验更好、更好的可访问性，方便任何设备对代码进行解析。常用标准：<nav /> // 导航<article /> // 文稿内容、博客内容、评论内容<aside /> // 目录、边栏、广告、批注<figure />
2022-01-24 10:12:35
330
原创 读书笔记（六）：ES Next
1.新特性实例includesArray.prototype.includes用来判断数组是否包含某个元素的，Array.prototype.indexOf采用了===进行比较，而includes采用了SameValueZero()进行比较，这是引擎内置的比较方式，没有对外接口，其实现采用了Map和Set，最直接的好处就是可以判断NaN。[NaN].includes(NaN) // true[NaN].indexOf(NaN) // -1Object.spread和Object.assi
2022-01-20 18:07:33
2530
原创 读书笔记（五）：对象和原型
1.new关键字首先创建一个空对象，这个对象将会作为执行构造函数之后返回的对象实例。使创建的空对象的原型（__proto__）指向构造函数的prototype属性。将这个空对象赋值给构造函数内部的this，并执行构造函数逻辑。根据构造函数执行逻辑，返回创建的对象或构造函数的显式返回值。function Person(name) => { this.name = name}const person = new newFunc(Person, 'jack')function n
2022-01-20 15:45:44
270
原创 读书笔记（四）：异步
1. 异步发展callback回调层层嵌套。Promise.then().then()…。generator生成器，yield，yield…。async/await是generator的语法糖，能自动执行生成器函数，await, await…。同步任务：当前主线程将要消化执行的任务，这些任务形成执行栈。异步任务：不进入主线程，而是进入任务队列，即不会马上进行的任务。这样的机制保证了虽然js是单线程的，但是对于一些耗时的任务，可以放入任务队列中，不会阻碍其他同步代码执行。2. setTim
2022-01-20 11:52:05
167
原创 废话调侃杂谈
1.作为一个过来人，我的建议是不要过来。2.我前脚刚走，后脚就能跟上。3.自从我长这么大以来，还是第一次长这么大。4.千里江陵一日还，半天只能还五百。5.如果你能多花点时间。。。，就会发现你多花了点时间。6.忽如一夜春风来，春风它爱来不来。7.如果不出意外的话，人没死，就会活着。8.人固有一死，或重于泰山，或轻于泰山。9.明白了，但却没有完全明白。10.抛开内容不谈，你说的还是很有道理的。11.但愿人长久，人长久，但愿吧。12.如果不出意外的话，你这么做可能会出意外。13.正所谓，能
2022-01-19 21:08:50
86
原创 读书笔记（三）：js基础
1. js数据类型及判断内置数据类型：null、undefined、boolean、number、string、object(function、array、date等)、symbol。typeof判断类型typeof null // 'object' const foo = () => 1typeof foo // 'function'const foo = {}typeof foo // 'object'const foo = []typeof foo // 'obj
2022-01-19 16:44:18
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人