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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
PHP开发注意事项总结
2015/02/04 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
phpfpm的作用和用法
2019/10/10 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
python映射列表实例分析
2015/01/26 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
微信跳一跳python代码实现
2018/01/05 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
pytorch中图像的数据格式实例
2020/02/11 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
悬挂训练绳:TRX
2017/12/14 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
厨房管理计划书
2014/04/27 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
农村党员一句话承诺
2014/05/30 职场文书
市场推广策划方案
2014/06/02 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
祝酒词范文
2015/08/12 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
golang为什么要统一错误处理
2022/04/03 Golang