前端实习记录 — 代码规范 编码惯例 性能优化
写这篇文章的原因
这篇文章是想记录进入公司接触到项目后，在项目中遇到的一些代码规范问题，leader教我们的规范以及自己私下去学习的一些代码规范，代码规范真的很重要！！
进入公司三天后开始接触项目，该项目是敏捷开发，我们部门任务是要将该项目迭代到下一个稳定版本。噩梦就是从这开始了，开始迭代版本后我终于明白了为什么那些有经验的程序员很看重代码规范的原因了，因为不注重代码规范，真的需要浪费很多时间去看懂别人写的啥！！！
这个项目，大多没有注释，类名普通（比如什么“main”，“container”这种），缩进不统一、变量名方法名命名稀奇古怪（什么“OK”这种方法名都整出来了）等等还有很多问题。接下来我分享一些我目前学到的一些代码规范，希望对大家有帮助。
1、sass & BEM命名规范
sass官网：戳我前往
sass（也叫scss）非常好用，写起来比css方便很多，而且之后进入工作应该大多都是用sass，入门也非常简单，我是因为公司项目用的sass，所以我花了两天时间去官网学了学，基本项目中用到的就都能看懂了。
BEM：B（Block）、E（Element）、M（Modifier），是由Yandex团队提出来的前端CSS命名方法。一般是这样命名：B__E-M，直接上例子：
比如我有一段这样的html结构：最开头的div我写的Test，在公司我们一般是根据具体功能写或者写这个文件的文件名。
<div class="Test"><div class="Test__fiflter"><div class="Test__fiflter-content"></div></div><div class="Test__searchResult"></div></div>然后呢就可以结合Sass来写样式：
<style scoped lang="scss">.Test{/* todo */&__fiflter{/* todo */&-content{/* todo */}}&__searchResult{/* todo */}}</style>这只是最基本的功能，目的是为了让结构更清晰，写样式时也更方便，但不是任何时候都可以用BEM命名，当结构有明确的结构级联关系时应该用，其他时候看情况。
”&“是sass最基本的一个功能，sass在项目中有很大作用，比如定义全局样式变量，我之前一直不明白为什么要把一个样式为了定义成全局写得那么复杂，比如把一个颜色”white“写成”primary-color“，后来leader告诉我，是为了方便之后再迭代的时候方便维护，也是从这一次开始我才有了写规范代码、可维护性代码的意识！
sass有很多功能，建议大家都去官网学两遍，之后要用的话就算忘了去官网瞟一眼也很快的！
2、一些基本的JS代码规范
说明：大多都是从W3C官网以及红宝石书学的。
1）变量名、函数名驼峰式写法；
2）变量名用名词；
3）函数名以动词开始；如： getName()，isDisabled()
4）常量值大写并以下划线相接；
5）运算符周围留空格；
6）代码缩进用4个空格，不要用tabs；
7）在以下地方都应写注释：函数和方法、大型代码块、复杂的算法；
8）变量类型透明化；如 let flag = false // 布尔值 let name = "" // 字符串
3、编码惯例
1）不声明全局变量
- 一方面，全局变量和全局函数有可能会被覆盖，所以不安全。
- 另一方面，和JS的垃圾回收机制有关，全局变量是在window下的变量，只要window本身不被干掉，全局变量就不会消失，所以造成了”内存泄漏“，就是比如你一个变量里那个值你只想用一次，你把它声明为了全局，那么它会一直存在，占用内存，垃圾回收机制不会定时去回收全局变量的，只会回收局部变量。
- 还有一点在性能中“避免全局查找”中讲到。
所以请使用局部变量代替全局变量。
2）用const、let 代替 var
在项目中我经常看见前辈写的代码基本都是用let和const，很少用var。
他们的区别我们都知道，比如let、const有块级作用域，var是函数作用域，然而我以前只是知道”这句话“而已，不明白有什么用。现在我来告诉大家。
- 也有一部分垃圾回收机制的原因，因为const、let是块级作用域的关系，垃圾回收机制能更早的发现这两个关键字声明的变量并把他们回收（因为大多数情况下块级作用域比函数作用域更早终止）。
- 先使用const、let次之。不知道大家知不知道静态代码分析，使用const有利于静态代码分析工具来帮助我们分析代码，当我们知道一个值未来会被改变时就用let，这样对于后期代码检查有非常大的帮助。
这些编码惯例都有助于改善性能，特别是使用var这个习惯一定要改。
3）不要new object()
图片来自W3C官网
原因：
- new Object()本质上是方法调用，所以就需要在Object的原型链上去找那些Array、RegExp等，找到后又需要堆栈来保存，方法调用结束后又要释放堆栈。所以耗费时间。
- new String、Number、Boolean这三个返回的是他们对应的实例，看下面打印的类型就能理解：
let obj = new Number('25')console.log(typeof(obj)) // objectlet obj1 = Number('25')console.log(typeof(obj1)) // numberlet str = new String('123') console.log(typeof(str)) // objectlet str1 = String('123')console.log(typeof(str1)) // stringlet bool = new String(true)console.log(typeof(bool)) // objectlet bool1 = Boolean(true)console.log(typeof(bool1)) // boolean - 还有另一方面”语句最少化“，将在下面性能中讲到。
4）不要使用eval() 和 with()
- eval()函数用于将文本当作代码来运行，这肯定是不安全的，不要用！
- with函数个人感觉没啥子用，它主要就是让使用某个变量时更简单一点，但是用局部变量同样可以达到效果。with语句会创建自己的作用域，会加长代码中的作用域链，所以最好不要用！
最重要的几个编码惯例暂时想到这么多，以后有新的会及时更新。
5）不要连续赋值
比如 let a = b = c = 1;
这行代码确实将a、b、c都赋值为1了，但是b和c会被声明为全局变量。
4、性能优化
1）简化循环语句
这个优化不仅适用于JS，任何语言这样做都可以加快速度，我也是以前看大佬在刷力扣题时做优化看到的。for循环中，循环每执行一次，循环中的每条语句都会被执行。
for(let i = 0; i < arr.length； i++)；
这条for循环语句，每次都会去获取arr的长度，所以都做重复的事情，所以应该修改一下：
let i；
let len = arr.length；
for( i = 0; i < len； i++)；
这样只需要访问一次就行了。其实任何需要用到两次以上的类似这种的值都应该用个单独变量去保存起来，这样会加快执行速度。
2）语句最少化
每一行JS代码都需要JS引擎去解析的，以最少的代码达到目的是开发人员想要的效果。
下面两个例子：声明数组和对象时，一行代码替代上面了四行代码。
// bad new object
let arr = new Array(3)
arr[0] = 1
arr[1] = 2
arr[2] = 3// good 字面量方式
let arr = [1, 2, 3]// bad
let student = new Object();
student.name = "xx";
student.age = 11;
student.sayHello = function(){ console.log("Hello") };// good
let student = {name:"xx",age:11,sayHello:function(){console.log("Hello")}
};声明变量：
// bad
let name = "xxx";
let name1 = "zzz";
let name2 = "ccc";// good
let name = "xxx", name1 = "zzz",name2 = "ccc"; 3) 作用域意识 — 避免全局查找
感谢红宝石书！我从来没想过这个问题，使用全局变量和全局函数相比于局部肯定更慢，因为访问全局变量需要一层一层往上面查找作用域，会一直找到全局作用域。
举个vue的例子：
当你在vuex中定义了一个state为name，那么在组件中想要取到这个state的话，直接取应该这样写：
this.$store.state.name，每使用一次点，就要往对应的作用域去查找，如果还使用了module，那么写起来更麻烦，加入module名字为test，那么组件中取值就应该这样取：
this.$store.test.state.name，这样就更麻烦了。
想想每次取值都要写那么一长串，不仅难写还耗费性能。所以vuex提供了方案让我们这样取值：
使用mapState，这样之后要取vuex里的这个值，直接用“name”就行了。
computed:{...mapState({name: (state) => state.test.name})
}在JS中，使用局部变量来保存就行了，这样就需要取全局查找一次作用域。所以学好了JS，再去搞懂vue底层原理真的就容易多了。
有不对的地方，希望各位大佬多多指正！
前端实习记录 — 代码规范 编码惯例 性能优化相关推荐
- 前端工程化实践 - 代码规范 提交规范 构建流程 Monorepo（附 React Native 案例）
前端工程化实践 - 代码规范 & 提交规范 & 构建流程 & Monorepo 前言 仓库策略 Multirepo 什么是 Multirepo? Multirepo 的优点 M ...
- 基于 React 项目前端团队推行代码规范及代码质量，真香（姐妹篇）
前言 大家好,我是虚竹. 2022年是我们的一次重大技术栈转型(尝试.试错.挑战.精进),发动组员学习React新技术,前端小组采用主流的前端框架基于React.React Native系列生态支撑公 ...
- 最新前端vue，js，css，性能优化面试题66道题
这些是我总结的前端常会遇到的面试题,大家可以多多参考 希望大家可以留下意见,我也可以吸收不足 1.js其中基本数据类型有哪些 五种: undefined.null.Boolean.Number和Str ...
- 前端jquery、vue、react之性能优化
一.jquery 选择器性能优化建议 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. $( '#content' ).hide( ...
- 阿里P8架构师谈：Web前端、应用服务器、数据库SQL等性能优化总结
web前端性能优化 Web前端指网站业务逻辑之前的部分,包括: 1.浏览器加载 2.网站视图模型 3.图片服务 4.CDN服务等 主要优化手段有优化浏览器访问,使用反向代理,CDN等. 1.浏览器访问 ...
- canvas刷新_【前端冷知识】Canvas 滤镜的性能优化
最近几天没有及时更新,是因为这几天在忙一个项目mesh.js,这个项目是一个基于Canvas2D和WebGL的跨平台图形系统,提供底层的高性能API,同时也将是未来新版SpriteJS的底层渲染引擎. ...
- 前端利器，6 款开源 Web 性能优化辅助工具推荐
转自:原文链接 Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分.当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验. 下面推荐几款 Web 性能优化辅助工具推荐 ...
- Python代码编写中的性能优化点
1. 交换赋值 ##不推荐 temp = a a = b b = a ##推荐 a, b = b, a # 先生成一个元组(tuple)对象,然后unpack 2. Unpacking ##不推荐 l ...
- 前端性能优化常用代码
前端性能优化常用代码 为什么要做性能优化?性能优化到底有多重要? 网站的性能优化对于用户的留存率.转化率有很大的影响,所以对于前端开发来说性能优化能力也是重要的考察点. 性能优化的点非常的多,有的小伙 ...
最新文章
- Quixel megascans模型材质贴图合集包
- C语言EOF是什么？
- js 中使用 时间datetime 类型到前端iOS 不兼容问题
- asp.net 页面静态化
- 无需第三方，使用Mac预览合并多张图片
- C 温故知新 之 指针:函数指针变量、指针型函数
- 微软私有云解决方案_毕马威 AI 工厂携手微软云技术 | 共创人工智能发展，共建创新解决方案...
- 老毛子最想固件，支持打印机了
- 机器学习视频课程（超清完整11周）分享给大家！
- windows超级终端介绍及widows7超级终端下载
- 国际道教协会黄世真道长为《中华辟谷养生》题写序言！
- netbeans插件推荐
- Linux中JAVA服务器CPU占用过高(分析解决方法)
- 达人评测 i7 13700和i7 12700选哪个
- 【推荐算法 学习与复现】-- 深度学习系列 -- NFM
- R语言中的线性判别分析
- MEC的云边协同分析
- The Dirichlet Distribution 狄利克雷分布
- 吴恩达机器学习课程：编程练习 | (7) ex7-kmeans and PCA
- 助创cms二手车众筹系统：汽车众筹平台绝佳时机来临！