mercredi 26 août 2015

How to get this simplified copy of FullCalendar working and understand the applied patterns?

I'm trying to get my head around the 11,000+ lines of JavaScript code in FullCalendar in order to be able to build new features into it, and so I am trying to understand the various patterns that are being used, especially the beginning here:

FullCalendar v2.4.0:

(function(factory) {
    if (typeof define === 'function' && define.amd) {
        define([ 'jquery', 'moment' ], factory);
    }
    else if (typeof exports === 'object') { // Node/CommonJS
        module.exports = factory(require('jquery'), require('moment'));
    }
    else {
        factory(jQuery, moment);
    }
})(function($, moment) {

;;

var fc = $.fullCalendar = { version: "2.4.0" };
var fcViews = fc.views = {};


$.fn.fullCalendar = function(options) {
    var args = Array.prototype.slice.call(arguments, 1); // for a possible method call
    var res = this; // what this function will return (this jQuery object by default)

    this.each(function(i, _element) { // loop each DOM element involved
        var element = $(_element);
        var calendar = element.data('fullCalendar'); // get the existing calendar object (if any)
        var singleRes; // the returned value of this single method call

        // a method call
        if (typeof options === 'string') {
            if (calendar && $.isFunction(calendar[options])) {
                singleRes = calendar[options].apply(calendar, args);
                if (!i) {
                    res = singleRes; // record the first method call result
                }
                if (options === 'destroy') { // for the destroy method, must remove Calendar object data
                    element.removeData('fullCalendar');
                }
            }
        }
        // a new calendar initialization
        else if (!calendar) { // don't initialize twice
            calendar = new Calendar(element, options);
            element.data('fullCalendar', calendar);
            calendar.render();
        }
    });

    return res;
};
...

In order to understand what each line of this code is for, I'm trying to build a simplified copy of the it here:

http://ift.tt/1V9zW0U

What do I need to change to this jsfiddle to get it to the point that it is functioning as FullCalendar where I <div id='calendar'></div> produces HTML text in the same way that the FullCalendar module does?

I need to get it to this point so that I can begin building on it and thus coming into an understanding of how the FullCalendar module works in detail.

I've added questions regarding specific lines of code which are not clear.

// where exactly is factory being passed in?
(function(factory) {
    // I understand this code to be part of the 
    // JavaScript specification "Asynchronous Module Definition"
    // and seems to be defining jQuery and moment.js as dependencies
    // but they are available anyway so why do they need to be defined as dependencies here?

    // where is the variable "define" coming from?
    if (typeof define === 'function' && define.amd) {
        define([ 'jquery', 'moment' ], factory);
    }
    // where is is the variable "exports" being defined
    else if (typeof exports === 'object') { // Node/CommonJS
        module.exports = factory(require('jquery'), require('moment'));
    }
    else {
        factory(jQuery, moment);
    }
})(function($, moment) {

    // this I understand as simply defining an object "fullCalendar" in the jQuery scope
    // but what does it have to do with the $.fn.fullCalendar below?
    var fc = $.fullCalendar = { version: "2.4.0" };

    $.fn.fullCalendar = function() {
        return 'calendar test works';
    };
});


$(function() {
    $('#calendar').html('jquery works');    
    $('#calendar').fullCalendar();    
});

Aucun commentaire:

Enregistrer un commentaire