Javascript 编码约定(编码规范)


Posted in Javascript onMarch 11, 2018

1、使用 strict 模式

在一个作用域(包括函数作用域、全局作用域)中,可以使用

"use strict";

来开启 strict 模式。

2、缩进

用 Tab 键进行代码缩进,以节约代码大小,使用4个空格的宽度来进行缩进(JSLint 建议)。

3、符号

1) 大括号

与语句放同一行,放于最后面;仅有一行语句,也使用大括号:

if (true) {
  //true
} else {
  //false
}
while (true) {
  //alert(1);
}

2) 空格

在逗号、分号、冒号后加空格
在操作符前后加空格
在大括号开始符之前
在大括号结束符和 else、while 或 catch 之间
在 for 的各个部分
如:

var a = [1, 2, 3];
var obj = {
  name: 'name',
  value: 'value'
};
for (var i = 0; i < 10; i++) {}
function func(a, b, c) {}

c = a + b;
if (a && b || c) {
  //if
} else {
  //else
}

try {
  //try
} catch(err) {
  //catch
}

3) 所有语句结束后,使用 ; 号结束

4、命名

对象:使用驼峰式,如:MyClass
方法、变量:使用混合式,如:getName(), myName
常量:大写加下划线,如:MY_NAME

5、单一 var 模式

只使用一个 var 在函数顶部进行变量声明,作用如下:

1) 提供一个单一的地址已查找到函数需要的所有局部变量
2) 防止出现变量在定义前就被使用的逻辑错误
3) 帮助牢记要声明变量,尽可能少地使用全局变量
4) 更少的编码

function func() {
  var a = 1,
    b = 2, 
    sum = a + b,
    obj = {
      name: 'name',
      value: 'value'
    },
  $btn = $('#btn');
  //函数体
}

6、循环

1) for 循环

var i, arr = [];
for (i = arr.length; i--;) {
  //arr[i];
}

注:

for (var i = 0; i < document.getElementsByName().length; i++) {
  //document.getElementsByName()[0];
}

这种方式每次对 i 进行长度比较的使用对会进行 document 的查询,而通常 DOM 操作是非常耗时的。

2) while 循环

var arr = [], 
  i = arr.length;
while (i--) {
  //处理
}

3) for-in 循环

var i,
  hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
  if (hasOwn.call(man, i)) { //过滤
    console.log(i, ':', man[i]);
  }
}

7、switch 选择

switch (num) {
case 0:
  //do something
  break;
case 1:
  //do something
  break;
...
default:
  //do default
}

建议使用:

var obj = {
  '0': function() {
    //do somethins
  },
  '1': function() {
    // do somethis
  }, ...
}
if (obj.hasOwnProperty(num)) {
  obj[num]();
} else {
  //do default
}

8、使用 parseInt() 的数值约定

1) 每次都具体指定进制参数:

var month = '09', day = '08';
month = parseInt(month, 10); //不加进制参数便会转换为八进制
day = parseInt(day, 10);

2) 其他常用的将字符串转换为数值的方法:

+'08';
Number('08');

9、字面量模式

不建议使用构造函数来定义:

// built in constructors (avoid)
var o = new Object();
var a = new Array();
var re = new RegExp('[a-z]', 'g');
var s = new String();
var n = new Number();
var b = new Boolean();
throw new Error('message');

建议使用更优的字面量模式:

// literals and primitives (prefer)
var o = {};
var a = [];
var re = /[a-z]/g;
var s = '';
var n = 0;
var b = false;
throw {
  name: 'Error',
  message: 'message'
}

10、其他

1) 变量内的简写单词如果在开头则全小写:xmlDocument,如果不在开头则全大写:loadXML
2) 变量必须是有意义的英文,禁止拼音

Javascript 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 #Javascript
js经验分享 JavaScript反调试技巧
Mar 10 #Javascript
webpack打包node.js后端项目的方法
Mar 10 #Javascript
webpack external模块的具体使用
Mar 10 #Javascript
webpack组织模块打包Library的原理及实现
Mar 10 #Javascript
浅谈webpack组织模块的原理
Mar 10 #Javascript
Vuex实现计数器以及列表展示效果
Mar 10 #Javascript
You might like
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PDO::inTransaction讲解
2019/01/28 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
安装Python的教程-Windows
2017/07/22 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
干部下基层实施方案
2014/03/14 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
分析Netty直接内存原理及应用
2021/06/14 Java/Android
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技