Question

我开发了以下jQuery代码。

我有一些问题：

开发jQuery插件的最佳编程模式是什么？
如何将代码转换为插件？（我知道可以用$.fn.function做我要求的事情，但我不明白的是如何将它与对象一起使用。）
我应该学习和掌握单一的编程模式，还是必须学习模式，一切都存在？

这是我的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特定部分。

Answer 2

严肃地说，你有read the docs吗？它们非常简单，$.fn.function是大多数情况下最好的方法。

这是一个简单的例子：

<div id="mydiv">
    sfdsdfsdfsdf
</div>

(function($) {
    $.fn.myfunction = function() { this.html('Hi!'); }
})(jQuery);

$('#blarg').myfunction();

您可以在(function($) {})(jQuery);调用中构建所需的所有支持方法和对象。

Answer 3

你已经有了一个有效的插件，只需让jquery与它进行交互。

$.animation = animation;
$.fn.animation = function (options) {
    return this.each(function () {
        $.animation.init($.extend({
            link: this
        }, options));
    });
};

http://jsfiddle.net/8bmU6/1/

$.animation只是对原始插件的引用，$.fn.animation是一个包装器，因此您可以调用$(".link").animation({options here})

Answer 4

我建议您阅读并尝试按照 jQuery Boilerplate 编写插件 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/

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

4 个答案: