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 id="fancybox-error">The requested content cannot be loaded.<br />Please try again later.</p>' );
_process_inline();
},
_start = function() {
var obj = selectedArray[ selectedIndex ],
href,
type, //定义变量形式，分行显示，更清晰
title,
str,
emb,
ret;
//不同逻辑空行
_abort();
selectedOpts = $.extend({}, $.fn.fancybox.defaults, (typeof $(obj).data('fancybox') == 'undefined' ? selectedOpts : $(obj).data('fancybox')));
ret = selectedOpts.onStart(selectedArray, selectedIndex, selectedOpts);
if (ret === false) {
busy = false;
return;
} else if (typeof ret == 'object') {
selectedOpts = $.extend(selectedOpts, ret);
}
title = selectedOpts.title || (obj.nodeName ? $(obj).attr('title') : obj.title) || '';
if (obj.nodeName && !selectedOpts.orig) {
selectedOpts.orig = $(obj).children("img:first").length ? $(obj).children("img:first") : $(obj);
}
if (title === '' && selectedOpts.orig && selectedOpts.titleFromAlt) {
title = selectedOpts.orig.attr('alt');
}
href = selectedOpts.href || (obj.nodeName ? $(obj).attr('href') : obj.href) || null;
if ((/^(?:javascript)/i).test(href) || href == '#') {
href = null;
}
if (selectedOpts.type) {
type = selectedOpts.type;
if (!href) {
href = selectedOpts.content;
}
} else if (selectedOpts.content) {
type = 'html';
} else if (href) {
if (href.match(imgRegExp)) {
type = 'image';
} else if (href.match(swfRegExp)) {
type = 'swf';
} else if ($(obj).hasClass("iframe")) {
type = 'iframe';
} else if (href.indexOf("#") === 0) {
type = 'inline';
} else {
type = 'ajax';
}
}
if (!type) {
_error();
return;
}
if (type == 'inline') {
obj = href.substr(href.indexOf("#"));
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());
});
//链式调用 的换行 ，方便看逻辑
总结： 代码格式的起发点是便于读，例子中以单独逻辑段多拆分插入空行，换行定义变量，都是可学习之处