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 相关文章推荐
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
详解参数传递四种形式
Jul 21 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
javascript断点调试心得分享
Apr 23 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
php文件上传的简单实例
2013/10/19 PHP
php页面缓存方法小结
2015/01/10 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python re模块findall()函数实例解析
2018/01/19 Python
Python读写docx文件的方法
2018/05/08 Python
python的中异常处理机制
2018/08/30 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python openCV自制绘画板
2020/10/27 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
中学生差生评语
2014/01/30 职场文书
代理协议书范本
2014/04/22 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
处罚决定书范文
2015/06/24 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
pandas中对文本类型数据的处理小结
2021/11/01 Python