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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
微信小程序开发打开另一个小程序的实现方法
May 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
建筑个人求职信范文
2014/01/25 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
英语教师求职信范文
2015/03/20 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
JavaScript实现队列结构过程
2021/12/06 Javascript
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
Android中View.post和Handler.post的关系
2022/06/05 Java/Android