javascript 优雅代码格式

好的代码格式，将是重要的基础编程能力。要养成好的编程习惯，首先要从代码格式入手。

本文针对jquery.fancybox.js （弹窗插件）的编码格式，开展学习，算是个总结吧。

文件开始：注释

/*

* 注释的格式，

*/

/*

* FancyBox - jQuery Plugin //名称FancyBox 属性jquery插件

* Simple and fancy lightbox alternative //简要介绍

* //分开主次

* Examples and documentation at: http://fancybox.net //在哪

*

* Copyright (c) 2008 - 2010 Janis Skarnelis //权限 我们一般可以做作者署名，时间，邮箱

* That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.

*

* Version: 1.3.4 (11/11/2010) //版本

* Requires: jQuery v1.3+ //依赖

*

* Dual licensed under the MIT and GPL licenses:

* http://www.opensource.org/licenses/mit-license.php

* http://www.gnu.org/licenses/gpl.html

*/

总结:页面注释应该写些介绍，作者，开发时间，版本及相应依赖等

;(function($) { //代码开始前的;避免合并文件时出错， 有些文件前面没有;保证不出错。。。。闭包开始插件代码，保证代码执行，不受外界限制

var tmp, loading, overlay, wrap, outer, content, close, title, nav_left, nav_right,

selectedIndex = 0, selectedOpts = {}, selectedArray = [], currentIndex = 0, currentOpts = {}, currentArray = [],

ajaxLoader = null, imgPreloader = new Image(), imgRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i, swfRegExp = /[^\.]\.(swf)\s*$/i,

loadingTimer, loadingFrame = 1,

　　　titleHeight = 0, titleStr = '', start_pos, final_pos, busy = false, fx = $.extend($('<div/>')[0], { prop: 0 }),

isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,

定义变量 var 后，隔开多个变量,太长分行 变量对齐，，

　　/　*

* Private methods 私有方法

*/

　　_abort = function() { //_ 私有方法

loading.hide();

imgPreloader.onerror = imgPreloader.onload = null; //，赋值方法

if (ajaxLoader) {

ajaxLoader.abort(); //单独的逻辑段间应该换行

}

tmp.empty();

},

　　　　　　　　　　　　　　　　　　　　　　//函数间换行

　　　_error = function() {

if (false === selectedOpts.onError(selectedArray, selectedIndex, selectedOpts)) { //赋值运算符前后空一格,花括号间有一空格

loading.hide();

busy = false;

return;

}

selectedOpts.titleShow = false;

selectedOpts.width = 'auto';

selectedOpts.height = 'auto';

tmp.html( '<p ));

type = $(obj).length > 0 ? 'inline' : 'ajax';

}

selectedOpts.type = type;

selectedOpts.href = href;

selectedOpts.title = title;

if (selectedOpts.autoDimensions) {

if (selectedOpts.type == 'html' || selectedOpts.type == 'inline' || selectedOpts.type == 'ajax') {

selectedOpts.width = 'auto';

selectedOpts.height = 'auto';

} else {

selectedOpts.autoDimensions = false;

}

}

if (selectedOpts.modal) {

selectedOpts.overlayShow = true;

selectedOpts.hideOnOverlayClick = false;

selectedOpts.hideOnContentClick = false;

selectedOpts.enableEscapeButton = false;

selectedOpts.showCloseButton = false;

}

selectedOpts.padding = parseInt(selectedOpts.padding, 10);

selectedOpts.margin = parseInt(selectedOpts.margin, 10);

tmp.css('padding', (selectedOpts.padding + selectedOpts.margin));

$('.fancybox-inline-tmp').unbind('fancybox-cancel').bind('fancybox-change', function() {

$(this).replaceWith(content.children());

});

　　　$('<div class="fancybox-inline-tmp" />')

.hide()

.insertBefore( $(obj) )

.bind('fancybox-cleanup', function() {

$(this).replaceWith(content.children());

}).bind('fancybox-cancel', function() {

$(this).replaceWith(tmp.children());

});

　　　//链式调用 的换行 ，方便看逻辑

总结： 代码格式的起发点是便于读，例子中以单独逻辑段多拆分插入空行，换行定义变量，都是可学习之处