• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 前端编码规范(3)JavaScript 开发规范

前端编码规范(3)JavaScript 开发规范

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了javascript前端开发,javascript前端,javascript前端框架,web前端javascript,前端编码规范等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

采用严格模式带来的好处是,当你手误输入错误的变量名时,它可以通过报错信息来帮助你定位错误出处。

变量名

变量名推荐使用驼峰法来命名(camelCase)
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )
函数: 构造函数始终以大写字母开头,非构造函数以一个小写字母开头
变量名不要以 $ 作为开始标记,避免与很多 JavaScript 库冲突

全局命名空间污染与 IIFE

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。
IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改(i.e. 第三方库,window 引用,被覆盖的未定义的关键字等等)。

不推荐

var x = 10,
y = 100;

// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ‘ ‘ + window.y);

推荐

// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
‘use strict';

var x = 10,
y = 100;

// Will output ‘true true'
log((w.x === undefined) + ‘ ‘ + (w.y === undefined));

}(window.console.log, window));
</div>

IIFE(立即执行的函数表达式)

无论何时,想要创建一个新的封闭的定义域,那就用 IIFE。它不仅避免了干扰,也使得内存在执行完后立即释放。
所有脚本文件建议都从 IIFE 开始。
立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的,但写在内使得整个表达式看起来更像一个整体,因此推荐这么做。

不推荐

(function(){})();

推荐

(function(){}());

so,用下列写法来格式化你的 IIFE 代码:

(function(){
‘use strict';

// Code goes here

}());
</div>

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

(function($, w, d){
‘use strict';

$(function() {
w.alert(d.querySelectorAll(‘div').length);
});
}(jQuery, window, document));
</div>

严格模式

ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮,运行的也更加快速。
严格模式会阻止使用在未来很可能被引入的预留关键字。
你应该在你的脚本中启用严格模式,最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题。

不推荐

// Script starts here
‘use strict';
(function(){
// Your code starts here
}());

推荐

(function(){
‘use strict';
// Your code starts here
}());
</div>

变量声明

总是使用 var 来声明变量。如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域)。所以,请总是使用 var 来声明变量。
采用严格模式带来的好处是,当你手误输入错误的变量名时,它可以通过报错信息来帮助你定位错误出处。

不推荐

x = 10;
y = 100;

推荐

var x = 10,
y = 100;
</div>

理解 JavaScript 的定义域和定义域提升

在 JavaScript 中变量和方法定义会自动提升到执行之前。JavaScript 只有 function 级的定义域,而无其他很多编程语言中的块定义域,所以使得你在某一 function 内的某语句和循环体中定义了一个变量,此变量可作用于整个 function 内,而不仅仅是在此语句或循环体中,因为它们的声明被 JavaScript 自动提升了。

我们通过例子来看清楚这到底是怎么一回事:

原 function

(function(log){
‘use strict';

var a = 10;

for(var i = 0; i < a; i++) {
var b = i * i;
log(b);
}

if(a === 10) {
var f = function() {
log(a);
};
f();
}

function x() {
log(‘Mr. X!');
}
x();

}(window.console.log));
</div>

被 JS 提升过后

(function(log){
‘use strict';
// All variables used in the closure will be hoisted to the top of the function
var a,
i,
b,
f;
// All functions in the closure will be hoisted to the top
function x() {
log(‘Mr. X!');
}

a = 10;

for(i = 0; i < a; i++) {
b = i * i;
log(b);
}

if(a === 10) {
// Function assignments will only result in hoisted variables but the function body will not be hoisted
// Only by using a real function declaration the whole function will be hoisted with its body
f = function() {
log(a);
};
f();
}

x();

}(window.console.log));
</div>

根据以上提升过程,你是否可理解以下代码?

有效代码

(function(log){
‘use strict';

var a = 10;

i = 5;

x();

for(var i; i < a; i++) {
log(b);
var b = i * i;
}

if(a === 10) {
f = function() {
log(a);
};
f();

var f;
}

function x() {
log(‘Mr. X!');
}

}(window.console.log));
</div>

正如你所看到的这段令人充满困惑与误解的代码导致了出人意料的结果。只有良好的声明习惯,也就是下一章节我们要提到的声明规则,才能尽可能的避免这类错误风险。

提升声明

为避免上一章节所述的变量和方法定义被自动提升造成误解,把风险降到最低,我们应该手动地显示地去声明变量与方法。也就是说,所有的变量以及方法,应当定义在 function 内的首行。
只用一个 var 关键字声明,多个变量用逗号隔开。

不推荐

(function(log){
‘use strict';

var a = 10;
var b = 10;

for(var i = 0; i < 10; i++) {
var c = a * b * i;
}

function f() {

}

var d = 100;
var x = function() {
return d * d;
};
log(x());

}(window.console.log));

推荐

(function(log){
‘use strict';

var a = 10,
b = 10,
i,
c,
d,
x;

function f() {

}

for(i = 0; i < 10; i++) {
c = a * b * i;
}

d = 100;
x = function() {
return d * d;
};
log(x());

}(window.console.log));
</div>

把赋值尽量写在变量申明中。

不推荐

var a,
b,
c;

a = 10;
b = 10;
c = 100;

推荐

var a = 10,
b = 10,
c = 100;
</div>

总是使用带类型判断的比较判断

总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。
如果你使用 === 操作符,那比较的双方必须是同一类型为前提的条件下才会有效。
如果你想了解更多关于强制类型转换的信息,你可以读一读 Dmitry Soshnikov 的这篇文章。
在只使用 == 的情况下,JavaScript 所带来的强制类型转换使得判断结果跟踪变得复杂,下面的例子可以看出这样的结果有多怪了:

(function(log){
‘use strict';

log(‘0' == 0); // true
log(” == false); // true
log(‘1' == true); // true
log(null == undefined); // true

var x = {
valueOf: function() {
return ‘X';
}
};

log(x == ‘X');

}(window.console.log));
</div>

明智地使用真假判断

当我们在一个 if 条件语句中使用变量或表达式时,会做真假判断。if(a == true) 是不同于 if(a) 的。后者的判断比较特殊,我们称其为真假判断。这种判断会通过特殊的操作将其转换为 true 或 false,下列表达式统统返回 false:false, 0, undefined, null, NaN, ”(空字符串).

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript实现前端实时搜索功能
  • JavaScript优化以及前段开发小技巧
  • 前端编码规范(3)JavaScript 开发规范

相关文章

  • 2017-05-11JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
  • 2017-05-11jQuery倒计时代码(超简单)
  • 2017-05-11VUE JS 使用组件实现双向绑定的示例代码
  • 2017-05-11jQuery表单元素选择器代码实例
  • 2017-05-11使用grunt合并压缩js和css文件的方法
  • 2017-05-11jQuery获取table下某一行某一列的值实现代码
  • 2017-05-11实例分析nodejs模块xml2js解析xml过程中遇到的坑
  • 2017-05-11详解Angular中的自定义服务Service、Provider以及Factory
  • 2017-05-11JS实现根据密码长度显示安全条功能
  • 2017-05-11提高Web性能的前端优化技巧总结

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 利用angularjs1.4制作的简易滑动门效果
    • Vue.js父与子组件之间传参示例
    • Bootstrap面板(Panels)的简单实现代码
    • 原生JS实现《别踩白块》游戏(兼容IE)
    • new Date().getTime() 多8小时问题
    • 微信小程序实现图片自适应(支持多图)
    • 简单谈谈Javascript函数中的arguments
    • AngularJS实现使用路由切换视图的方法
    • 利用JQuery实现datatables插件的增加和删除行功能
    • angular和BootStrap3实现购物车功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有