Bercakap tentang kemahiran panggilan balik tersuai JavaScript functions

Bercakap tentang kemahiran panggilan balik tersuai JavaScript functions_javascript

WBOY

Lepaskan： 2016-05-16 15:36:11

asal

1015 orang telah melayarinya

Tiada lagi perkara karut, izinkan saya siarkan kod untuk anda.

Analisis Latar Belakang

Pertama-tama lihat sekeping kod js apabila menambah, mula-mula tentukan sama ada ia wujud melalui permintaan tak segerak, tambahkannya:

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

Salin selepas log masuk

Apabila saya menambah sekeping data, saya mula-mula menilai sama ada ia wujud dalam pangkalan data (sudah tentu, jika bahagian hadapan dan bahagian belakang dipisahkan sepenuhnya, bahagian hadapan tidak seharusnya menilai logik perniagaan, bahagian hadapan -end hanya boleh digunakan untuk memaparkan data), pertama , permintaan isExited() ialah pelaksanaan permintaan ajax Ini jelas sekali, antara muka mungkin melaksanakan fungsi berikut apabila tiada hasil dikembalikan (biasanya ya). , menjadikan nilai isExited undefined , ini jelas bukan yang anda mahukan. Jika anda ingin mencapai fungsi yang serupa, anda boleh menggunakan fungsi panggil balik.

Prosesnya adalah seperti berikut

Antara muka jsp bahagian hadapan adalah seperti berikut:

<%@ 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>

Salin selepas log masuk

Kod js utama adalah seperti berikut:

<script type="text/javascript">

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

Salin selepas log masuk

Berikut ialah apabila butang diklik untuk memadam, tetapi saya ingin memunculkan kotak dialog pengesahan Jika pengesahan dipilih selepas muncul, kaedah pemadaman tertentu akan dipanggil juga. dirujuk di sini.), terutamanya digunakan untuk memaparkan maklumat kotak pop timbul, kodnya adalah seperti berikut:

<%@ 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>

Salin selepas log masuk

Berikut ialah protagonis hari ini:

/**
 * 删除请求的操作
 * @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));
 });
}

Salin selepas log masuk

Memandangkan terdapat banyak kod di atas, mari lihat rangka kerja mudah di bawah:

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

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

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

Salin selepas log masuk

Kandungan di atas ialah fungsi panggil balik js yang editor perkenalkan kepada anda melalui analisis kod saya harap anda menyukainya.