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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
javascript闭包的理解
Apr 01 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
React Router基础使用
Jan 17 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
JavaScript常用工具函数库汇总
Sep 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
JS获取父节点方法
2009/08/20 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
layui文件上传实现代码
2017/05/20 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python实现猜拳小游戏
2020/04/05 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
铭万公司.net面试题笔试题
2014/07/20 面试题
高二化学教学反思
2014/01/30 职场文书
停课通知书
2015/04/24 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
Java中的随机数Random
2022/03/17 Java/Android