javascript - 围绕 jQuery 插件

Question

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

(耶……时间到了!)

我很难思考如何让一个可公开访问的函数正常启动。

代码

(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 时遇到错误。

它指出:类型错误:$(...).ajaxian(...) 未定义

我做错了什么？

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
         }
    }
};