展会信息港展会大全

JavaScript特效详解 JavaScript代码规范
来源:互联网   发布日期:2016-01-27 15:24:35   浏览:2515次  

导读:<a href=javascript:; onclick=javascript:tagshow(event, 39;JavaScript 39;); target=_self>JavaScript代码规范及js特效代码< a>JavaScript代码规范这是一篇JavaScript编程代码规范,它由S ...

<a href="javascript:;" onclick="javascript:tagshow(event, 'JavaScript');" target="_self">JavaScript代码规范及js特效代码</a>

JavaScript代码规范这是一篇JavaScript编程代码规范,它由Sun公司的文档Code Conventions for the Java Programming Language激发而来。

由于JavaScript is not Java,这篇规范和Java规范相比有很大改动。

目录:

JavaScript文件

缩进

行宽

注释

变量声明

方法声明

命名

语句

- 简单语句

- 复合语句

- 标签

- return语句

- if语句

- for语句

- while语句

- do语句

- switch语句

- try语句

- continue语句

- with语句

空格

额外的建议

- {}和[]

- 逗号操作符

- 块作用域

- 赋值表达式

- ===和!==操作符

- 令人混淆的加和减

- 邪恶的eval

JavaScript文件

JavaScript程序应该作为一个.js文件存储和发布。

JavaScript代码不应该嵌入在HTML文件里,除非那些代码是一个单独的会话特有的。HTML里的JavaScript代码大大增加了页面的大小,并且

很难通过缓存和压缩来缓解。

<script src=filename.js>标签应该在body里越靠后的位置越好。这减少了由于加载script而导致的其它页面组件的延迟。没有必要使用

language或者type属性。由服务器而不是script标签来决定MIME类型。

缩进

缩进的最小单位是4个空格。不要使用tab键,because (as of this writing in the 21st Century) there still is not a standard

for the placement of tabstops. 使用空格会引起文件变大,但是这点大小对局域网无关紧要,而且差别被minification消除了。

行宽

不要让一行代码超过80个字符。当一条语句不能在单独一行写完时,可能有必要拆分它。在操作符后进行拆分,最好是在逗号后面拆分。

操作符后面进行拆分减少了通过插入分号伪装copy-paste错误的可能性。下一行应该缩进8个空格。

注释

慷慨的写注释。留下一些供需要理解你做了什么的人们(可能是你自己)下次阅读的信息是有用的。注释应该书写良好和清晰,就像它们

标注的代码一样。偶尔小幽默一把也是可以的。挫折和怨恨就别写了。

更新注释非常重要。错误的注释让程序更难读懂和理解。

让注释有意义。更多的关注于不能马上可见的东西。不要用如下内容浪费读者的时间:

i = 0; // Set i to zero.

一般使用行注释。把块注释用于正式文档或外部注释。

变量声明

所有的变量应该在使用前声明。JavaScript不强求这点,但是这样做会让程序更易读,并且会让探测未声明的可能变成隐式的globals的

变量更容易。

var语句应该为方法体内的第一个语句。

每个变量声明应该自己占一行并有注释。它们应该按字母顺序排列。

var currentEntry; // currentyly selected table entry

var level; // indentation level

var size; // size of table

JavaScript没有块作用域,所以在块里定义变量可能会让有其它C家族语言经验的程序员迷惑。在方法顶端定义所有变量。

尽量少使用全局变量。隐式的全局变量应该从来不使用。

方法声明

所有的方法应该在它们使用前声明。内部方法应该位于var语句后面。这让哪些变量包含在它的scope里更清楚。

方法名和参数列表的 ( (左圆括号)之间不应该有空格。在 ) (右圆括号)和 { (左大括号)之间有一个空格。

方法体本身缩进4个空格。 } (右大括号)应该和方法声明处对齐。

function outer(c, d) {

var e = c * d;

function inner(a, b) {

return (e * a) + b;

}

return inner(0, 1);

}

这个规范可以和JavaScript很好的工作,因为在JavaScript里方法和对象字面量可以放在允许表达式的任何位置。它使用内部方法和复杂

结构提供最好的可读性。

function getElementsByClassName(className) {

var results = [];

walkTheDOM(document.body, function (node) {

var a; // array of class names

var c = node.className; // the node's classname

var i; // loop counter

// If the node has a class name, then split it into a list of simple names.

// If any of them match the requested name, then append the node to the set of results.

if (c) {

a = c.split(' ');

for (i = 0; i < a.length; i += 1) {

if (a[i] === className) {

results.push(node);

break;

}

}

}

});

return results;

}

如果一个方法字面量为匿名的,则在 function 和 ( (左圆括号)之间应该有一个空格。如果省略空格,则它可能看起来方法名是

function ,而这是错误的。

div.onclick = function (e) {

return false;

};

that = {

method: function () {

return this.datum;

},

datum: 0;

};

尽量少用全局方法。

命名

命名应该由26个大小写字母(A .. Z, a .. z),10个数字(0 .. 9)和_(下划线)组成。不要使用国际字符,因为它们可能不易读或者不能在

任何地方都能容易理解。不要在名字里使用$(美元符号)或(反斜线符号)。

不要使用_(下划线)作为名字的首字母。它有时被用来表示私有,但是它实际上不提供私有性。

如果私有性很重要,使用提供私有性的private members。

Avoid conventions that demonstrate a lack of competence.

大多数变量和方法名应该以小写字母开始。

必须使用new前缀的构造函数应该以大写字母开始。JavaScript不会在省略new时报编译期警告或运行时警告。

不使用new时会发生坏事情,所以大写首字母规范是我们拥有的唯一的防御。

全局变量应该全部使用大写字母。(JavaScript没有宏或常量,所以没有多少要求使用大写字母来表示JavaScript的特性的场景)

语句

简单语句

每行应该包含至少一个语句。在每个简单语句末尾添加一个 ; (分号)。注意一个给方法字面量或对象字面量赋值的赋值语句仍然是

一个赋值语句,所以也必须以分号结尾。

JavaScript允许任何表达式作为语句使用。这可能产生一些错误,特别是在插入分号时。唯一可以当作语句使用的表达式是赋值表达式和

调用表达式。

复合语句

复合语句是包含一个用 {} (大括号)包围语句列表的的语句。

1,包围的语句应该再缩进4个空格。

2, { (左大括号)应该位于开始复合语句的行的末尾。

3, } (右大括号)应该新起一行并且和相匹配的 { 所在那行的起始位置对齐

4,当语句是控制结构的一部分时,所有语句都应该用括号包围,即使是单行语句,例如if或for语句。这让添加语句更容易而且不会引起八哥。

标签

语句标签是可选的。只有如下语句需要被标签标识: while,do,for,switch。

return语句

具有值的return语句不应该使用 () (圆括号)包围值。返回值表达式必须和return关键字在同一行从而避免插入分号。

if语句

if语句应该使用如下格式:

if (condition) {

statements;

}

if (condition) {

statements;

} else {

statements;

}

if (condition) {

statements;

} else if (condition) {

statements;

} else {

statements;

}

for语句

for语句应该使用如下格式:

for (initialization; condition; update) {

statements;

}

for (variable in object) {

statements;

}

第一种格式应该和数组使用。

第二种格式应该和对象使用。注意添加到对象的prototype中的成员将被包含在遍历中。通过使用hasOwnProperty方法来区分对象的

成员是明智的:

for (variable in object) {

if (object.hasOwnProperty()) {

statements;

}

}

while语句

while语句应该使用如下格式:

while (condition) {

statements;

}

do语句

do语句应该使用如下格式:

do {

statements;

} while (condition);

不像其它复合语句,do语句始终使用 ; (分号)结尾。

switch语句

switch语句应该有如下格式:

switch (e-xpression) {

case e-xpression:

statements;

default:

statements;

}

每个case和switch对齐,这避免了缩进过度。

每组语句(除了default)应该以break,return或者throw结束。不要fall through。

try语句

try语句应该使用如下格式:

try {

statements;

} catch (variable) {

statements;

}

try {

statements;

} catch (variable) {

statements;

} finally {

statements;

}

continue语句

不要使用continue语句。它会让方法的控制流程模糊。

with语句

不要使用with语句。

空格

空行通过将逻辑相关的代码放到一起来增加可读性。

空格应该用于如下情况:

1,关键字后面跟 ( (左圆括号)时应该用一个空格隔开。

while (true) {

2,方法名和方法的 ( (左圆括号)之间不要有空格。这利于区分关键字和方法调用。

3,所有的二元操作符,除了 . (圆点)、 ( (左圆括号)和 [ (左中括号),都应该使用一个空格来和操作数隔开。

4,一元操作符和操作数之间不应该使用空格隔开,除了操作符是一个单词时,如typeof。

5,for语句控制部分的每个 ; (分号)应该在后面跟一个空格。

6,每个 , (逗号)后面应该跟一个空格。

额外的建议

{}和[]

使用{}替代new Object()。使用[]替代new Array()。

当成员名字为连续的整数时使用数组。当成员名字为任意的字符串或名字时使用对象。

逗号操作符

不要使用逗号操作符,除了for语句的控制部分的严格使用。(这不适合逗号操作符,它应该用于对象字面量,数组字面量,var语句和参数

列表。)

块作用域

在JavaScript里块没有作用域,只有方法有作用域。不要使用块,除了复合语句一定需要用到外。

赋值表达式

不要在if和while语句的条件部分做赋值。不要写不易懂的代码。

===和!==操作符

始终使用===和!==操作符会更好。==和!=操作符会做类型强制转换。特别是,不要使用==来和 假 值做比较。

令人混淆的加和减

注意不要在 + 后面跟 + 或 ++ 。这种模式令人混淆。在它们之间插入圆括号来让你的意图更清晰。

total = subtotal + +myInput.value;

// is better written as

total = subtotal + (+myInput.value);

这样 + + 就不会被读错成 ++ 。

邪恶的eval

eval方法是JavaScript里最滥用的特性。不要使用它。

eval有别名。不要使用Function构造函数。不要传递字符串给setTimeout或者setInterval。

JavaScript特效

1 JS绘制曲线图

javascript绘制曲线图类

<script>

var gov=new Object();

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

}

}

Object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

var $ = function(elem) {

if (arguments.length > 1) {

for (var i = 0, elems = [], length = arguments.length; i < length; i++)

elems.push($(arguments[i]));

return elems;

}

if (typeof elem == 'string') {

return document.getElementById(elem);

} else {

return elem;

}

};

var period = Class.create();

period.prototype = {

initialize:function(value,time){

this.value = value;

this.time = time;

}

};

gov.Graphic = Class.create();

gov.Graphic.prototype={

initialize: function(data,elm,options){

this.setOptions(options);

this.entity=document.createElement("div");

this.pointBox=$(elm);

this.showPointGraphic(data);

},

setOptions: function(options) {

this.options = {

height:170,//绘图区域高度

maxHeight:50,//y轴最高数值

barDistance:26,//x轴坐标间距

topDistance:0,//上部填充

bottomDistance:0,//底部填充

leftDistance:20,

pointWidth:5,//坐标点宽度

pointHeight:5,//坐标点高度

pointColor:"#ff0000",//坐标点颜色

lineColor:"#ffd43a",//连接线颜色

valueWidth:20,//y轴数值宽度

valueColor:"#000",//y轴数值颜色

timeWidth:20,//x轴数值宽度

timeColor:"#000",//x轴数值颜色

disvalue:true,//是否显示y轴数值

distime:true//是否显示x轴数值

}

Object.extend(this.options, options || {});

},

showPointGraphic:function(data,obj)

{

var This=this;

var showPoints=new Array();

var values=new Array();

var times=new Array();

This.points=data;

This.count=data.value.length;

for(var i=0;ithis.options.maxHeight)

{

showPoint.height=this.options.maxHeight;

}

spanValue.innerHTML=showPoint.value;

spanTime.innerHTML=showPoint.time;

showPoints.push(showPoint);

values.push(spanValue);

times.push(spanTime);

This.entity.appendChild(showPoint);

This.entity.appendChild(spanValue);

This.entity.appendChild(spanTime);

var percentage=showPoints[i].height/this.options.maxHeight||0;

var pointTop=(this.options.height-this.options.topDistance-this.options.bottomDistance-timeHeight-valueHeight)*percentage;

showPoints[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-this.options.pointHeight)+"px";

values[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-valueHeight)+"px";

times[i].style.top=this.options.height-this.options.bottomDistance-timeHeight+"px";

}

var _leng=showPoints.length

for(var i=0;i0)

{

This.drawLine(parseInt(showPoints[i-1].style.left),

parseInt(showPoints[i-1].style.top),

parseInt(showPoints[i].style.left),

parseInt(showPoints[i].style.top)

);

}

}

This.Constructor.call(This);

},

drawLine:function(startX,startY,endX,endY)

{

var xDirection=(endX-startX)/Math.abs(endX-startX);

var yDirection=(endY-startY)/Math.abs(endY-startY);

var xDistance=endX-startX;

var yDistance=endY-startY;

var xPercentage=1/Math.abs(endX-startX);

var yPercentage=1/Math.abs(endY-startY);

if(Math.abs(startX-endX)>=Math.abs(startY-endY))

{

var _xnum=Math.abs(xDistance)

for(var i=0;i

<script language=javascript>

Phrase="网页特效观止"

Balises=""

Taille=80;

Midx=250;

Decal=0.5;

Nb=Phrase.length;

y=-10000;

for (x=0;x

赞助本站

人工智能实验室

相关热词: 特效 JavaScript

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港