👨⚖️：或者你写的一些东西，github上有么
💂♂️（犹豫良久，拿出一个项目）：您看下
👨⚖️（皱起了眉）：这代码写的不对啊，考虑的不够完善…
💂♂️：呃呃呃…
👨⚖️（诧异）：这里也有很明显的漏洞，这不像是一个三年经验的人写出的代码吧
💂♂️（满头大汗）：这这这…
👨⚖️: 回去等通知吧（面试基本完犊子~）
-
很多小伙伴面试都只注重“面子”，不注重“里子“
-
简历搞的高大上，牛皮吹的震天响
-
一看代码，提几个问题，立马原形毕露
-
实际上，我们写的每一行代码就是我们实力的最好证明，你的经验，你的技巧，你的习惯，都会在代码中展现。
-
所以，想要提升，想升职加薪迎娶白富美，必须从改善代码习惯开始
1.2 Javascript编码标准
-
实际上，编码标准是有争议的，每个人可能都有自己的标准，但对标准应该是什么样的，则似乎很少能达成共识。
-
但编码标准意味着，通过共同语言和一致的结构，把开发人员从无意义的工作中解放出来。把重心放在功能逻辑上去。
-
一个好的标准能提供清晰明了的意图，是有效工作所必需的。
比较好的Javascript编码应该符合以下标准：
-
编码错误的可能性降至最低（做好容错处理）
-
代码适合大规模的项目和团队(一致的、可读的、可扩展的、可维护的)
-
鼓励编码的效率、效果和复用（低耦合，高复用）
-
鼓励使用JavaScript的优点，避免使用它的缺点（缺点还是不少的，扬长避短）
-
开发团队通用，无排他性
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 按段落组织代码
在编排代码的时候，要以清晰明白为目标，而不是减少代码的字节数
该有的空格、空白都不能少
-
按逻辑段落组织代码，段落之间要空行
-
每一行最多只包含一条语句或赋值语句，但是允许每行同时声明多个变量
-
运算符和变量之间要有空格，更容易地识别变量
-
每个逗号之后要有空格
-
在段落内，相似的运算符要对齐
-
缩进注释，缩进量和所解释的代码相同
// 把一个或多个声明放在一行上，但每行只有一条赋值语句
let
z, x, c, v, d,
a = l,
b = 2,
arr = [1, 2, 3],
obj = {aa: 1, bb: ''张三"},
name = “法外狂徒张三”
;
// 在下一行段落的前面添加空行
// 函数将文本写入消息容器
print_msg = function ( msg_text ){
// 缩进注释，和它所描述的段落层级一致
// .text() 防止xss注入
$(‘#sl’).text( msg_text );
};
// 函数返回随机数
get_rangdom = function ( num_arg ){
return Math.random() * numn_arg;
};
// 初始化值
x = get_random( 10 );
y = get_random( 20 );
r = get_random( 360 );
// 添加空白，对齐相似的元素，相似的语句更容易阅读
x += 10 + num;
y -= 20 - num;
2.3 换行要一致
-
在运算符的前面换行，开发者检查更加方便
-
把后续的语句缩进一个层次，比如使用两个空格
-
在逗号分隔符的后面换行
-
方括号或者括号单独占一行。清楚地表明这是语句的结尾，不会迫使读者横向扫寻分号
// 将运算符放在左边，排成一列
let str = ‘我知道你也在向我靠近，’
-
‘星河万顷都是你的见面礼。’
-
‘所以我也走向了你，’
-
‘暮色千里皆是我的回礼。’
-
‘今夜星光月夜皆归你，我也归你~’
// 方括号单独占一行，下一条语句就容易识别了
// 使用尾部逗号，更容易维护
let addressArr = [
‘湖南省’, ‘湖北省’, ‘广西省’,
‘江西省’, ‘江苏省’, ‘内蒙古自治区’,
‘台湾省’, '澳门, ‘香港’,
];
3.1 变量
命名规则
-
变量名使用a - z、A - Z、0 - 9、下划线和$符号
-
变量名不要以数字开头
-
语义化（看其名，知其意）
作用域
-
当变量作用域是整个模块时使用驼峰式（模块名字空间的所有地方都可以访问该变量)
-
当变量作用域不是整个模块时使用下划线 (模块名字空间内的某个函数的局部变量)
-
确保所有模块作用域内的变量至少有两个音节，这样作用域就会很清晰（例如下：）
-
用户中心 ⇒ userCenter
-
商品列表 ⇒ goodsList
-
消息通知 ⇒ messageInfo
-
再来一组例子：
| 变量初始名 | 局部作用域 | 模块作用域 |
| — | — | — |
| str | direction_str | directionStr |
| id | goods_id | goodsId |
| msg | user_msg | userMsg |
- 全局变量用 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.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
5.1 提炼函数
-
在javascript开发中，大部分时间都在与函数打交道，所以希望这些函数有着良好的命名，函数体内包含的逻辑清晰明了。
-
如果一个函数过长，不得不加上若干注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构
-
如果在函数中有一段代码可以被独立出来，那最好把这些代码放进另外一个独立的函数中，这是一种很常见的优化工作。
-
项目越大，必须拆分得越细，好维护（函数也是如此）
-
千万不要一个函数从奶奶家写到外婆家去了
这样做的好处主要有以下几点：
-
避免出现超大函数
-
独立出来的函数有助于代码复用
-
独立出来的函数更容易被覆写
-
独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用
比如在一个负责取得用户信息的函数里面，还需要打印跟用户信息有关的信息，那么打印的语句就可以被封装在一个独立的函数里：
let getUserInfo = function(){
ajax( ‘http:// xxx.com/userInfo’, function( data ){
console.log( 'userId: ’ + data.userId );
console.log( 'userName: ’ + data.userName );
console.log( 'nickName: ’ + data.nickName );
});
};
//改成：
let getUserInfo = function(){
ajax( ‘http:// xxx.com/userInfo’, function( data ){
printDetails( data );
});
};
let printDetails = function( data ){
console.log( 'userId: ’ + data.userId );
console.log( 'userName: ’ + data.userName );
console.log( 'nickName: ’ + data.nickName );
};
5.2 尽量减少参数
-
调用一个函数时需要传入多个参数，那这个函数是让人望而生畏的（甚至调用起来还会骂娘~）
-
必须搞清楚这些参数代表的含义，必须小心翼翼地把它们按照顺序传入该函数。
-
在实际开发中，向函数传递参数不可避免，但应该尽量减少函数接收的参数数量
比如我们需要封装一个CSS操作库：
- 第一版的代码
function cssTransform(ele, attr, val){
// ele 要操作的元素
// attr 运动属性 缩放，旋转
// val 具体值
if(!ele.transform){
ele.transform = {};
}
if(typeof val === “undefined”){
// 取值阶段
// 取不到 设置默认值
if(typeof ele.transform[attr] === “undefined”){
switch(attr){
case “scale”:
case “scaleX”:
case “scaleY”:
case “scaleZ”:
// attr是scale 默认值是1 其它都是0
ele.transform[attr] = 1;
break;
default:
ele.transform[attr] = 0;
}
}
// 取值完毕 返回该值
return ele.transform[attr];
}else{
// 赋值阶段
ele.transform[attr] = val; // 设置属性 方便取值
let transformVal = “”;
for(var s in ele.transform){
switch(s){
case “scale”:
case “scaleX”:
case “scaleY”:
case “scaleZ”:
transformVal += " " + s + “(”+(ele.transform[s])+“)”;
break;
case “rotate”:
case “rotateX”:
case “rotateY”:
case “rotateZ”:
case “skewX”:
case “skewY”:
transformVal += " " + s + “(”+(ele.transform[s])+“deg)”;
break;
default:
transformVal += " " + s + “(”+(ele.transform[s])+“px)”;
}
ele.style.WebkitTransform = ele.style.transform = transformVal;
}
}
}
-
我们需要传入三个参数，这就导致了传参的复杂性
-
可以将它绑定到HTML元素上，减少传参
HTMLElement.prototype.cssTransform = function (prop, value){
var transform,
transformValue = “”;
if(this.transform === undefined) {
this.transform = transform = Object.create(null);
}
if(value !== undefined){
// 赋值阶段
this.transform[prop] = value;
transform = this.transform;
for(var name in transform){
switch(name){
case “scale”:
case “scaleX”:
case “scaleY”:
case “scaleZ”:
transformValue += " " + name + “(”+ transform[name]+“)”;
break;
case “rotate”:
case “rotateX”:
case “rotateY”:
case “rotateZ”:
case “skewX”:
case “skewY”:
transformValue += " " + name + “(”+ transform[name] + “deg)”;
break;
default:
transformValue += " " + name + “(”+ transform[name] + “px)”;
}
this.style.WebkitTransform = this.style.transform = transformValue;
}
}else{
// 取值
return this.transform[prop];
}
}
-
现在就只需要两个参数了
-
核心代码没变，事件直接绑定在元素上，每一个html都拥有这个原型方法
-
调用更加方便，传参更加简单
6.1 合并条件判断
-
如果一个函数体内有一些条件分支语句，而这些条件分支语句内部散布了一些重复的代码，那么就有必要进行合并去重工作。
-
假如有一个分页函数paging()，该函数接收一个参数currPage，currPage表示即将跳转的页码。
-
在跳转之前，为防止currPage传入过小或者过大的数字，要手动对它的值进行修正，详见如下代码
let paging = function( currPage ){
if ( currPage == 0 ){
currPage = 0;
jump( currPage ); // 跳转
}else if ( currPage == totalPage ){
currPage = totalPage;
jump( currPage ); // 跳转
}else{
jump( currPage ); // 跳转
}
};
- 可以看到，负责跳转的代码jump(currPage)在每个条件分支内都出现了，所以完全可以把这句代码独立出来
let paging = function( currPage ){
if ( currPage == 0 ){
currPage = 0;
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理，区别，亮点，作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
-
项目里用到了react，为什么要选择react，react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗？
-
React的jsx，函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西，接受几个参数
-
redux请求中间件如何处理并发
扫一扫
1994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
