1

ユーザーがデータを作成/読み取り/更新/削除 (CRUD) できるスクリプトのパフォーマンスを向上させたいと考えています。

現在、すべてのアクションの後にリクエストを送信し、概要ページを更新しています。例：

<a href="script.php?action=save">Add</a>
<table>
    <tr>
        <td>Item 1</td>
        <td>
            <a href="script.php?action=save&id=123">Edit</a>
            <a href="script.php?action=delete&id=123">Delete</a>
        </td>
<table>

-

<?php
// script.php -> action=delete
$error = true;
if ($this->database->query("DELETE FROM items WHERE id = :id", array("id" => $_GET["id"]))) {
    $error = false; 
}    

// forward back
header("Location: script.php?error=" . $error);
?>

気に入らないので変えたいです。

これについてあなたはどう思いますか：

  • AJAX 経由のアイテム (JSON) の読み込み

  • アイテム配列のみを変更します

  • 更新されたアイテムと削除されたアイテムを収集する

  • onUnload/windowClose の更新と削除

  • 結果: サーバー要求の減少

擬似コード:

<script>
var items = null; // items
var items_deleted = null; // items, marked to delete
var items_updated = null; // items, marked to be updated

// builds the html table 
function build_html_table() {
    // sort the items
    items = sortTheItems(items);

    html  = "<table>";
    for (i = 0; i < items.length; i++):
        html += '<tr id="'+items[i].id+'">';
        html +=     '<td>'+items[i].name+'</td>';
        html +=     '<td>';
        html +=         '<a href="script.php?action=save&id='+items[i].id+'" class="edit">Edit</a>';
        html +=         '<a href="script.php?action=save&id='+items[i].id+'" class="delete">Delete</a>';
        html +=     '</td>';
        html += "</tr>";
    endfor;
    html += "</table>";

    $("#table").html(html);
}

// on clicking the delete-link
$(".delete").click(function() {
    // get id
    id = $(this).parent().parent().attr("id"); // id of <tr>

    // delete item (temp)
    for (i = 0; i < items.length; i++) 
        if (items[i].id == id) 
            unset(items[i]);
    endfor;

    // mark for deleting
    items_deleted.push(id);

    // re-build table
    build_html_table();
});

// on clicking the edit-link
$(".edit").click(function() {
    // get id
    id = $(this).parent().parent().attr("id");

    // get the item to edit
    item = null;
    for (i = 0; i < items.length; i++):
        if (items[i].id == id)
            item = items[i];
    endfor;

    // fill the save-form
    $("#save_dialog [name='id']").val(item.id);
    $("#save_dialog [name='name']").val(item.name);
    $("#save_dialog [name='content']").val(item.content);

    // open save-form in a dialog
    $("#save_dialog").dialog();
});

// on clicking the add link
$(".add").click(function() {
    // reset the save-form
    $("#save_dialog [name='id']").val("");
    $("#save_dialog [name='name']").val("");
    $("#save_dialog [name='content']").val("");

    // open save-form in a dialog
    $("#save_dialog").dialog();
});

// save form
$("#save_form").onSubmit(function() {
    id = $(this).find("[name='id']");
    if (!id) {
        // real add, getting the new id
        $(this).ajaxForm({
            onSuccess: function(responseText, $form) {
                item.id      = responseText; // script.php?action=save returns the last inserted/updated ID
                item.name    = $form.find("[name='name']");
                item.content = $form.find("[name='content']");

                // add the added item
                items.push(item);
        });            
    } else {
        // temp. update

        // update the old entry
        for (i = 0; i < items.length; i++):
            if (items[i].id == item.id) {
                items[i].name = $(this).find("[name='name']").val();
                items[i].content = $(this).find("[name='content']").val();

                // mark this item to update
                items_updated[items[i].id] = items[i];
            }
        endfor; 
    }

    // re-build table
    build_html_table();        
});

// doc ready
$(function() {
    // get the items data (json)
    items = getJSON("items_json.php");

    // build table
    build_html_table();
});

// on window close/unload (or after $x minutes)
$.unload(function() {
    // real delete 
    ajaxRequest("script.php?action=delete&ids=", items_deleted);

    // real update
    ajaxRequest("script.php?action=update", items_updated);
});
</script>

<a href="script.php?action=add" class="add">Add</a>
<div id="table">loading...</div>

<div id="save_dialog" class="hidden">
    <form action="script.php?action=save" method="POST" id="save_form">
        <input type="hidden" name="id"/>
        Name: <input type="text" name="name"/><br/>
        Content: <textarea name="content"></textarea><br/>
        <input type="submit"/>
    </form>
</div>

私の考えについてどう思いますか？どうすればよいでしょうか？この作業を簡単に行うための優れた jQuery プラグインはありますか?

前もって感謝します！

注: これは単なる疑似コードです。

4

1 に答える 1

1

大きなヘルパーは、data-属性を使用して、他の属性を解析して のようなものを取得したりID、actionurl にハードコードしたもの (ページに JS がない場合はそのままにしておく) を保存しますが、ハンドラーでアクセスするのにも役立ちます。

 /* "data-arbitraryName" can be read using jQuery `data()` method*/
 html += '<tr id="'+items[i].id+'" data-id="'+items[i].id+'">';

/* add common class to "controls"*/
'<a href="script.php?action=save&id='+items[i].id+'" class="edit crud_btn" data-action="save">Edit</a>';


/* can now combine a lot in one click handler*/
$('#tableParent').on('click', '.crud_btn', function(e){

      var $btn=$(this), $row=$btn.closest('tr'), row_id= $row.data('id');
       /* data() method reads "data-" attributes*/
      var thisAction=$(this).data('action')
     /* create data object to send*/
     var dataToServer={/* this data always sent*/
          action: thisAction,
          id: row_id || 'add';
     }
      /* additional data as needed based on "action"*/
      if( thisAction == 'add'){
          $.extend( dataToServer, someFormData);
     }

     /* use direct file url, if GET, jQUery will append search string from dataToServer object*/
     $.getJSON('script.php', dataToServer, function(response){
          if( response.success ){  
              /* psuedo update method*/
               updatStoredData( response, action);
               /* success handling based on "action"*/
               if(thisAction=='delete'){
                   $row.remove();

               }
          }
    })
   return false;
})
于 2013-01-02T02:39:06.777 に答える