美文网首页
前端开发规范文档

前端开发规范文档

作者: 程序员之路 | 来源:发表于2017-08-14 15:04 被阅读0次

一、HTML规范:

Javascript代码应该尽量放在.js格式的文件中,需要调用的时候在页面中以的形式包含进来。Javascript代码若不是该页面专用的,则应尽量避免在页面中直接编写Javascript代码。

3,全局命名空间无法与IIFE:

总是将代码包裹成一个IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保代码不会轻易被其它全局命名空间里的代码所修改(第三方库,window 引用,被覆盖的未定义的关键字等等)。

// 不推荐


varx=10,

y=100;

console.log(window.x+' '+window.y);

// 推荐

(function(log, w, undefined){

varx=10,

y=100;

console.log((w.x === undefined) +' '+ (w.y === undefined));

}(window.console.log,window));

无论何时,想要创建一个新的封闭的定义域,那就用IIFE。它不仅避免了干扰,也使得内存在执行完后立即释放。

所有脚本文件建议都从IIFE 开始。

立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的,但写在内使得整个表达式看起来更像一个整体,因此推荐这么做。

不推荐

(function(){})();

推荐

(function(){}());

如果想引用全局变量或者是外层IIFE 的变量,可以通过下列方式传参:

(function($, w, d){

$(function() {

w.alert(d.querySelectorAll('div').length);

});

}(jQuery, window, document));

4,引号:

统一使用单引号(‘’),不使用双引号(“”)。这在创建 HTML 字符串非常有好处:

varmsg='This is some HTML

'

;

5,变量生命:

总是使用var 来声明变量。如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域)。所以,请总是使用 var 来声明变量。驼峰命名法。

不推荐

x=10;

y=100;

推荐

varx=10,

y=100;

6,数组和对象字面量:

用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。

不推荐

vara1=newArray(x1, x2, x3);

vara2=newArray(x1, x2);

vara3=newArray(x1);

vara4=newArray();

正因如此,如果将代码传参从两个变为一个,那数组很有可能发生意料不到的长度变化。为避免此类怪异状况,请总是采用更多可读的数组字面量。

推荐

vara= [x1, x2, x3];

vara2= [x1, x2];

vara3= [x1];

vara4= [];

对象构造器不会有类似的问题,但是为了可读性和统一性,我们应该使用对象字面量。

不推荐

varo=newObject();

varo2=newObject();

o2.a=0;

o2.b=1;

o2.c=2;

o2['strange key'] =3;

推荐

varo= {};

varo2= {

a:0,

b:1,

c:2,

'strange key':3

};

7,函数声明:

函数应在调用前进行声明,内部函数应在var 声明内部变量的语句之后声明,可以清晰地表明内部变量和内部函数的作用域。

此外,函数名紧接左括号'('之间,而右括号')'和后面的'{'之间要有个空格,以清楚地显示函数名以其参数部分,和函数体的开始。若函数为匿名 / 无名函数,则 function 关键字和左括号'('之间要留空格,否则可能误认为该函数的函数名为 function。

varinnerA=1;

functionoutF() {

varinnerA=2;

function_inf() {

alert(‘valueA=’+innerA);

}

_inF();

}

outF();

_inF();

8,语句块内的函数声明:

切勿在语句块内声明函数,在ECMAScript 5 的严格模式下,这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

不推荐

if(x) {

functionfoo() {}

}

推荐

if(x) {

varfoo=function() {};

}

9,流程控制:

if、while、for、do语句的执行体总是用"{"和"}"括起来,即使在其结构体内只有一条语句

if(s==100) {

alert('shit!');

}

不要使用switch。switch 在所有的编程语言中都是个非常错误的难以控制的语句,建议用 if else 来替换它。

10,操作符:

(1)三元条件判断(if 的快捷方法)

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用10 行三元操作符把自己的脑子绕晕。

不推荐

if(x ===10) {

return'valid';

}else{

return'invalid';

}

推荐

returnx ===10?'valid':'invalid';

11,注释:

(1)文件注释

文件注释要标明作者、文件版本、创建/修改时间、重大版本修改记录

函数描述

文件版本、创建或者修改时间、功能、作者

/**

* @file Image.js

* @description 功能详细描述

*/

²函数或者类等都要添加头描述

/**

* 简述

*

* 功能详细描述

*

* @param arg1 参数1

* @param arg2 参数2,默认为0

* @return 看xxx是否成功

*/

function fooFunction (arg1, arg2) {

}

(2)操作注释

单行注释,写在代码上面

多行注释

/*

* 注释操作说明

*/

for( var i = 0; i < obj.lenght; i++) {

}

相关文章

  • 前端架构之路(4) - 前端开发文档

    前端开发文档 1. 为什么需要 “前端开发文档” 上一节讲到开发规范,不以规矩,不成方圆,团队开发离不开规范,这一...

  • 前端规范

    常用html、CSS、javascript前端命名规范无论是从技术角度还是开发视角,对于web前端开发规范文档都有...

  • 移动前端开发规范(一般规范)

    系列目录 移动前端开发规范(一般规范)移动前端开发规范(技术栈规范)移动前端开发规范(HTML规范)移动前端开发规...

  • Web前端开发规范文档

    Web前端开发规范文档 规范目的: 使开发流程更加规范化。 通用规范: TAB键用两个空格代替(WINDOWS下T...

  • Web前端开发规范文档

    Web前端开发规范文档 规范目的: 使开发流程更加规范化。 通用规范: TAB键用两个空格代替(WINDOWS下T...

  • 一稿设计,多端适配优雅的解决方案 - rem

    规范目的 为提高前端团队开发效率,输出高质量的前端页面代码,提高UI设计还原度,特编写该规范文档。本文档如有不对或...

  • Vue前端开发规范及代码风格

    Vue.js 开发规范目录及说明 版本v1.0日期2020-02-18 本文档为前端 vue 开发规范 规范目的 ...

  • App研发流程规范

    移动APP项目研发流程规范: 其中,产品需求文档 > 前端开发两个版本 、UI设计 > 前端开发一半个版本、 后台...

  • 前端开发文档规范

    HTML 编码规范 请查看HTML编码规范 CSS 编码规范 请查看CSS编码规范 JavaScript 编码规范...

  • 前端开发规范文档

    一、HTML规范: Javascript代码应该尽量放在.js格式的文件中,需要调用的时候在页面中以的形式包含进来...

网友评论

      本文标题:前端开发规范文档

      本文链接:https://www.haomeiwen.com/subject/cgeurxtx.html