我一直在研究特别是 JavaScript 的代码组织技术,但还没有找到合适的解决方案。所以我想我在这里询问有关此事的任何意见。
介绍
我目前正在开发一个基于自定义开发的 php 框架的 Intranet 项目。
该框架的工作原理如下:
- 文件被分成模块。每个模块都有自己的文件夹
- GET 参数决定应该加载哪个模块
- 在模块文件夹中,您基本上可以做任何您想做的事情
模块内的文件夹结构如下所示:
[MODULEROOT] --[include] ----[auto] # every php script inhere gets autocincluded when the module loads ----[css] # module specific css files go in here. They also get autoincluded and injected into the header tag of the generated html ----[js] # module specific js files go in here. They also get autoincluded and injected into the header tag of the generated html --[interface] ---- class.modInterface.php # Provides an easy interface for other modules to use their functionality. ---- class.modAjaxInterface.php # All AjaxCalls inside this framework go through php which does context changes (switch working directories when calling other modules etc...), generates the necessary JavaScript calls etc... (based on jQuery's $.get()) ---- class.modSearch.php # Basically an interface for providing module specific search results and hooks them into the global search
全局 AjaxInterface 类看起来像这样(简化):
class ModuleAjaxInterface extends LibBase{ private static $handler_file = ""; private static $file_upload_handler_file = ""; private static $registered_objects = array(); public static function init(){ // Initialization of the class. Getting all the modules interfaces and registering them etc... // Setting up the handler_file base on the config } public static function create($request_params=array(), $funcname, $options=array()){ // Basically builds a JavaScript CodeBlock which handles all the function calling to the right file, parameter handling and callback functionality and returns it as String } public static function createPeriodical($request_params=array(), $funcname, $options=array()){ // Same as above but creates periodical calls to the given function } public static function createUploadElement($upload_target, $input="file", $options=array()){ // Creates an AjaxBased uploader and returns it as String } public function getHandlerUrl($params=array()){ // Returns the URL for manual AjaxCalls to a Module defined by params } }
问题
现在您对设置有了基本的了解,这是我的问题
我有一些在 javascript 上非常繁重的模块。所以有很多 AjaxCalls 到它自己的 AjaxInterface 或其他模块的 AjaxInterfaces 上。
这些 AjaxCall 是通过一个 PHP 函数生成的,结束时回显到页面。
然后我有特定的逻辑何时调用 Ajax JavaScript 函数以及响应数据的所有处理并将其注入到当前模块的 JavaScript 中的 dom 中。
很多时候,调用 AjaxFunctions 的 JavaScript 代码是通过 PHP 生成的,因为它依赖于来自 PHP 环境的信息。像会话信息或用户特定信息或数据库相关的东西。
所以我目前编写了一个 PHP 函数,它将带有 AjaxCall 的 JavaScript 函数输出到 PHP 函数。这个 JavaScript 函数被另一个 JavaScript 函数调用,或者在一个可能依赖于当前 PHP 环境的 JavaScript 事件中调用,这就是为什么它是用 PHP 编写的。
我希望任何人都明白我的问题是什么。结果,我经常会使用大量的内联 JavaScript,因为所有模块都呈现在 html 的内容 div 中。另外我应该如何处理 $(document).ready() 调用?
为了给您一个简短的示例,它是如何使用此设置的,请参见以下代码行:
在我们的预订系统中
设施容器.php:
<?php
...
include_once('facility_dropdown.php');
include_once('facility_calendar.php');
include_once('facility_javascript.php');
?>
设施_javascript.php:
<script type="text/javascript">
<?php
if(!$rights->getSpecialRight('IS_FACACC', $facility_id) && $resmode==2){
?>
_flash("<h3>Information</h3><p>You don't have access to this facility.</p>", 'INFO', 0);
<?php
}
?>
$(document).ready(function(){
function setFacilityListAndShow(html){
$('#facility-list').html(html).parent().show();
$('#facility-list').combobox();
}
function setFacilityListAndHide(html){
$('#facility-list').html(html).parent().show();
$('#facility-list').combobox();
}
function setFacilityList(html){
$('#facility-list').html(html);
}
[...]
$('#facility-list').change(function(){
$('form[name="facility_form"]').submit();
});
<?php echo ModuleAjaxInterface::create(array('intname'=>'facilities', 'funcname'=>'getFacilitiesByTid'), 'getFacilitiesByTid', array('use_callback'=>true)); ?>
<?php echo ModuleAjaxInterface::create(array('intname'=>'facilities', 'funcname'=>'addReservationAsArray'), 'addReservationAsArray', array('use_callback'=>true)); ?>
<?php echo ModuleAjaxInterface::create(array('intname'=>'facilities', 'funcname'=>'addReservationAsSeriesAsArray'), 'addReservationAsSeriesAsArray', array('use_callback'=>true)); ?>
<?php echo ModuleAjaxInterface::create(array('intname'=>'facilities', 'funcname'=>'addSeriesElementAsArray'), 'addSeriesElementAsArray', array('use_callback'=>true)); ?>
<?php echo ModuleAjaxInterface::create(array('intname'=>'facilities', 'funcname'=>'fetchEvents'), 'fetchEvents', array('use_callback'=>true)); ?>
<?php echo ModuleAjaxInterface::create(array('intname'=>'facilities', 'funcname'=>'removeEvent'), 'removeEvent', array('use_callback'=>true)); ?>
<?php echo ModuleAjaxInterface::create(array('intname'=>'facilities', 'funcname'=>'updateEvent'), 'updateEvent', array('use_callback'=>true)); ?>
[...]
function removeEventComplete(data, input_params){
if(data.status == 'success'){
$('#calendar').fullCalendar('removeEvents', current_event.id);
current_event = null;
resetBookingForm();
}
_flash('<h3>'+data.title+'</h3><p>'+data.msg+'</p>', data.status, data.timeout);
}
function updateEventComplete(data, input_params){
if(data.status == false){
$('#submit').show();
$('#calendar').fullCalendar('rerenderEvents'); // Nothing was updated. So we rerender all the events so that the reservation appears on the same place
}else{
resetBookingForm();
}
}
<?php
if(!empty($facility_id)){
?>
[...] // 1000 lines of logic
$('#submit').click(function(){
$(this).hide();
$('#delete').hide();
var startdate = new Date(_parseInt($('#start-year').val()), _parseInt($('#start-month').val()-1), _parseInt($('#start-day').val()), _parseInt($('#start-hour').val()), _parseInt($('#start-minute').val()),0);
var enddate = new Date(_parseInt($('#start-year').val()), _parseInt($('#start-month').val()-1), _parseInt($('#start-day').val()), _parseInt($('#end-hour').val()), _parseInt($('#end-minute').val()), 0);
var send_notification = 0;
if($('#notify').is(':checked')){
send_notification = 1;
}
var is_private = 0;
if($('#is_private').is(':checked')){
is_private = 1;
}
// New Event was created so we call addReservationAsArray();
if(current_event.db_id == 0){
var event_type = $('input[name=type]:checked').val();
if(event_type == 'single'){
var new_event = {
'reservation': {
'facilityid': <?php echo $facility_id; ?>,
'userid': '<?php echo $session->getUser(); ?>',
'serid': 0,
'reason': $('#title').val(),
'begin': startdate.getTime()/1000,
'end': enddate.getTime()/1000,
'send_notification': send_notification,
'is_private': is_private,
'style': current_event.category,
'count': 1
}
};
addReservationAsArray(new_event);
current_event.is_temp = false;
}else{
[...]
}
<?php
}else{
?>
$('.combobox').combobox();
$('#facility-list').siblings().find('input.ui-combobox-input').val("");
<?php
}
?>
}); // document.ready() END
</script>
我真的不知道组织这段代码的最佳方式是什么。
感谢您阅读所有这些内容。任何输入将不胜感激