1 2 3 4

js规范

一.命名

1.文件夹命名:文件夹、文件的命名与命名空间应能代表代码功能,可读性强,如hub
2.函数和变量命名:
具有意义的驼峰命名,如hubList;
变量函数名禁止使用关键字和保留字,禁止重新定义(不能重名)或定义不用
3.常量:大写字母,如HUBLIST

二.编码

采用统一的缩进方式排版代码。缩进为2个ASCII空格,句末必须用分号结尾(待定,vue就无分号)

三.注释

1.单行注释

// let str = []

2.多行注释

/**
* 方法说明
* @method getSum
* @params {Number} firstNumber, secondNumber 第一个值和第二个值
* @return {Number} 两个数之和
*/
function getSum(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}

3..Js代码注释console.log和debugger再提交

4..重要函数或者类等都要添加头描述

四.字符串拼接

应使用数组保存字符串片段,使用时调用join方法。避免使用+或+=的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能。

// good 
let str = [];
for (var i = 0; len = list.length; i < len; i++){
    str.push('<div>' + list[i] +'<div>');
}
fom.innerHTML = str.join('');


// bad
let str = [];
for (var i = 0; len = list.length; i < len; i++){
    str += '<div>' + list[i] +'<div>';
}
fom.innerHTML = str.join('');

五.ES6使用

1.变量申明:let :不存在变量提升问题; 不能重复申明。

2.常量申明: const:原理是内存地址不变。

3.箭头函数:

  • 有名函数
  • let getCount = (firstNumber, secondNumber) => { return firstNumber + secondNumber; }
  • 无名函数

(firstNumber + secondNumber) => {return firstNumber + secondNumber}

  • 箭头函数使用注意的问题: This指向定义者,内部无arguments对象,不能new(因为箭头函数的this就是指向定义本身),函数里面不要有太多的return
  • 函数的形参不超过7个,超过用数组,调用时实参和形参对应
  • 不能有重复的返回
  • 在循环内部声明函数慎用,因为是循环执行完成函数调用才会执行
  • Return后面不要写代码,并且不封装成if…then…else…

4.导入和导出

使用import和export,只能位于代码顶部和顶部,如果代码中部需要按需导入文件使用require

5.解决地狱回调问题

 解决回调地狱有很多方法,比如:Promise 对象、Generator 函数、async 函数

promise对象解决回调地狱

 采用链式的 then,可以指定一组按照次序调用的回调函数。这时,前一个 then 里的一个回调函数,返回的可能还是一个 Promise对象(即有异步操作),这时后一个回调函数,就会等待该 Promise对象的状态发生变化,才会被调用。由此实现异步操作按照次序执行。

var sayhello = function (name) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log(name);
      resolve();  //在异步操作执行完后执行 resolve() 函数
    }, 1000);
  });
}
sayhello("first").then(function () {
  return sayhello("second");  //仍然返回一个 Promise 对象
}).then(function () {
  return sayhello("third");
}).then(function () {
  console.log('end');
}).catch(function (err) {
  console.log(err);
})

上面代码中,第一个 then 方法指定的回调函数,返回的是另一个Promise对象。这时,第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为resolved,就继续执行第二个 then 里的回调函数。

Generator 函数解决回调地狱

// 用 co 模块自动执行
var co = require('co');
var sayhello = function (name, ms) {
  setTimeout(function (name,ms) {
    console.log(name);
  }, ms);
}
var gen = function* () {
  yield sayhello("xiaomi", 2000);
  console.log('frist');
  yield sayhello("huawei", 1000);
  console.log('second');
  yield sayhello("apple", 500);
  console.log('end');
}
co(gen());

 

posted @ 2021-04-12 16:11  无序  阅读(99)  评论(0编辑  收藏  举报