前端代码质量探索之路(四)

在软件设计中,为了提高软件系统的可维护性和可复用性,增加软件的可扩展性和灵活性,程序员要尽量根据6条原则来开发程序,从而提高软件开发效率、节约软件开发成本和维护成本。 开闭原则 对扩展开放,对修改关闭。 在程序需要进行扩展的时候,不能去修改原有的代码,实现一个热插拔的效果,简言之,是为了使程序的扩展性好,易于维护和升级。 想要达到这样的效果,我们需要使用==接口和实现类== 因为抽象类灵活性好,适应性广,只要抽象的合理,可以基于保持软件架构的稳定,而软件中易变的细节可以从抽象派生来的实现类来进行扩展,当软件需要发生变化时,只需要根据需求重新派生一个实现类来扩展就可以了。 下边以”搜狗输入法
阅读全文〉

前端代码质量探索之路(三)

如何保证数据类型一致性? 这篇文章使用讲述如何使用typescript来保证数据类型一致性,从而提高代码质量。 typescrypt 配置有哪些 使用tsc –init命令创建一个tsconfig.json文件来查看配置项(如果你的typescrypt是作为项目依赖安装,运行命令 yarn tsc –init),生成的配置文件如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 4
阅读全文〉

前端代码质量探索之路(二)

这篇文章主要讲述如何实现风格一致性,从而提高代码的可读性,可理解性。 为了保证风格一致性,我们需要做的事情有: 1. 制定编码风格规则; 2. 编写代码的过程中,使用规则约束编码,IDE自动提示与风格规则冲突的代码,自动修复代码风格问题; 3. 提交代码之前,自动校验代码风格,校验失败,阻止提交; 今天用到的工具是eslint, prettier, husky, lint-staged eslint能解决什么问题 1. 代码质量问题:写法不对,可能存在问题 (代码错误问题) 2. 代码风格问题:风格不符合既定规则(一致性问题) eslint工作原理 源代码 -> espre
阅读全文〉

前端代码质量探索之路(一)

工作越久,遇到项目越大,越来越感受到代码质量的重要性。 我觉得代码提高代码质量,可以从两个方面入手。 一是外部条件,使用工具,规范,模式来对代码加以限制,不得乱写。 二是内部修行,从思维层面来提高代码质量。 什么代码是高质量代码 讨论怎么提高代码质量之前,首先要明白什么样的代码才是高质量的代码,给我们自己设定一个目标。 我们的代码,输出给两类目标用户,一类是程序员,一类是机器。 对程序员用户来说,他对你的代码一定是有两种权限,读和写(改); 对机器用户来说,他对你的代码只有一种权限,那就是执行; 所以对程序员用户来说,高质量的代码意味着代码的可读性高,容易理解,对应着读权限,
阅读全文〉

阿里前端开发规范

规范的目的是为了编写高质量的代码,让你的团队成员每天得心情都是愉悦的,大家在一起是快乐的。 引自《阿里规约》的开头片段: 现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式一起做事,提升协作效率,降低沟通成本。代码的字里行间流淌的是软件系统的血液,质量的提升是尽可能少踩坑,杜绝踩重复的坑,切实提升系统稳定性,码出质量。 一、编程规约
阅读全文〉

面试题--如何统计页面停留时间?

两个指标 停留总时间: * 多页应用指页面进入到离开(load 到 beforeunload)的总时间 * 单页应用指的一个路由变化到另一个路由变化的总时间,当然也包括onload/beforeunload) 活跃时间 * 指的是当前页面所在tab为focus状态 如何统计总时间 多页应用的总停留时间的统计方式 直接监听页面的window.onload 和beforeunload 事件 并统计事件; 多页应用(History)的总停留事件的统计方式 引起路由变化的只有两个api:history.pushState 和 history.replaceState 但是hist
阅读全文〉

面试题--常见css面试题

1.什么是CSS盒模型? CSS盒子模型是用来描述如何将元素渲染成矩形框的规则。标准盒子模型规定,元素渲染时由四个框组成,从内到外分别时content-box,padding-box,border-box,margin-box。 标准盒子模型中css指定的width为content-box的width; 低版本的ID盒模型的css指定的width为border-box的width; 2.CSS有哪些选择器?优先级高低? 选择器描述名称*匹配所有元素通配选择器E匹配所有E元素(即,E类型的元素)类型选择器(标签选择器)E F匹配所有E元素后代中的F元素后代选择器E > F匹配所有E元素
阅读全文〉

面试题--什么是队头阻塞?

通常我们提到队头阻塞,指的可能是TCP协议中的队头阻塞,但是HTTP1.1中也有一个类似TCP队头阻塞的问题,下面各自介绍一下。 TCP队头阻塞 队头阻塞(head-of-line blocking)发生在一个TCP分节丢失,导致其后续分节不按序到达接收端的时候。该后续分节将被接收端一直保持直到丢失的第一个分节被发送端重传并到达接收端为止。该后续分节的延迟递送确保接收应用进程能够按照发送端的发送顺序接收数据。这种为了达到完全有序而引入的延迟机制非常有用,但也有不利之处。 假设在单个TCP连接上发送语义独立的消息,比如说服务器可能发送3幅不同的图像供Web浏览器显示。为了营造这几幅图像在用户
阅读全文〉

linux 被死掉的进程占用空间怎么释放

被死掉的进程占用空间怎么释放 当发现 df -h 和 du -h 查询的占用量不一样的时候,可能是某些已经挂掉的进程占用了硬盘空间。 查出已经挂掉的进程 1 lsof -n|grep deleted 杀掉这些进程 1 kill -g xxxx 清理tmp目录 使用tmpwatch/tmpreaper 1 2 3 4 apt install tmpreaper // 删除10天没有访问的文件 tmpreaper 10d /tmp 详细使用说明
阅读全文〉