zoukankan      html  css  js  c++  java
  • 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());
                            });

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


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

  • 相关阅读:
    测试方法与步骤
    团队项目需求分析
    第一次个人作业
    3种shell自动交互的方法
    mysql用户管理
    build web application with golang
    安卓中的LINUX内核
    结对项目小结
    关于aria2-yaaw下载软件
    软工结对项目预览
  • 原文地址:https://www.cnblogs.com/yushunwu/p/2297562.html
Copyright © 2011-2022 走看看