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 相关文章推荐
jQuery语法总结和注意事项小结
Nov 11 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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
JS实现php的伪分页
2008/05/25 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP 字符串 小常识
2009/06/05 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python中整数的缓存机制讲解
2019/02/16 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
党员思想汇报范文
2013/12/30 职场文书
初二物理教学反思
2014/01/29 职场文书
职工运动会邀请函
2014/02/02 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
道德演讲稿
2014/05/21 职场文书
大学新闻系自荐书
2014/05/31 职场文书
学习十八大的心得体会
2014/09/01 职场文书
欢迎家长标语
2014/10/08 职场文书
党支部综合考察意见
2015/06/01 职场文书