recherche

Maison  >  Article  >  interface Web  >  js compétences de fonction de rappel personnalisé_javascript

js compétences de fonction de rappel personnalisé_javascript

WBOY
WBOYoriginal
2016-05-16 15:25:501384parcourir

Analyse de fond

Regardez d'abord un morceau de code js. Lors de l'ajout, déterminez d'abord s'il existe via une requête asynchrone. S'il n'existe pas, ajoutez-le : 

function add(url,data) {
  var isExited = isExited(data); 
  if(!isExited){
    addRequest(url, data); 
  }
}

Quand j'ajoute une donnée, je juge d'abord si elle existe dans la base de données (bien sûr, si le front-end et le back-end sont complètement séparés, le front-end ne doit pas juger la logique métier, le front-end -end ne doit être utilisé que pour afficher les données), premièrement, la requête de isExited() est une implémentation de requête ajax. Évidemment, l'interface est susceptible d'exécuter la fonction suivante lorsqu'aucun résultat n'est renvoyé (généralement oui) , rendant la valeur de isExited indéfinie, ce n'est évidemment pas ce que vous souhaitez. Si vous souhaitez obtenir des fonctions similaires, vous pouvez utiliser une fonction de rappel.

Le processus est le suivant

L'interface jsp frontale est la suivante : 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS回调函数案例</title>
  <!-- Bootstrap -->
  <link href="<c:url value='/lib/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet">

  <script type="text/javascript">

    /**
     * 删除的请求
     */
    function supplierDelete(element) {
      var id = element.parentNode.parentNode.cells[0].innerHTML;
      modalDeleteRequest('${pageContext.request.contextPath}/oms/supplier/remove/', id);
    }
  </script>
</head>
<body>
<!-- 顶部导航 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">

</div>

<div class="container partner-table-container textFont">
  <table class="table table-striped detailTableSet">
    <caption><h2>JS回调函数案例</h2></caption>
    <br>
    <tr class="table-hover form-horizontal">
      <td class="info">123</td>
      <td class="info">123</td>
      <td class="info">123</td>
      <td class="info">123</td>
      <td class="info">123</td>
    </tr>
      <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>
          <a onclick="supplierUpdate(this)">修改</a> 
          <a onclick="supplierDelete(this)">删除</a>
        </td>
      </tr>
  </table>
</div>

<!--显示成功失败的modal-->
<%@include file="/modal-custom.jsp" %>

<script src="<c:url value='/lib/jquery-1.8.3.min.js'/>"></script>
<script src="<c:url value='/lib/bootstrap/js/bootstrap.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/modal-operate.js'/>"></script>
</body>
</html>

Le code js principal est le suivant : 

<script type="text/javascript">

    /**
     * 删除的请求
     */
    function supplierDelete(element) {
      var id = element.parentNode.parentNode.cells[0].innerHTML;
      modalDeleteRequest('${pageContext.request.contextPath}/oms/supplier/remove/', id);
    }
  </script>

C'est ici que l'on clique sur le bouton pour supprimer, mais je souhaite afficher une boîte de dialogue de confirmation. Si la confirmation est sélectionnée après l'apparition, la méthode de suppression spécifique sera appelée. référencé ici. Frame), principalement utilisé pour afficher les informations des boîtes pop-up, le code est le suivant : 

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 模态框（Modal） -->
<div class="modal fade" id="modal-result" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
            data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          信息
        </h4>
      </div>
      <div class="modal-body" id="modal-add-result-text">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
            data-dismiss="modal">关闭
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>

Ce qui suit est le protagoniste d’aujourd’hui : 

/**
 * 删除请求的操作
 * @param url 删除请求的url
 * @param id 删除的id
 */
function modalDeleteRequest(url, id) {
  confirmIsDelete(url, id, deleteRequest);
}
/**
 * 在删除警告框确认之后调用的回调函数
 * @param url
 * @param id
 */
function deleteRequest(url, id) {
  $.get(url + id, function (result) {
    $("#modal-add-result-text").text(result.msg);
    $("#modal-result").modal('show');
  }, "json");
}


/**
 * 弹出对话框确认是否删除
 * @param url 删除请求的url
 * @param id 删除请求的id
 * @param callback 回调函数，在最后的时候需要进行回调的函数
 */
function confirmIsDelete(url, id, callback) {
  var confirmDeleteDialog = $('<div class="modal fade"><div class="modal-dialog">'
    + '<div class="modal-content"><div class="modal-header"><button type="button" class="close" '
    + 'data-dismiss="modal" aria-hidden="true">&times;</button>'
    + '<h4 class="modal-title">确认删除</h4></div><div class="modal-body">'
    + '<div class="alert alert-warning">确认要删除吗？删除之后无法恢复哦！</div></div><div class="modal-footer">'
    + '<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>'
    + '<button type="button" class="btn btn-success" id="deleteOK">删除</button></div></div>'
    + '</div></div>');

  confirmDeleteDialog.modal({
    keyboard: false
  }).on({
    'hidden.bs.modal': function () {
      $(this).remove();
    }
  });

  var deleteConfirm = confirmDeleteDialog.find('#deleteOK');
  deleteConfirm.on('click', function () {
    confirmDeleteDialog.modal('hide'); //隐藏dialog
    //需要回调的函数
    callback(deleteRequest(url, id));
  });
}

Écrivez la description de l'image ici
Écrivez la description de l'image ici

Comme il y a beaucoup de code ci-dessus, regardons un cadre simple ci-dessous : 

/**
 * 回调函数测试方法
 * 
 * @param callback
 * 回调的方法
 */
function testCallback(callback) {
  alert('come in!');
  callback();
}

/**
 * 被回调的函数
 */
function a() {
  alert('a');
}

/**
 * 开始测试方法
 */
function start() {
  testCallback(a);
}

C'est la fin du rappel. J'espère qu'il sera utile à tout le monde d'apprendre. L'éditeur a également une compréhension plus approfondie des fonctions de rappel personnalisées de js.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Découvrez le plaisir de la programmation fonctionnelle JavaScript_compétences JavascriptArticle suivant：Découvrez le plaisir de la programmation fonctionnelle JavaScript_compétences Javascript

Articles Liés

Voir plus