前端代码审查交付说明及审查记录
对 Review 的评论进行分级,不同级别的结果打上不同的 Tag
blocker: 表示这个代码行的问题必须要修改!
optional:表示这个代码行的问题可改可不改!
question:表示对这个代码行不理解,有问题需要问,被审查者需要针对问题进行回复澄清!
示例
每次代码审查完成后, 以示例中的形式发送到群里进行同频汇报。英文缩写: CMNT; 中文全称: v. 注释, 评论; 英文全称: Comment.英文缩写: CVR;中文全称: v. 覆盖, 涉及, 包含;英文全称: Cover .
CR: [blocker]【团队管理】{业务员管理}-业务员绑定客户时,增加客户标签筛选CMNT: 接口请求重复,在产品模块下有 getProduct 方法,与此次新增的 getProductList 方法 注册的接口是一样的.CVR: [VBOM]gbcloud-admin/src/views/dataCenter/components/PanelGroup.vuegbcloud-admin/src/views/dataCenter/coupon/index.vuegbcloud-ad ...
十大排序算法之冒泡排序
什么是冒泡排序?冒泡排序的英文名是 Bubble Sort, 是一种最基础的交换排序。它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢 浮 到数列的顶端(升序或降序排列), 就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样,故名 冒泡排序。
算法原理
比较两个相邻的元素,将值大(或小,根据升序还是降序决定)的元素交换到右边,如果遇到相等的值不进行交换。
对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数(降序则是最小的数)。
针对所有的元素重复以上的步骤,除了最后一个。
持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。
分析思路
比较轮数, 是数组的长度减 1, 因为最后一轮只有一个元素, 每一轮决定一个已排序序列
每一轮的比较次数, 是数组长度减 1, 因为最后一个元素不需要做比较, 每一次比较决定是否更换位置
比较结果,以升序排序为例,依次比较相邻 ...
设计模式之单例模式
什么是单例模式单例模式是一种常用的软件设计模式,其定义是单例对象的类只能允许一个实例存在。
单例模式实现思路单例的实现主要是通过以下两个步骤:
将该类的 构造方法 定义为 私有方法,这样其他处的代码就 无法通过调用该类的构造方法来实例化该类的对象,只有通过该类提供的静态方法来得到该类的唯一实例;
在该类内提供一个 静态方法,当我们调用这个方法时,如果类持有的引用不为空就返回这个引用,如果类保持的引用为空就创建该类的实例并将实例的引用赋予该类保持的引用。
单例模式三要素
私有构造方法
私有静态引用指向自己实例
以自己实例为返回值的公有静态方法
单例模式设计原则确保一个类只有一个实例,自行实例化并向系统提供这个实例
单例模式(Singleton)类图UNREGISTEREDUNREGISTEREDUNREGISTEREDUNREGISTEREDUNREGISTEREDSingleton-instance: Singleton-constructor()+getInstance(): Singleton
具体代码实现
代码演示部分为 TypeScript 语法
123456789 ...
Vue js 高阶技巧指南(持续更新)
现在,Vue.js 已成为前端开发的热门框架。有很多工程师利用 Vue.js 的便利性和强大功能。但是,我们完成的某些解决方案可能未遵循最佳做法。今天本文就盘点一下那些鲜为人知的 Vue 技术。
路由器参数解耦相信这是大多数人处理组件中路由参数的方式:
1234567export default { methods: { getRouteParamsId() { return this.$route.query.id } }}
在组件内部使用 $route 会对某个 URL 产生强耦合,这限制了组件的灵活性。
正确的解决方案是向路由器添加 props。
12345678// 路由配置const router = new VueRouter({ routes: [{ path: '/:id', component: Component, props: true } ...
2021 Web前端开发入坑指南
前景近日偶然间入了一个 全栈架构师 的微信群,可明明是 全栈架构师 的群,可里面讨论、交流的却是极度 小白 的问题,可能是群主推广的问题吧,经过几天的交流我发现,大家讨论的比较多的问题都与前端如何上手有关,对前端市场的不明确,对前端技术栈的迷茫等等,让我回想起多年前我刚步入前端开发的场景与心情,于是我决定,专门写一篇,前端从 0 到 1 相关问题的博文,以一个过来人的身份,来给大家做个引路人,希望大家不会像我从业一样 山路十八弯。
Q & A (本文以问答形式来探讨前端问题,如有补充问题,可在评论区留下。)
有些部分是针对对前端完全不了解的新人来讨论的,如果已经有所了解的同学可以直接跳过,文笔不好、原创码字,老鸟勿喷,谢谢!
问题 1:什么是前端?什么是前端?前端的定位如何? 首先得说说这个 网站建设 / Web开发,顾名思义,就是做一个网站(最初是没有移动端、小程序的),大致流程如下:
产品(老板)设计原型图(草稿),与客户洽谈;
谈妥了之后,设计师按照原型做设计图;
设计定稿了之后,设计图交由前端开发制作网页;
后端设计数据库,接口,与前端对接数据;
测试工程师测试网页 ...
彻底告别 Cannot read property *** of undefined
前言你是否也经常被下面这种报错整得抓狂?
“TypeError: Cannot read property *** of undefined”
“TypeError: Cannot read property *** of null”
通常这种报错,在控制台打印的都是堆栈信息,往往很难定位到具体位置,而且这种报错信息是很容易复发的,所以我们要经常脑神费心的去一次又一次的解决这个问题,这是一个前端通病大家都会遇到,今天这篇文章的主题就是找一个方法来完美解决这个问题!
分析原因先看一段代码:
1const firstName = message.body.user.firstName;
假设 message 下面并没有 body,那么就会报错: Cannot read property user of undefined
假设 message 下面有 body 但是值为 null,那么就会报错: Cannot read property user of null
同理假设 meseage.body 没问题,但是 user 没有定义或者值为 null 会报错 Cannot read p ...
JS 模块化规范全面解读
前言
CommonJS 听说过?AMD 听说过,CMD也听说过,还有个ES6 模块化。当项目里使用的时候,我们是否真正知道,你用的到底基于哪个规范的模块化?
Ps: 由于文章太长,为了方便阅读,建议先看右侧文章目录,了解大纲之后逐步阅读。
第一章: 追溯根源,为何前端需要模块化?为了彻底弄清楚模块化这个东西,我们要从最开始模块化的起源说起。
无模块化的原始时代最开始 js 只是作为一个脚本语言来使用,做一些简单的表单校验,动画实现等等。 代码都是这样的,直接把代码写进 <script> 标签里,代码量非常少。
123456789101112131415<script> if (true) { // ... } else { // ... } for (var i = 0; i < 100; i++) { // ... } document.getElementById('button').onClick = function () { // ...
JS 应对小数运算精度误差的解决方案
类库
通常这种对精度要求高的计算都应该交给后端去计算和存储,因为后端有成熟的库来解决这种计算问题。前端也有几个不错的类库
Math.jsMath.js 是专门为 JavaScript 和 Node.js 提供的一个广泛的数学库。它具有灵活的表达式解析器,支持符号计算,配有大量内置函数和常量,并提供集成解决方案来处理不同的数据类型, 像数字,大数字(超出安全数的数字),复数,分数,单位和矩阵。 功能强大,易于使用。
官网: http://mathjs.org/GitHub: https://github.com/josdejong/mathjs
decimal.js为 JavaScript 提供十进制类型的任意精度数值。
官网:http://mikemcl.github.io/decimal.js/GitHub:https://github.com/MikeMcl/decimal.js
big.js官网:http://mikemcl.github.io/big.js
GitHub:https://github.com/MikeMcl/big.js/
这几个类库帮我们解决很多这类问题, ...
事件的节流(throttle)与防抖(debounce)
有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面。例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒内触发数千次,这可能会导致一些严重的性能问题。
构建应用程序,出现滚动、窗口大小调整或按下键等事件请务必考虑 防抖(Debouncing) 和 函数节流(Throttling)来提升页面速度和性能。这两兄弟的本质都是以闭包的形式存在。通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息,最后用 setTimeout 来控制事件的触发频率。
Throttle: 第一个人说了算throttle 的主要思想在于:在某段时间内,不管你触发了多少次回调,都只认第一次,并在计时结束时给予响应。
这个故事里,”裁判” 就是我们的 节流阀, 他控制参赛者吃东西的时机, “参赛者吃东西” 就是我们频繁操作事件而不断涌入的回调任务,它受 “裁判” 的控制, 而计时器 就是上文提到的以 自由变量 形式存在的时间信息,它是 “裁判” 决定是否停止比赛的依据,最后,等待比赛结果就对应到回调函数的执行。
总结下来,所谓的 节流,是通过在一段时 ...
ES6 之 Promise 深度剖析
Promise基本上现在不管是大厂还是小厂,promise 已经成为了面试必考知识点;关于 Promise,想必大家都又所了解,可是又掌握了多少,真正面试的时候,又能有多少把握呢?
常见面试题首先,我们以常见的 Promise 面试题为切入点,我们看看面试官们都爱考什么:
Promise 的出现 解决了什么问题 ?
Promise 的基础特征 ?
Promise 常用的 API 有哪些 ?
能不能手写一个符合 Promise/A+ 规范的 Promise?
then 的链式调用 & 值穿透特性原理
Promise 有什么缺陷,可以如何解决?
这几个问题由浅入深,我们一个一个来看:
Promise 出现的原因在 Promise 出现以前,在我们处理多个异步请求嵌套时,代码往往是这样的。。。
123456789let fs = require('fs')fs.readFile('./name.txt','utf8',function(err,data){ fs.readFile(data, ...