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 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
原生js实现放大镜组件
Jan 22 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
jQuery find和children方法使用
2011/01/31 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
使用console进行性能测试
2015/04/27 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
深入研究React中setState源码
2017/11/17 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
浅析Node.js非对称加密方法
2018/01/29 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
python实现比较文件内容异同
2018/06/22 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
汉语言文学职业规划
2014/02/14 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL