javascript - 如何将内容包含到ajax成功代码中？

Question

在我的项目中，ajax的成功函数内容较多。我将把这些内容放入一个名为 textcsc.js 的文件中。并且在ajax中调用include()方法。

成功运行的独立代码之前:

$(document).ready(function()
 { 
  $('#bbs td').dblclick(function (){
  .......
    $.ajax({
    dataType:'json',
    ........
    success:function(data)
    {
    var $myHtml=data.stPrc;
    $myHtml.find("label").filter(function(){return $(this).text()===stChr;}).parent().attr("class", "rightd");
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().attr('class','rightd');
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().children("div").eq(0).attr('class','speech right'); 
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stFinStr+')').parent().next().attr('class','rightd');
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stFinStr+')').parent().next().children("div").eq(0).attr('class','speech right');
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stHngStr+')').parent().next().children("div").eq(0).attr('class','speech right');
    ......
    }
   });
 });
 });

将所有 $myHtml.find 内容移至 textcsc.js 后

$(document).ready(function()
 { 
  $('#bbs td').dblclick(function (){
  .......
   $.ajax({
   dataType:'json',
   .......
   success:function(data)
   {
    var $myHtml=data.stPrc;
    include(textcsc.js);
    ......
   }
   });
  });
 });

它工作失败，我已经尝试过:

<script src="textcsc.js"></script>
 $(document).ready(function()
 { 
  $('#bbs td').dblclick(function (){
  .......
  $.ajax({
  dataType:'json',
  ........
  success:function(data)
  {
   var $myHtml=data.stPrc;
   chgLftRig($myHtml);//chgLftRig() is in textcsc.js
   ........
    }
   });
  });
  });

它再次失败。然后我尝试了另一种方法:

$(document).ready(function()
{ 
 $('#bbs td').dblclick(function (){
 .......
  $.ajax({
  dataType:'json',
  ........
 success:function(data)
 {
  var $myHtml=data.stPrc;
   chgLftRig($myHtml);
   ......
  }
 });
 function chgLftRig($myHtml)//in the $('#bbs td').dblclick(
 {
$myHtml.find("label").filter(function(){return $(this).text()===stChr;}).parent().attr("class", "rightd");
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().attr('class','rightd');
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().children("div").eq(0).attr('class','speech right'); 
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stFinStr+')').parent().next().attr('class','rightd');
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stFinStr+')').parent().next().children("div").eq(0).attr('class','speech right');
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stHngStr+')').parent().next().children("div").eq(0).attr('class','speech right');
 }
});
});

工作正常，我把 chgLftRig() 从 $('#bbs td').dblclick() 中取出，又失败了。

不知道为什么$myHtml出不了$('#bbs td').dbclick()。

Answer 1

正如 A.iglesias 所说，并非所有现代浏览器都在其 native 解释器中使用 include 语法，如果您想以这种方式破坏 js 代码，我强烈建议您使用 ES6 语法和 NPM 处理程序

在ES5中，make函数，并在js文件中划分，在html语法中调用它们，在当前js之前(因此函数在使用之前声明)

<script src="jquery.js" ></script>
<script src="textcsc.js" ></script>
<script src="youajaxcall.js"></script>

在你的textscs.js中:

function renderDataFromAjaxCall($myhtml){
    $myHtml.find("label").filter(function(){return $(this).text()===stChr;}).parent().attr("class", "rightd");
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().attr('class','rightd');
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().children("div").eq(0).attr('class','speech right'); 
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stFinStr+')').parent().next().attr('class','rightd');
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stFinStr+')').parent().next().children("div").eq(0).attr('class','speech right');
    $myHtml.find('label:contains('+stChr+')').next('label:contains('+stHngStr+')').parent().next().children("div").eq(0).attr('class','speech right');
}

在你的ajax调用中:

$.ajax({
  dataType:'json',
  .......
  success:function(data)
  {
   var $myHtml=data.stPrc;
   renderDataFromAjaxCall($myhtml)
   ......
  }
});

您可以查看babeljs.io并开始进行新的js开发使用。如果你想保持旧的方式，我建议你使用 JS 设计模式，如模块化，Design Patterns js