如何使这个简化的FullCalendar副本工作并理解所应用的模式
How to get this simplified copy of FullCalendar working and understand the applied patterns?
我正试图让我的头在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意思?)
相关文章:
- Pinterest API应用程序处于开发模式(因此我可以使用http重定向)
- InvalidOperationException:当应用程序未在UserInteractive模式下运行时显示模式对话
- 为什么我的UI应用程序嵌套在引导模式中时无法工作
- 使用中介pub/sub模式时路由骨干应用程序
- 如何仅在字段为$dirty时应用ng模式
- 用于登录/注册Angular应用程序的模式/对话框
- 我如何创建一个Chrome应用程序,有效地充当信息亭模式下的启动页面
- IFRAME和谷歌应用程序脚本中的NATIVE模式
- 如何在node.js控制台应用程序中应用模块模式
- 我可以使用emscripten在i386模式下编译应用程序吗
- 如何使用路由提供程序在应用中调用模式服务
- 以全屏模式启动 Chrome 打包应用
- 在 Node.js 应用程序中包装记录器的设计模式
- 在生产模式下运行时,图像不会显示在 yeoman 应用中
- 如何在轨道应用程序上首次访问站点触发弹出模式
- 输入模式应用程序状态,直到下次使用 Jquery 单击
- 如何使用PhoneGap + Cordova在Android应用程序中启用横向和纵向模式
- 如何检测 Web 应用是否在应用模式或 Safari 模式下运行
- 将链接模式应用于元素及其子元素的创建
- 到达揭示模式应用类之外的BTN事件