如何使这个简化的FullCalendar副本工作并理解所应用的模式

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

本文关键字:模式 应用 工作 副本 何使这 FullCalendar      更新时间:2023-09-26

我正试图让我的头在FullCalendar的11,000+行的JavaScript代码,以便能够构建新的功能,所以我试图理解正在使用的各种模式,特别是这里的开始:

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

为了理解每一行代码的作用,我试图在这里构建一个简化的it副本:

http://jsfiddle.net/edwardtanguay/mbs5uafd/2

我需要改变这个jsfiddle得到它的点,它是作为FullCalendar其中<div id='calendar'></div>产生HTML文本在FullCalendar模块一样的方式?

我需要把它弄到这一点,这样我就可以开始在它的基础上进行构建,从而了解FullCalendar模块是如何详细工作的。

对于不清楚的特定代码行,我添加了一些问题。

// 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();    
});

这是我对第一个代码块的注释,对于那些试图弄清楚这一点的人来说,基本上第一个代码块只是确保jQuery和moment被加载,并且足够灵活,可以以不同的方式加载它们

(function(factoryWhatever) {
    // ET: this is checking for AMD script such as require.js, is undefined here and skips through
    // ET: it is just making sure that jquery and moment are loaded
    if (typeof define === 'function' && define.amd) {
        define([ 'jquery', 'moment' ], factoryWhatever);
    }
    // ET: this is checking for Node or CommonJS which can make sure that jquery and moment are loaded
    else if (typeof exports === 'object') { // Node/CommonJS
        module.exports = factoryWhatever(require('jquery'), require('moment'));
    }
    else {
        // ET: if neither an AMD script or Node/CommonJS is running, then it will just execute the massively long function below
        // ET: passing in jQuery and moment which will be called "$" and "moment" inside the function
        factoryWhatever(jQuery, moment);
    }
    // ET: this function from line 23 to 11167 is the whole fullCalendar application which runs with
    // ET: the two dependencies jQuery and moment
})(function($, moment) { 
    ...
});

下面是简化后的代码,基本展示了FullCalendar代码的结构:

http://jsfiddle.net/edwardtanguay/xw0s38un/2

(function(factory) {
    factory(jQuery, moment);
})(function($, moment) {
    var fc = $.fullCalendar = { version: "2.4.0" };
    $.fn.fullCalendar = function(options) {    
        var res = this;
        res.html('the calendar');
        return res;
    };
});
$(function() {
    $('#calendar').fullCalendar();    
});

正如您已经提到的,define来自像RequireJS这样的AMD脚本!代码检查是否加载了AMD脚本并设置依赖项。

但是它们是可用的,所以为什么它们需要在这里被定义为依赖呢?

他们是

?也许吧。这就是为什么会有RequireJS这样的东西。以确保加载了这些库。请点击上面的链接获取更多信息。

export来自(后面的评论说)NodeJS(见https://nodejs.org/)

$。fn是jQuery原型的别名。(参见:jQuery。fn意思?)