Тренировочный дневник календарь


Я часто использую jQuery плагины для интерфейсных функций в веб-приложениях. Это требует, чтобы я написал такой код, где я назначаю функцию объекта недвижимости:

var trainingDiary = $("#training_diary").fullCalendar({
  dayClick: function(date, allDay, jsEvent, view) {

    var title = prompt('Event Title:');
    var dayObj = $(this);
    //console.log($(this));
    if (title) {
     $.ajax({
      url: "/app_dev.php/addtrainingday",
      global: false,
      type: "POST",
      data: "dayNo=" + date.getDate(), //returns day of month. getDay() returns day of week
      async:true,
      success: function(msg) {

               trainingDiary.fullCalendar('renderEvent',
                {
                  title: title,
                  start: date,
                  allDay: allDay,
                  backgroundColor:'#cccccc'
                },
            true // make the event "stick" across calendar pages
          )

      dayObj.css({'background-color':'#339933','background-image':'url()'})
      console.log(msg.valueOf());
      } //end ajax success
     })
   } else {
      trainingDiary.fullCalendar('unselect');
   }

  },

  theme: true,
  header: {left:'title',
            center: '',
            right: 'today prev next'},
  firstDay:1

});

Код становится трудно читать и поддерживать, как сейчас функции Success в AJAX-функция в еще одну функцию. Как я могу улучшить код таким образом, что dayClick: функция(...) могут вызывать функции, определенные вне fullCalendar звонок? В данном случае, fullCalendar - это jQuery плагин.



1637
3
задан 28 июля 2011 в 10:07 Источник Поделиться
Комментарии
1 ответ

Вы должны использовать JavaScript в модуле шаблон для создания собственной рамки для функции объявления:

// Directives for JSLint
/*global console, prompt, $ */ // declaration of global variables used
/*jslint unparam: true, sloppy: true, white: true */ // disable less useful checks

// create a closure for private scope
(function(){

// Private declarations

var calendarOptions, // object, options for calendar diary
trainingDiary; // object, training diary using jQuery plugin fullCalendar()

function onDayClick(date, allDay, jsEvent, view) {
// Function: onDayClick(day, allDay, jsEvent, view)
// Callback for the selection of a day in the calendar.
//
// Parameters:
// date - type?, description?
// allDay - type?, description?
// jsEvent - type?, description?
// view - type?, description?

// single var declaration
var title, // string, event title, input by user
dayObj, // object, jQuerified DOM element
ajaxOptions; // object, options for AJAX call to addtrainingday script

// this declaration must be nested to access date, allDay... in closure scope
function onAjaxSuccess(msg) {
// Function: onAjaxSuccess(msg)
// Callback for a successful AJAX call to server-side addtrainingday script.
//
// Parameter:
// msg - string, message received from server, for logging purpose

var event = {
title: title,
start: date,
allDay: allDay,
backgroundColor:'#cccccc'
};

trainingDiary.fullCalendar(
'renderEvent',
event,
true // make the event "stick" across calendar pages
); // added missing semicolon

dayObj.css({
'background-color':'#339933',
'background-image':'url()'
}); // added missing semicolon

console.log(msg.valueOf());

} // end of onAjaxSuccess declaration

// Init
title = prompt('Event Title:');
dayObj = $(this);
ajaxOptions = {
url: "/app_dev.php/addtrainingday",
global: false,
type: "POST",
// getDate() returns day of month. getDay() returns day of week
data: "dayNo=" + date.getDate(),
async: true,
success: onAjaxSuccess
};

//console.log($(this));
if (title) {
$.ajax(ajaxOptions); // added missing semicolon
} else {
trainingDiary.fullCalendar('unselect');
}

} // end of onDayClick declaration

// Initialization code

calendarOptions = {
dayClick: onDayClick,
theme: true,
header: {
left: 'title',
center: '',
right: 'today prev next'
},
firstDay: 1
};

trainingDiary = $("#training_diary").fullCalendar(calendarOptions);

}()); // the function is called immediately to make the declarations effective

Я также создал дополнительные переменные для хранения объектов параметров, для повышения читабельности, и я добавил комментарии, чтобы описать назначение и параметры функции объявлены.

Обратите внимание, что trainingDiary сейчас объявлен в частной сферы, а также. Если вам нужно получить к нему доступ в глобальную область видимости, вам придется экспортировать его в глобальный объект, присвоить его глобальной или это окно:

(function(){

// Private declarations
(...)

// Init
(...)

// Public declarations
this.trainingDiary = trainingDiary;
}());

Я проверил код с последней JSLint; это полезный инструмент, когда вы знаете, чего ожидать от него, например, прочитав "JavaScript: в хорошие части" от автора Дуглас Крокфорд. Это, несомненно, поможет вам определить недостающие точки с запятой, которая может вызвать неожиданные проблемы, когда вы сократите свой код.

4
ответ дан 28 июля 2011 в 01:07 Источник Поделиться