让别人夸赞你的代码写得漂亮
共 6852字,需浏览 14分钟
·
2021-01-05 04:00
阅读本文大概需要 10 分钟。
来自:网络
1. 按强类型风格写代码
(1)定义变量的时候要指明类型,告诉 JS 解释器这个变量是什么数据类型的,而不要让解释器去猜,例如不好的写法:
var num,
str,
obj;
var num = 0,
str = '',
obj = null;
var num = 5;
num = "-" + num;
var num = 5;
var sign = "-" + num;
function getPrice(count){
if(count < 0) return "";
else return count * 100;
}
function getPrice(count){
if(count < 0) return -1;
else return count * 100;
}
2. 减少作用域查找
例如以下运行在全局作用域的代码:
<script>
var map = document.querySelector("#my-map");
map.style.height = "600px";
script>
<script>
!function(){
var map = document.querySelector("#my-map");
map.style.height = "600px";
}()
script>
闭包的作用在于可以让子级作用域使用它父级作用域的变量,同时这些变量在不同的闭包是不可见的。这样就导致了在查找某个变量的时候,如果当前作用域找不到,就得往它的父级作用域查找,一级一级地往上直到找到了,或者到了全局作用域还没找到。因此如果闭包嵌套得越深,那么变量查找的时间就越长。如下:
function getResult(count){
count++;
function process(){
var factor = 2;
return count * factor - 5;
}
return process();
}
function getResult(count){
count++;
function process(count){
var factor = 2;
return count * factor - 5;
}
return process(count);
}
var url = "";
if(window.location.protocal === "https:"){
url = "wss://xxx.com" + window.location.pathname + window.location.search;
}
var url = "";
var location = window.location;
if(location.protocal === "https:"){
url = "wss://xxx.com" + location.pathname + location.search;
}
3. 避免==的使用
if(typeof num != "undefined"){
}
var num = parseInt(value);
if(num == 10){
}
var totalPage = "5";
if(parseInt(totalPage) === 1){
}
if(a == b){
}
Expected ‘===’ and instead saw ‘==’.
if(a == b){
null == undefined //true
'' == '0' //false
0 == '' //true
0 == '0' //true
'
' == 0 //true
new String("abc") == "abc" //true
new Boolean(true) == true //true
true == 1 //true
4. 合并表达式
如上面的 getPrice 函数:
function getPrice(count){
if(count < 0) return -1;
else return count * 100;
}
function getPrice(count){
return count < 0 ? return -1 : count * 100;
}
function getPrice(e){return 0>e?-1:100*e}
连等是利用赋值运算表达式会返回所赋的值,并且执行顺序是从右到左的,如下:
overtime = favhouse = listingDetail = {...}
var age = 0;
if((age = +form.age.value) >= 18){
console.log("你是成年人");
} else {
consoe.log("小朋友,你还有" + (18 - age) + "就成年了");
}
利用自增也可以简化代码。如下,每发出一条消息,localMsgId 就自增 1:
chatService.sendMessage(localMsgId++, msgContent);
5. 减少魔数
dialogHandler.showQuestionNaire("seller", "sell", 5, true);
var naireType = "seller",
dialogType = "sell",
questionsCount = 5,
reloadWindow = true;
naireHandler.showNaire(naireType, dialogType, questionsCount, reloadWindow);
6. 使用 ES6 简化代码
有很多使用小函数的场景,如果写个 function,代码起码得写 3 行,但是用箭头函数一行就搞定了,例如实现数组从大到小排序:
var nums = [4, 8, 1, 9, 0];
nums.sort(function(a, b){
return b - a;
});
//输出[9, 8, 4, 1, 0]
var nums = [4, 8, 1, 9, 0];``nums.sort(a, b => b - a);
setTimeout(() => console.log("hi"), 3000)
虽然 ES6 的 class 和使用 function 的 prototype 本质上是一样的,都是用的原型。但是用 class 可以减少代码量,同时让代码看起来更加地高大上,使用 function 要写这么多:
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.addAge = function(){
this.age++;
};
Person.prototype.setName = function(name){
this.name = name;
};
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
addAge(){
this.age++;
}
setName(name){
this.name = name;
}
}
以前要用+号拼接:
var tpl =
'' +';
' 1' +
'
var tpl =
`
1
`;
var page = 5,
type = encodeURIComponet("#js");
var url = "/list?page=" + page + "&type=" + type;
var url = `/list?page=${page}&type=${type}`;
块级作用域变量也是 ES6 的一个特色,下面的代码是一个任务队列的模型抽象:
var tasks = [];
for(var i = 0; i < 4; i++){
tasks.push(function(){
console.log("i is " + i);
});
}
for(var j = 0; j < tasks.length; j++){
tasks[j]();
}
var tasks = [];
for(var i = 0; i < 4; i++){
!function(k){
tasks.push(function(){
console.log("i is " + k);
});
}(i);
}
for(var j = 0; j < tasks.length; j++){
tasks[j]();
}
var tasks = [];
for(let i = 0; i <= 4; i++){
tasks.push(function(){
console.log("i is " + i);
});
}
for(var j = 0; j < tasks.length; j++){
tasks[j]();
}
推荐阅读:
微信扫描二维码,关注我的公众号
朕已阅