《javascript代码规范整理》上

简介: 《javascript代码规范整理》

tags:

  • javascript
  • 规范

categories: 规范


基于参考,对参考文档进行整理,方便参照,有建议之处,欢迎留言。

无论有多少人在维护,所有在代码仓库中的代码理应看起来像同一个人写的。

变量

(1)申明变量时,必须使用 var 。如果不这么做,所申明的变量将会是一个全局变量,我们要劲量避免申明全局变量。

注:使用一个 var 打头申明一组变量,是最有效率的。

var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

(2)请在作用域的顶部申明变量,这样做主要避免变量申明和赋值提升相关的问题。

function() {
  var name = getName();
  test();
  console.log('doing stuff..');
  //..other stuff..
  if (name === 'test') {
    return false;
  }
  return name;
}

字符串

(1)使用单引号定义字符串

var name = 'Bob Parr';
var fullName = 'Bob ' + this.lastName;

字符串长度超过80个字符是,应该分成多行,通过字符串连接符(+)进行连接。

注:如果过度使用连接符,长字符串拼接会有性能问题。

var errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

(3)使用数组方法join替代连接符

var items,
  messages,
  length,
  i;
messages = [{
  state: 'success',
  message: 'This one worked.'
}, {
  state: 'success',
  message: 'This one worked as well.'
}, {
  state: 'error',
  message: 'This one did not work.'
}];
length = messages.length;
function inbox(messages) {
  items = [];
  for (i = 0; i < length; i++) {
    items[i] = '<li>' + messages[i].message + '</li>';
  }
  return '<ul>' + items.join('') + '</ul>';
}

数组

(1)创建数组

var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

(2)数组中添加元素-push()

var someStack = [];
someStack.push('abracadabra');

(3)拷贝数组-slice()

var len = items.length;
var itemsCopy = [];
var i;
itemsCopy = items.slice();

函数

(1)定义函数

// 匿名 function 表达式
var anonymous = function() {
  return true;
};
// 命名 function 表达式
var named = function named() {
  return true;
};
// 立即执行 function 表达式 
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

(2)使用函数

注:绝对不要在“非功能”块中申明方法(如,if、while等),而是通过将方法赋值给一个变量实现。

var test;
if (currentUser) {
  test = function test() {
    console.log('Yup.');
  };
}

(3)参数arguments

绝对不用使用arguments作为方法的参数名。它会高优先级的覆盖掉每个方法中默认都有的arguments对象。

// bad
function nope(name, options, arguments) {
  // ...stuff...
}
// good
function yup(name, options, args) {
  // ...stuff...
}

(4)调用

使用锯齿状缩进将函数连分割成多行,并以 . 开头,以强调只是针对一个函数的调用,而不是一个新的语句。

('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();
var leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

对象

(1)创建对象

var item = {};
var item2 = {
  a: 0,
  b: 1,
  c: 2,
  'strange key': 3
};

注:不要使用保留关键字作为key,IE8中会报错。

// bad
var superman = {
  default: { clark: 'kent' },
  private: true
};
// good
var superman = {
  defaults: { clark: 'kent' },
  hidden: true
};

(2) 键值命名

使用可辨识的同义词替换保留关键词

// bad
var superman = {
  class: 'alien'
};
// good
var superman = {
  type: 'alien'
};


相关文章
|
30天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
120 58
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
235 2
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
35 0
|
2月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
17天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
35 3
原生js炫酷随机抽奖中奖效果代码
|
22天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
206 4
|
24天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
76 6
|
20天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
49 1
下一篇
无影云桌面