你会如何改变这种类型的代码？

Question

我有下面的代码，但对于jQuery我还是很新的，我敢肯定这是凌乱的代码，可以缩短或者使用更少的变量来创建更好的动态插件。我试图用不同类型的逻辑进行实验。这是代码。

$.pluginName = (function() { 
    $(function() { 
     var message = "Hello World!"; 
     var animSpeed = 300; 
     var animType = 'fadeIn'; 
     var icon = "pin"; 
     var btnText = "Purchase"; 
     var btnColor = "pink"; 
     var btnLink = 'http://www.google.com'; 
     var content = '<div id="mn_close" class="light"></div>' + '<div id="mn_border"></div>' + '<i class="icon-' + icon + '"></i>' + '<span class="mn_message">' + message + '</span>' + '<a href="' + btnLink + '" class="button ' + btnColor + '">' + btnText + '</a>'; 
     $("#mn_close").live("click", function() { 
      $('.mn_bar').animate({ 
       top: '-50' 
      }, animSpeed, function() {}); 
     }); 
     $(".mn_bar").append(content); 
     $(function() { 
      $(".mn_bar").addClass("animated"); 
      $(".mn_bar").addClass(animType); 
     }) 
    }) 
})(jQuery); 

有关如何将这些变量传递给用户可以从HTML源动态更改的选项的任何提示？我并不期待详细的答案，但我会感激任何帮助传递。

EDI：JS与CSS的小提琴& HTML。

http://jsfiddle.net/QjFnf/8/

提前感谢！

Answer 1

看看这有助于：

(function($){ 

    var _defaults = { 
    message = 'Hello World!', 
    animSpeed = 300, 
    animType = 'fadeIn', 
    icon = 'pin', 
    btnText = 'Purchase', 
    btnColor = 'pink', 
    btnLink = 'http://www.google.com' 
    }; 

    $.pluginName = function(opts) { 

    var o = $.extend({}, _defaults, opts) 
     , $bar = $('.mn_bar').addClass('animated '+ animType) 
     , $close = $('<div id="mn_close" class="light"/>') 
     , $icon = $('<i class="icon-"'+ o.icon +'></i>') 
     , $message = $('<span class="mn_message">'+ o.message +'</span>') 
     , $link = $('<a href="'+ o.btnLink +'" class="button "'+ o.btnColor +'>'+ o.btnText +'</a>'); 

    $close.click(function(){ 
     $bar.animate({ top: '-50px' }, animSpeed); 
    }); 

    $bar.append($bar, $close, $icon, $message, $link); 

    }; 

})(jQuery); 

Answer 2

基于@kennypu评论，我已经做到了这一点： 我没有测试它在所有，但我认为这是重构你的插件的好方法：

(function($) { 
    $.fn.myPlugin = function(options) { 

     // Create some defaults, extending them with any options that were provided 
     var settings = $.extend({ 
      message : "Hello World!", 
      animSpeed : 300, 
      animType : 'fadeIn', 
      icon : "pin", 
      btnText : "Purchase", 
      btnColor : "pink", 
      btnLink : 'www.google.com', 
     }, options); 

     // A tidier way to create the content would be to use jQuery like this : http://api.jquery.com/jQuery/#jQuery2 
     var content : '<div id="mn_close" class="light"></div>' + '<div id="mn_border"></div>' + '<i class="icon-' + settings.icon + '"></i>' + '<span class="mn_message">' + settings.message + '</span>' + '<a href="' + settings.btnLink + '" class="button ' + settings.btnColor + '">' + settings.btnText + '</a>'; 

     var mn_bar = $(".mn_bar"); 
     mn_bar.append(content); 

     $("#mn_close").on("click", function() { 
      mn_bar.animate({ 
       top: '-50' 
      }, settings.animSpeed, function() {}); 
     }); 


     mn_bar.addClass("animated " + settings.animType); 

    }) 
})(jQuery); 

编辑：我定一个变量为.mn_bar，因为没有理由再次在DOM中查找此元素。我还删除了两个电话addClass()，并只有一个。