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());
                        });

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


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

原文地址:https://www.cnblogs.com/yushunwu/p/2297562.html