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 31 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
原生js轮播特效
May 18 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
浅谈JS的原型和继承
May 08 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
js加减乘除精确运算方法实例代码
Jan 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
PHP 命名空间实例说明
2011/01/27 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
greybox——不开新窗口看新的网页
2007/02/20 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
解决python删除文件的权限错误问题
2018/04/24 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
三年大学自我鉴定
2014/01/16 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
科技活动总结范文
2015/05/11 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
详解python的内存分配机制
2021/05/10 Python
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript