11个Javascript小技巧帮你提升代码质量(小结)

// 逻辑都写在一起，需要将所有逻辑看完才知道这段代码是干嘛的，局部逻辑无法复用
function main() {
 $.ajax.get("/getData").then((res) => {
  const ul = document.getElementById("ul");
  ul.innerHTML = res.list.map(text => `
${text}
`).join("
");
  const list = document.getElementsByClassName("li");
  for (let i = 0; i  {
    // do something
   });
  }
 });
}

function getData() {
 return $.ajax.get("/getData").then((res) => res.data.list);
}
function showList(list) {
 const ul = document.getElementById("ul");
 ul.innerHTML = list.map(text => `
${text}
`).join("
");
}
function addEvent() {
 const list = document.getElementsByClassName("li");
 for (let i = 0; i  {
   // do something
  });
 }
}
// 逻辑清晰，一眼读懂每一步在做什么，某些提炼出来的函数还可以被复用
async function main() {
 const list = await getData(); // 获取数据
 showList(list); // 显示页面
 addEvent(); // 添加事件
}

// 合并前
function main( currPage ){
 if ( currPage <= 0 ){
  currPage = 0;
  jump( currPage ); // 跳转
 }else if ( currPage >= totalPage ){
  currPage = totalPage;
  jump( currPage ); // 跳转
 }else{
  jump( currPage ); // 跳转
 }
};

// 合并后
function main( currPage ){
 if ( currPage <= 0 ){
  currPage = 0;
 }else if ( currPage >= totalPage ){
  currPage = totalPage;
 }
 jump( currPage ); // 把jump 函数独立出来
};

// 根据不同季节决定打折力度
function getPrice( price ){
 var date = new Date();
 if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
  return price * 0.8;
 }
 return price;
};


// 是否是夏天
function isSummer(){
 var date = new Date();
 return date.getMonth() >= 6 && date.getMonth() <= 9;
};
// 提炼条件后
function getPrice( price ){
 if ( isSummer() ){
  return price * 0.8;
 }
 return price;
};

// 判断是什么浏览器
function getBrowser(){
 const str = navigator.userAgent;
 if (str.includes("QQBrowser")) {
 return "qq";
 } else if (str.includes("Chrome")) {
 return "chrome";
 } else if (str.includes("Safari")) {
  return "safri";
 } else if (str.includes("Firefox")) {
  return "firefox";
 } else if(explorer.indexOf("Opera") >= 0){
  return "opera";
 } else if (str.includes("msie")) {
  return "ie";
 } else {
  return "other";
 }
};


// 循环判断，将对应关系抽象为配置，更加清晰明确
function getBrowser(){
 const str = navigator.userAgent;
 const list = [
  {key: "QQBrowser", browser: "qq"},
  {key: "Chrome", browser: "chrome"},
  {key: "Safari", browser: "safari"},
  {key: "Firefox", browser: "firefox"},
  {key: "Opera", browser: "opera"},
  {key: "msie", browser: "ie"},
 ];
 for (let i = 0; i 

function del( obj ){
 var ret;
 if ( !obj.isReadOnly ){ // 不为只读的才能被删除
  if ( obj.isFolder ){ // 如果是文件夹
   ret = deleteFolder( obj );
  }else if ( obj.isFile ){ // 如果是文件
   ret = deleteFile( obj );
  }
 }
 return ret;
};

function del( obj ){
 if ( obj.isReadOnly ){ // 反转if 表达式
  return;
 }
 if ( obj.isFolder ){
  return deleteFolder( obj );
 }
 if ( obj.isFile ){
  return deleteFile( obj );
 }
};

function setUserInfo( id, name, address, sex, mobile, qq ){
 console.log( "id= " + id );
 console.log( "name= " +name );
 console.log( "address= " + address );
 console.log( "sex= " + sex );
 console.log( "mobile= " + mobile );
 console.log( "qq= " + qq );
};
setUserInfo( 1314, "sven", "shenzhen", "male", "137********", 377876679 );

function setUserInfo( obj ){
 console.log( "id= " + obj.id );
 console.log( "name= " + obj.name );
 console.log( "address= " + obj.address );
 console.log( "sex= " + obj.sex );
 console.log( "mobile= " + obj.mobile );
 console.log( "qq= " + obj.qq );
};
setUserInfo({
 id: 1314,
 name: "sven",
 address: "shenzhen",
 sex: "male",
 mobile: "137********",
 qq: 377876679
});

// 简单逻辑可以使用三目运算符
var global = typeof window !== "undefined" &＃63; window : this;

// 复杂逻辑不适合使用
var ok = isString &＃63; (isTooLang &＃63; 2 : (isTooShort &＃63; 1 : 0)) : -1;

var User = {
 id: null,
 name: null,
 setId: function( id ){
  this.id = id;
  return this;
 },
 setName: function( name ){
  this.name = name;
  return this;
 }
};
User
 .setId( 1314 )
 .setName( "sven" );

var user = new User();
user.setId( 1314 );
user.setName( "sven" );

var a = 1;
// 非纯函数
function sum(b) {
 return a + b;
}
// 非纯函数
function sum(b) {
 a = 2;
 return b;
}
// 非纯函数
function sum(b) {
 return b + Math.random();
}


// 纯函数
function sum (b, c) {
 return b + c;
}