javascript - 如何将 jQuery 代码转换为插件？和插件开发模式

Question

我开发了以下 jQuery 代码。

我有一些问题:

1. 开发 jQuery 插件的最佳编程模式是什么？
2. 如何将我的代码转换为插件？ (我知道可以使用 $.fn.function 完成我所要求的操作，但我不明白如何将它与对象一起使用。)
3. 我应该学习并掌握单一编程模式还是必须学习多种模式？

这是我的 HTML:

<ul class="linkContainer">
    <li><a href="#" class="link" data-link="one">one</a></li>
    <li><a href="#" class="link" data-link="two">two</a></li>

<div class="moreDetailsSection" data-section="one">
    chakabakas
</div>
<div class="moreDetailsSection" data-section="two">
    sasjakjk
</div>

还有我的 JavaScript:

  (function ($) {


    var animation = {
        options: {
            linkContainer : $('.linkContainer'),
            section: $('.section'),
            link : $('.link'),
            mainEffect: 'slideToggle',
            mainEffectSpeed: 300
        },

        init: function (options) {                                       
            var link = this.options.link;

            $.extend(this.options, options); 
            link.on('click', this.changeWindow );
        },

        changeWindow: function () {
            var linkId = $(this).data('link'),
                options = animation.options,
                sectionContainer = animation.options.section,
                elements = sectionContainer,
                element = elements.filter('[data-section="'+ linkId +'"]');                                      
                element[options.mainEffect](options.mainEffectSpeed);                    

        }            

    }        

    animation.init();


 })(jQuery);

<强> Demo

Answer 1

我将从 JQuery's guide to writing a plugin 开始，这将涵盖如何实际构建 JQuery 插件的基础知识。听起来您对学习一般模式更感兴趣，这太棒了!我将从如何开始构建插件，然后研究如何改进其中的代码。 Addy Osmani 有一些 great resources关于设计模式。

我在编写代码时尝试考虑的两个概念是“separation of concerns” ' 和 single responsibility principle

这可能超出了您的预期。并非所有这些链接都与 JQuery 相关，而是与一般的编码模式相关。第一个链接应该引导您完成 JQuery 的特定部分。