Question

我有几个相同的html页面，我想使用相同的JavaScript文件来读取文本文件并更改html页面上的数据。由于每个页面的文本文件都不同，我用多个if语句完成了它。如果有办法用一些循环替换它会更好吗？

if (window.location.pathname=='/myapp/main.html') {
  $.get('data/data1.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');
}

if (window.location.pathname=='/myapp/main2.html') {
  $.get('data/data2.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');
}

if (window.location.pathname=='/myapp/main3.html') {
  $.get('data/data3.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');
}

if (window.location.pathname=='/myapp/main4.html') {
  $.get('data/data4.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');
}

提前谢谢！

Answer 1

所以要么使用对象

var paths = {
 "/myapp/main.html" : "data/data1.txt",
 "/myapp/main2.html" : "data/data2.txt",
 "/myapp/main3.html" : "data/data3.txt",
 "/myapp/main4.html" : "data/data4.txt"
};

var filePath = paths[window.location.pathname];
if (filePath) {
  $.get(filePath, ...)
}

或使用reg exp匹配数字，如果路径相同则使用它。

Answer 2

由于您的路径具有相同的结构，因此您只需使用 regex 即可获取该数字。

通过这种方式，您可以随时创建新的页面/数据，它将自动选择它们。

if (window.location.pathname.startsWith('/myapp/main') {  // this "if" might not be needed

  var pathnum = window.location.pathname.replace(/[^0-9]/g,'');

  $.get('data/data' + pathnum + '.txt', function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');

}

如果main.html中的号码不能使用data1.txt，则可以执行此类操作

  $.get('data/data' + (pathnum == '' ? 1 : pathnum) + '.txt', function(data) {

Answer 3

创建了一个简单的可重用函数，它接受路径和数据URL：

const getData = (path, url) => {
  if (window.location.pathname === path ) {
    $.get(url, function(data) {
       var bigarray = data.split('\n');
       bigarray.forEach(function(currRow){
         currentRow = currRow.split(';');
         table.push(currentRow);});
    }, 'text');
  }
}

// Usage
getData('/myapp/main.html', 'data/data1.txt');
getData('/myapp/main2.html', 'data/data2.txt');
getData('/myapp/main3.html', 'data/data3.txt');
getData('/myapp/main4.html', 'data/data4.txt');

Answer 4

您可以使用模板文字。

文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

function changeText() {
    const toString = Object.prototype.toString;
    const { pathname } = window.location;

    // Get the index of the dot
    const dot = pathname.search('.');

    // Grab the character immediately preceding the dot
    const testChar = pathname.charAt(dot-1);

    // If the character is not a number, set the index to 1
    const index = toString.call(testChar) === '[object Number]'
        ? testChar
        : 1;

  // Use the template literal
  $.get(`data/data${index}.txt`, function(data) {
     var bigarray = data.split('\n');
     bigarray.forEach(function(currRow){
       currentRow = currRow.split(';');
       table.push(currentRow);});
  }, 'text');

}

该方法不需要循环或自定义文本。用法很简单：changeText()。

JavaScript替换多个if语句

4 个答案: