文章/答案/技术大牛

发布

社区首页 >问答首页 >您将如何更改这类代码？

问您将如何更改这类代码？
EN

Stack Overflow用户

提问于 2012-12-27 10:35:16

回答 2查看 193关注 0票数 2

我有以下代码，但我仍然是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:带有CSS和HTML的JS小提琴。

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

提前感谢！

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-12-27 11:00:07

看看这是否有帮助：

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

票数 1

Stack Overflow用户

发布于 2012-12-27 10:53:35

基于@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()的两次调用，只进行了一次调用。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14048723

复制

相似问题

问您将如何更改这类代码？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问您将如何更改这类代码？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问您将如何更改这类代码？
EN