代码组织PHP / JavaScript的提示

时间:2014-04-25 13:27:11

标签: javascript php refactoring code-organization code-design

我一直在研究代码组织技术,特别是针对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模块。因此,它自己的AjaxInterface或其他模块的AjaxInterfaces有很多AjaxCalls。

这些AjaxCalls是通过回显到页面的PHP函数结束生成的。

然后我有特定的逻辑来调用Ajax JavaScript函数以及响应数据的所有处理并将其注入到当前模块的JavaScript中的dom中。

很多时候调用AjaxFunctions的JavaScript代码是通过PHP生成的,因为它依赖于来自PHP环境的信息。像会话信息或用户特定的信息或数据库相关的东西。

所以我目前正在编写一个PHP函数,它将带有AjaxCall的JavaScript函数输出到PHP函数。这个JavaScript函数由另一个JavaScript函数调用,或者在JavaScript事件中调用,它可能依赖于当前的PHP环境,这就是为什么它是用PHP编写的。

我希望有人能解决我的问题。因此,我经常会使用大量内联JavaScript,因为所有模块都在html中的内容div中呈现。 另外我应该如何处理$(document).ready()调用?

为了举例说明如何使用此设置,请参阅以下代码行:

在我们的预订系统内

facility_container.php:

<?php
...

include_once('facility_dropdown.php');
include_once('facility_calendar.php');
include_once('facility_javascript.php');

?>

facility_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>

我真的没有一个好的概念,即组织此代码的最佳方式是什么。

感谢您阅读所有这些内容。 任何输入都将不胜感激

1 个答案:

答案 0 :(得分:0)

你只有大约100行代码,它已经开始变得凌乱。

我建议你使用一个框架。

对于PHP,我使用过的框架之一是CakePHP,我从未对此感到失望。 它有一个巨大的社区,一个很棒的文档,甚至是一个博客教程,可以帮助你入门。

他们的文件夹结构解释为here

对于JS来说,我遇到的最聪明的框架是AngularJS

Angular并不强制您使用文件夹结构,但如果您为控制器,视图,服务,指令创建不同的文件夹会更容易。