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最常用与实用的创建类的代码
Aug 12 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
JavaScript中的类型检查
Feb 03 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
JS数组去重详情
Nov 07 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
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP多态代码实例
2015/06/26 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
事业单位考核材料
2014/05/21 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
毕业生找工作求职信
2014/08/05 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
学生个人评语大全
2015/01/04 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书