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 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
javaScript实现一个队列的方法
Jul 14 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
Bootstrap表单布局
2016/07/19 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
让python json encode datetime类型
2010/12/28 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
基于python实现百度翻译功能
2019/05/09 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
html5与css3小应用
2013/04/03 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
经理秘书岗位职责
2013/11/14 职场文书
文案策划求职信
2014/03/18 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
教师求职自荐书
2014/06/14 职场文书
公民授权委托书范本
2014/09/17 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
高一数学教学反思
2016/02/18 职场文书