1. 看你的代码就知道你几斤几两
1.1 面试常会犯的错
💂♂️：面试者
👨⚖️：面试官
面试前
💂♂️：先把简历写好，机构老师特别交代：一出去就要说三年工作经验👲
💂♂️：面试题要背，工资不能要低了~
💂♂️：包装一下
💂♂️：…
面试中
👨⚖️：问题回答的不错，可以看看你最近做的项目么？
💂♂️：这这这…
👨⚖️：或者你写的一些东西，github上有么
💂♂️（犹豫良久，拿出一个项目）：您看下
👨⚖️（皱起了眉）：这代码写的不对啊，考虑的不够完善…
💂♂️：呃呃呃…
👨⚖️（诧异）：这里也有很明显的漏洞，这不像是一个三年经验的人写出的代码吧
💂♂️（满头大汗）：这这这…
👨⚖️: 回去等通知吧（面试基本完犊子~）
很多小伙伴面试都只注重“面子”，不注重“里子“
简历搞的高大上，牛皮吹的震天响
一看代码，提几个问题，立马原形毕露
实际上，我们写的每一行代码就是我们实力的最好证明，你的经验，你的技巧，你的习惯，都会在代码中展现。
所以，想要提升，想升职加薪迎娶白富美，必须从改善代码习惯开始
1.2 Javascript编码标准
实际上，编码标准是有争议的，每个人可能都有自己的标准，但对标准应该是什么样的，则似乎很少能达成共识。
但编码标准意味着，通过共同语言和一致的结构，把开发人员从无意义的工作中解放出来。把重心放在功能逻辑上去。
一个好的标准能提供清晰明了的意图，是有效工作所必需的。
比较好的Javascript编码应该符合以下标准：
编码错误的可能性降至最低（做好容错处理）
代码适合大规模的项目和团队(一致的、可读的、可扩展的、可维护的)
鼓励编码的效率、效果和复用（低耦合，高复用）
鼓励使用JavaScript的优点，避免使用它的缺点（缺点还是不少的，扬长避短）
开发团队通用，无排他性
2. 编程标准
2.1 使用一致的缩进和行长
代码被阅读的次数比编写它的次数要多得多
所以维护性、可读性是第一的（如果你不想被后面接手的人骂娘的话，就要做好这点）
不知道大家有没有发现，报纸上的文本列都在50~80个字符的长度之间。
对人类的眼睛来说，超过80个字符的某一行，看起来会逐渐变得吃力（有相关科学研究表明）
所以我们得出来的结论是：
每级代码缩进两个空格
每行限制为78个字符
这也是大厂通用写法，最为标准， 代码示例：
class Index extends Component { state = { navList: [ { name: '全部', index: 0, key: 'all' }, { name: '展示中', index: 1, key: 'sell' }, { name: '已下架', index: 2, key: 'out' }, ], pageTop: 0, navActive: 0, currentKey: 'all', page: 1, goodsData: {}, hasMore: true, listLoading: false } }
2.2 按段落组织代码
在编排代码的时候，要以清晰明白为目标，而不是减少代码的字节数
该有的空格、空白都不能少
按逻辑段落组织代码，段落之间要空行
每一行最多只包含一条语句或赋值语句，但是允许每行同时声明多个变量
运算符和变量之间要有空格，更容易地识别变量
每个逗号之后要有空格
在段落内，相似的运算符要对齐
缩进注释，缩进量和所解释的代码相同
3. 命名规范
3.1 变量
命名规则
变量名使用a - z、A - Z、0 - 9、下划线和$符号
变量名不要以数字开头
语义化（看其名，知其意）
作用域
当变量作用域是整个模块时使用驼峰式（模块名字空间的所有地方都可以访问该变量)
当变量作用域不是整个模块时使用下划线 (模块名字空间内的某个函数的局部变量)
确保所有模块作用域内的变量至少有两个音节，这样作用域就会很清晰（例如下：）
用户中心 ⇒ userCenter
商品列表 ⇒ goodsList
消息通知 ⇒ messageInfo
再来一组例子：
全局变量用 const 定义，常量性质，字母全部大写（尽量少定义）
3.2 命名空间
早期的JavaScript代码比较简单，单独在一张页面上使用，所以大部分时间不需要考虑命名空间的问题，使用全局变量，而不会有什么影响。
但是随着JavaScript应用的蓬勃发展和第三方类库的普遍使用，全局变量的数据可能会急剧上升
地域之门从此便开启了。（比如，当两个代码库声明了相同的全局变量时）
使用单一的全局函数，把其他所有变量的作用域限制在该函数里面，就可以极大地减少这种问题
// 模拟一个第三方库 => jQuery (function(window){ // 此变量只会在此区域生效，使用完之后垃圾回收机制自动回收 // 不会污染全局变量 let jquery = {}; })(window)
- 命名空间的细粒度划分
// 在 jquery.js 中 let jquery = (function () { // some code here }()); // 在 jquery.dom.js 中 let jquery.dom= (function () { // some code here }()); // 在 jquery.css.js 中 let jquery.css = (function () { // some code here }());
4. 松耦合，高复用
4.1 什么叫耦合？
指一程序中，模块及模块之间信息或参数依赖的程度（官方解释）
举个例子：
多个零件在一起，组成了一辆车，各零件之间存在耦合
电脑主机与显示屏，存在耦合
在程序语言中，也会有耦合，比如A模块依赖于B模块
我们通常是不需要耦合度很高的，除非特定组件，这样才可以达到高复用
举个例子，比如布加迪的轮胎，是找米其林高度定制的，只能适用于布加迪车型，其它品牌车型是用不了的（耦合度越高，复用性越低）
- 而电脑主机与显示器，一般耦合度就很低了，A品牌电脑主机可以用B,C,D品牌各型号的显示器，所以复用性高，可以自由组合。
4.2 松耦合
- 当修改一个组件而不需要更改其他组件时，就做到了松耦合
- 耦合度视情况而定，复用性组件必须低耦合
如何松耦合？
- 将JS从CSS中抽离：不要使用CSS表达式
//不好的做法 .box{width: expression(document.body.offsetWidth + ’px')}
将CSS从JS中抽离：通过JS修改CSS样式时，使用className或classList，不要逐条修改style样式
//不好的做法一 ele.style.color = 'red'; ele.style.left= '10px'; //不好的做法二 ele.style.cssText ='color:red;left:10px;';
]
.reveal{color:red;left:10px;} //好的做法一 ele.className += 'reveal'; //好的做法二 ele.classList.add('reveal');
- 将JS从HTML中抽离：从JS文件放入外置文件中
- 将HTML从JS中抽离：不要在innerHTML中拼接DOM结构，而是使用字符串模板，如handlerbars
