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操作二级联动实现代码
Jul 27 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
js实现简单放大镜效果
Mar 07 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
师德师风个人整改措施
2014/10/27 职场文书
信访工作汇报材料
2014/10/27 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年七夕情人节感言
2015/08/03 职场文书