围绕jQuery插件缠头

Question

我正在尝试我的第一个jQuery插件。

（YAY ...关于时间！）

我很难绕过如何正确使用可公开访问的功能。

代码

(function($, doc, win){
    "use strict";

    // Our main function
    $.fn.ajaxian = function(options){
        // Our Settings
        var $setts = $.extend({
                CallBack:         null,
                LoadInto:         'body',
                LoadSection:       null,
                LoadingContent: null,
                LoadInEffect:     'fade'
            }, options);

        console.log('Plugin Initialized');

        var elements = this;

        return {
            ManualLoad: function(){
                console.log('Manual Fired');
            },
            elements: function(){
                $(this).on('click', function(e){
                    e.preventDefault();
                    return $.fn.ajaxian.LoadPage;
                }); 
            }
        };  

    };

    // Load in a page
    $.fn.ajaxian.LoadPage = function(){
        console.log('Internal Page Load Initialized');  
    };

}(jQuery, document, window));

更新代码

(function($, doc, win){
    "use strict";

    // Our main function
    $.fn.ajaxian = function(options){
        // Our Settings
        var $setts = $.extend({
                CallBack:         null,
                LoadInto:         'body',
                LoadSection:       null,
                LoadingContent: null,
                LoadInEffect:     'fade'
            }, options);

        console.log('Plugin Initialized');

        return this.each(function(){
            var $this = $(this);
            $this.on('click', function(e){
                e.preventDefault();
                $.fn.ajaxian.LoadPage();
            });
        });

    };

    // Load in a page
    $.fn.ajaxian.LoadPage = function(){
        console.log('Internal Page Load Initialized');  
    };

    // Manual load in a page
    $.fn.ManualLoad = function(){
        console.log('Manual Page Load Initialized');
        $.fn.ajaxian.LoadPage();
    };

}(jQuery, document, window));

用法

jQuery(window).on('load', function(){
    // Initialize everything
    Initialize(jQuery);
});

var Initialize = function($){
    var options = {
        CallBack:         function(){console.log('Callback Fired')},
        LoadInto:         '#container',
        LoadSection:       '#content',
        LoaderContent:   null,
        LoadInEffect:     'fade'
    };
    $('a:not(.external), button:not(.external), .internal').ajaxian(options);

    $('body').ajaxian(options).ManualLoad();

    if(location.pathname == '/'){
        $('body').ajaxian('init', options);
    }
};

现在，当我在我的firebug控制台中获取Plugin Initialized时，我在尝试ManualLoad时遇到错误。

它说： TypeError: $(...).ajaxian(...) is undefined

我做错了什么？

Answer 1

您的ajaxian方法应该返回一个将ManualLoad作为函数的对象：

$.fn.ajaxian = function() {
    // Our Settings
    var elements = this;
    var $setts = $.extend({}, $.fn.ajaxian.defaults, options);
    console.log('Plugin Initialized');

    elements.on('click', function(e){
        var $clickedElement = $(this);
        e.preventDefault();
        // do something with clicked element here
    }); 

    return {
         ManualLoad: function(){
             console.log('Manual Fired');
             // use elements here
         }
    }
};

Answer 2

你的ajaxian函数没有返回任何值！

    $.fn.ajaxian = function(options){
        // Our Settings
        var $setts = $.extend({}, $.fn.ajaxian.defaults, options);
        console.log('Plugin Initialized');
        //should return some value.
    };