开发规范（四）JS规范

zhangyucha0 发布于2019-08-22 10:33 / 2375人阅读

摘要：概述为提高团队协作效率，规范文件管理，方便项目后期维护，提高代码质量，特制订此文档，前端开发人员必须遵照本规范进行前台页面开发。

概述

为提高团队协作效率，规范文件管理，方便项目后期维护，提高代码质量，特制订此文档，前端开发人员必须遵照本规范进行前台页面开发。

基本规范

sublime Text3请安装jshint插件以检查JS编写错误;
安装教程：使用lint进行语法及风格校验

异步加载文件命名

require.ensure([],function(){
    //异步加载内容
},"ensure/业务模块名_页面名_异步方法名_1")

引号
最外层统一使用单引号。

// not good
var x = "test";

// good
var y = "foo",
    z = "
";

空行
以下几种情况需要空行：
变量声明后（当变量声明在代码块的最后一行时，则无需空行）
注释前（当注释在代码块的第一行时，则无需空行）
代码块后（在函数调用、数组、对象中则无需空行）
文件最后保留一个空行

// need blank line after variable declaration
var x = 1;

// not need blank line when variable declaration is last expression in the current block
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// need blank line before line comment
a++;

function b() {
    // not need blank line when comment is first line of block
    return a;
}

// need blank line after blocks
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

var obj = {
    foo: function() {
        return 1;
    },

    bar: function() {
        return 2;
    }
};

// not need blank line when in argument list, array, object
func(
    2,
    function() {
        a++;
    },
    3
);

var foo = [
    2,
    function() {
        a++;
    },
    3
];


var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

变量声明
一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明。

function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

函数

无论是函数声明还是函数表达式，"("前不要空格，但"{"前一定要有空格；
函数调用括号前不需要空格；
立即执行函数外必须包一层括号；
不要给inline function命名；
参数之间用", "分隔，注意逗号后有一个空格

// no space before "(", but one space before"{"
var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

// not good
doSomething (item);

// good
doSomething(item);

// requires parentheses around immediately invoked function expressions
(function() {
    return 1;
})();

// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
});

// not good
var a = [1, 2, function a() {
    ...
}];

// good
var a = [1, 2, function() {
    ...
}];

// use ", " between function parameters
var doSomething = function(a, b, c) {
    // do something
};

数组、对象

对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；
数组、对象最后不要有逗号。

// not good
var a = {
    "b": 1
};

var a = {b: 1};

var a = {
    b: 1,
    c: 2,
};

// good
var a = {
    b: 1,
    c: 2
};

变量命名规范

标准变量采用驼峰式命名
ID在变量名中全大写
URL在变量名中全大写
Android在变量名中大写第一个字母
iOS在变量名中小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以$开头命名

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

// not good
var body = $("body");

// good
var $body = $("body");

前缀规范

s：表示字符串。例如：sName，sHtml;
n：表示数字。例如：nPage，nTotal;
b：表示逻辑。例如：bChecked，bHasLogin;
a：表示数组。例如：aList，aGroup;
r：表示正则表达式。例如：rDomain，rEmail;
f：表示函数。例如：fGetHtml，fInit;
o：表示以上未涉及到的其他对象，例如：oButton，oDate;

例外情况：

1：作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。
2：循环变量可以简写，比如：i，j，k等。

函数命名规范

统一使用动词或者动词[+名词]形式，例如：fGetVersion()，fSubmitForm()，fInit();涉及返回逻辑值的函数可以使用is，has等表示逻辑的词语代替动词。

如果有内部函数，使用__f+动词[+名词]形式，内部函数必需在函数最后定义。

对象方法实现
对象方法命名使用 f+对象类名+动词[+名词]形式;例如 fAddressGetEmail

事件响应函数
某事件响应函数命名方式为触发事件对象名+事件名或者模块名+触发事件对象名+事件名，例如：fDivClick()，fAddressSubmitButtonClick()

其它注意事项

所有命名最好使用英语表示。

所有变量名应该明确而必要，尽量避免不必要的容易混淆的缩写。

netease.events.mouse.Handler，而不是 netease.events.mouse.MouseEventHandler。

对应的方法应该使用对应的动词，例如：get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

应该避免双重否定意义的变量，例如：bIsNotError, bIsNotFound，不可取。

变量应该在最小的范围内定义，并尽可能的保持最少的活动时间。

循环变量最好在循环中定义。例如for(var i=0,m=10;i++)

尽量避免复杂的条件语句，可以使用临时的boolean变量代替。

一定要避免在条件中执行语句，例如：if((i=3)>2){}，不可取。

不要在代码中重复使用相同意义的数字，用一个变量代替

专线服务私有云开发规范 PHP开发规范 python开发规范 java开发规范

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90822.html

【Node】前后端模块规范与模块加载原理

摘要：例如指定一些依赖到模块中实现规范的模块化，感兴趣的可以查看的文档。 CommonJS 定义了 module、exports 和 require 模块规范，Node.js 为了实现这个简单的标准，从底层 C/C++ 内建模块到 JavaScript 核心模块，从路径分析、文件定位到编译执行，经历了一系列复杂的过程。简单的了解 Node 模块的原理，有利于我们重新认识基于 Node 搭建的...

jsyzchen 2019-08-23 15:43 评论0 收藏0
js深入（四）万脸懵圈的this指向

摘要：作为一个菜鸡的我而言，在之前讲到过那么多的链式查找机制，比如说原型链，作用域链等等，想当然的把这个机制带入到了指向上边，结果就是这个指向指的我万脸懵逼标题换字了，担心被河蟹在经过漫长的通俗易懂的规范阅读之后，分享一下我所认知的指向简而言之，作为一个js菜鸡的我而言，在之前讲到过那么多的js链式查找机制，比如说原型链，作用域链等等，想当然的把这个机制带入到了this指向上边，结果就是这...

pcChao 2019-08-23 18:35 评论0 收藏0
关于JavaScript模块规范之CommonJSAMDCMD

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。也采用语句加载模块，但是不同于，它要求两个参数第一个参数，是一个数组，里面的成员就是要加载的模块第二个参数，则是加载成功之后的回调函数。本篇文章来自对文章《js模块化编程之彻底弄懂CommonJS和AMD/CMD！》的总结，大部分摘自文章原话，本人只是为了学习方便做的笔记，之后有新的体会会及时补充...

binaryTree 2019-08-26 13:22 评论0 收藏0
JavaScript模块化

摘要：是中提供的模块化编程的方案，是中新增。所以人们产生了这样的需求，希望有支持两种风格的通用模式，于是通用模块规范诞生了。模块化对模块进行导出导入的 AMD、CMD、CommonJs、UMD是ES5中提供的模块化编程的方案，import/export是ES6中新增。1.AMD-异步模块定义AMD是RequireJS在推广过程中对模块定义的规范化产出，它是一个概念，RequireJS是对这个...

wizChen 2019-08-23 15:08 评论0 收藏0
前端编码规范

摘要：前言首先，写这篇代码规范是为了我自己在以后的项目中方便引用，让前端人员统一标准，方便在开发中保持代码的一致性，代码规范是在的编码规范上的基础上做的修改，下面只列举出一些不一样的地方，基本的规范参照编码规范要求使用。前言首先，写这篇代码规范是为了我自己在以后的项目中方便引用，让前端人员统一标准，方便在开发中保持代码的一致性，代码规范是在bootstrap的编码规范上的基础上做的修改，...

nicercode 2019-08-19 17:20 评论0 收藏0