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 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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 echo 输出字符串函数详解
2010/05/13 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
解析php中curl_multi的应用
2013/07/17 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php中如何执行linux命令详解
2018/11/06 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
基于Python实现文件大小输出
2016/01/11 Python
Python松散正则表达式用法分析
2016/04/29 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python求出0~100以内的所有素数
2018/01/23 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python如何删除文件中重复的字段
2019/07/16 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
python 深度学习中的4种激活函数
2020/09/18 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
超市开学活动方案
2014/03/01 职场文书
大学生求职信范文
2014/05/24 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2015年端午节活动总结
2015/02/11 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书