长沙尚学堂|十年树人|成就高薪
致力推动IT教育,我们正在行动    咨询热线:0731-83072091

2018WEB前端JavaScript之编码风格

时间:2018-01-05 09:45:12   来源:网络转载   阅读:

    在web项目开发过程中,为了是整个项目开发更加规范化、减少沟通成本和提高效率,对编码的规范还是很重要的一部分。以下就近期的项目经验,针对JavaScript的编码,做了如下的约定。2018WEB前端JavaScript之编码风格,分享给大家。

  1、变量与声明:

  1.1 声明前使用var 关键字

  // bad

  golobalVariable

  // good

  var globalVariable

  1.2 变量声明中不能使用逗号分隔名一串变量

  // bad

  var items = getItems(),

  goSportsTeam = true,

  dragonball = 'z';

  // good

  var items = getItems();

  var isGoSportsTeam = true;

  var dragonball = 'z';

  1.3 不要使用链式变量声明

  // bad

  var a = b = c =1;

  //good

  var a = 1;

  var b = 1;

  var c = 1;

  1.2 变量在函数内部或者循环控制条件之前提前声明

  // bad

  function test() {

  for(var i = 0; i < list.length; i++) {

  var item = list[i];

  }

  }

  //good

  function test() {

  var i;

  var len = list.length;

  var item;

  for(i = 0; i < len; i++) {

  item = list[i];

  }

  }

  1.4 私有变量函数前置_标识

  // bad

  MyConstrctor.prototype.private = function() {};

  // good

  function _private() {}

  MyConstructor.prototype._private = _private;

  1.5 变量的命名规则最好是具象的,布尔值需要带 is, has, can, 单位值需要带 _ms, _s, _px 等

  // bad

  var height = $("#test").height();

  var delay = 3 * 1000;

  var readYet = true;

  // good

  var height_px = $("#test").height();

  var delay_ms = 3 * 1000;

  var isRead = true;

  1.6 构造器首字母大写,方法变量要遵守驼峰命名规则

  // bad

  function generatortestpage() {};

  generatortestpage.prototype.testpage = function() {};

  // good

  function GeneratorTestPage() {}

  GeneratorTestPage.prototype.testPage = function() {};

  2、常量

  2.1 常量需要大写

  2.2 常量需要定义在文件的头部,并使用_分割

  // bad

  var maxNumber = 13;

  // good

  var MAX_NUMBER = 13;

  3、函数

  3.1 函数内部不允许嵌套函数

  3.2 函数内部不允许使用 arguments.callee 和 arguments.caller

  3.3 函数参数不得超过5个参数(多于5个使用对象类型代替)

  // bad

  function testFunc(a,b,c,d,e,f,g,h) { }

  // good

  functiontestFunc(params) {

  var a = params.a;

  var b = params.b;

  }

  4、异常处理

  4.1 允许使用 try/catch 语句,不能使用debugger、console、alert等关键字调试异常

  5、循环

  5.1 为了可读性,循环使用for,尽量避免使用while

  5.2 出于性能考虑,在循环内不允许定义函数和变量

  6、控制逻辑

  6.1 判断的表达式必须放在“{}”中

  // bad

  if (5 = n) // ...

  // good

  if (5 == n) {

  // do something...

  }

  6.2 控制流程语句中不能使用var 定义变量

  6.3 分支超过5种判断使用 switch/case,在 switch/case 语句中必须带default

  6.4 判断使用严格类型判断0、null、undefined, 固定字符使用 “===”

  6.5 若判断条件过长,可以酌情换行或者用变量标识

  // bad

  if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {

  thing1();

  }

  // good

  if (

  (foo === 123 || bar === 'abc') &&

  doesItLookGoodWhenItBecomesThatLong() &&

  isThisReallyHappening()

  ) {

  thing1();

  }

  // good

  var isType = (foo === 123 || bar === 'abc');

  var hasTolong = doesItLookGoodWhenItBecomesThatLong();

  var isHappend = isThisReallyHappening();

  if(isType && hasTolong && isHappend) {}

  7、字符串

  7.1 允许使用多行字符串,使用“+” 或者 “\” 分割

  // bad

  var str = "

  // good

  8、原型

  8.1 禁止对Sring、Array 等原生对象进行原型修改

  // bad

  String.ptototype.preventChangePrototype = function() {}

  // good

  function preventChangePrototype() {}

  8.2 由于子类会相互影响,原型上不允许保存属性,只能保存方法

  9、注释

  9.1 文件开头必须有文件说明注释,时间,作者

  /*

  * @Author: cxg

  * @Date: 2017-09-16 21:04:07

  * @Last Modified by: cxg

  * @Last Modified time: 2017-09-25 14:03:52

  * @fileOverview 本文件用于XXX,实现了XXX 方法, 注意事项XXX

  */

  9.2 使用“/** ... */”进行多行注释

  // bad

  // make() returns a new element

  // based on the passed in tag name

  //

  // @param {String} tag

  // @return {Element} element

  function make(tag) {

  // ...

  return element;

  }

  // good

  /**

  * make() returns a new element

  * based on the passed-in tag name

  */

  function make(tag) {

  // ...

  return element;

  }

  9.3 使用“//”单行注释。这个注释必须独占一行,若注释在块级作用域的第一行,注释前可以不用空一行,如果注释不在第一行,需要空一行在注释

  // bad

  const active = true; // is current tab

  // good

  // is current tab

  const active = true;

  // bad

  function getType() {

  console.log('fetching type...');

  // set the default type to 'no type'

  const type = this.type || 'no type';

  return type;

  }

  // good

  function getType() {

  console.log('fetching type...');

  // set the default type to 'no type'

  const type = this.type || 'no type';

  return type;

  }

  // also good

  function getType() {

  // set the default type to 'no type'

  const type = this.type || 'no type';

  return type;

  }

  9.4 在注释前加上 FIXME 和 TODO。FIXME:需要搞清楚这个问题,TODO:需要实现

  class Calculator extends Abacus {

  constructor() {

  super();

  // FIXME: 在这里不能设置为全局变量

  total = 0;

  }

  }

  class Calculator extends Abacus {

  constructor() {

  super();

  // TODO: total 需要在 options 参数里配置

  this.total = 0;

  }

  }

  备注:对于分号和逗号的使用需要注意:

  1、赋值、定义、返回值、方法调用后需要强制加分号

  2、对象最后一个属性不要带逗号。

  2018WEB前端JavaScript之编码风格,就跟大家讲到这里,欢迎大家点击弹窗私聊长沙尚学堂客服,免费领取相关教学视频!
 

学大数据

  推荐阅读:

  2017长沙哪家WEB前端培训机构比较好

  2017长沙最好的软件培训学校排行榜

  2017长沙学UI设计多少钱

标签:学WEB前端
分享:0
开班计划

试听申请表

全程面授,不高薪都难

报名成功后,尚学堂工作人员将在24小时内与您联系

热门文章
视频下载
猜你喜欢