如何在不同文件中重用功能？

Question

我已经在5个不同的文件中为不同的ID字段使用了此功能。当我用更多的数据填充它时，页面中将会有很多相同的代码。有什么方法可以从另一个文件中调用特定的items数组吗？我是JavaScript和jQuery的新手。

var items = [{
  name: '-Моля,изберете-',
  value: '',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }]
}, {
  name: 'BMW',
  value: 'bmw',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }, {
    name: '320',
    value: '320'
  }, {
    name: '330',
    value: '330'
  }]
}, {
  name: 'Toyota',
  value: 'toyota',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }, {
    name: 'MR2',
    value: 'mr2'
  }, {
    name: 'Capry',
    value: 'capry'
  }]
}];


jQuery(document).ready(function($) {

  var temp = {};
  $.each(items, function() {
    $("<option />")
      .attr("value", this.value)
      .html(this.name)
      .appendTo("#adm_car_make");

    temp[this.value] = this.subitems;
  });

  $("#adm_car_make").change(function() {
    var value = $(this).val(),
      menu = $("#adm_car_model");

    menu.empty();

    $.each(temp[value], function() {
      $("<option />")
        .attr("value", this.value)
        .html(this.name)
        .appendTo(menu);
    });

  }).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="adm_car_make"></select>
<select id="adm_car_model">
  <select>

Answer 1

您实际上可以将几乎所有功能拆分到一个单独的文件中，该文件使用2个参数（makeField和modelField）作为标记页面的功能。

// Start of first file declare the function and the data once.
var myCars = [{
    name: '-Моля,изберете-',
    value: '',
    subitems: [{
        name: '-Моля,изберете-',
        value: ''
    }]
}, {
    name: 'BMW',
    value: 'bmw',
    subitems: [{
        name: '-Моля,изберете-',
        value: ''
    }, {
        name: '320',
        value: '320'
    }, {
        name: '330',
        value: '330'
    }]
}, {
    name: 'Toyota',
    value: 'toyota',
    subitems: [{
        name: 'MR2',
        value: 'mr2'
    }, {
        name: 'Capry',
        value: 'capry'
    }]
}];


jQuery(document).ready(function ($) {
    // Make a reusable function
    window.makeCarsDropdown = function (makeField, modelField) {
        var temp = {};
        $.each(myCars, function () {
            $("<option />")
                .attr("value", this.value)
                .html(this.name)
                .appendTo(makeField);

            temp[this.value] = this.subitems;
        });

        $(makeField).change(function () {
            var value = $(this).val(),
                menu = $(modelField);

            menu.empty();

            $.each(temp[value], function () {
                $("<option />")
                    .attr("value", this.value)
                    .html(this.name)
                    .appendTo(menu);
            });

        }).change();
    }
});
/* End of first file */

然后您可以在包含上述文件之后，在任意位置调用makeCarsDropdown函数，并向其传递两个selectors

// Call the function from anywhere e.g.
jQuery(document).ready(function ($) {
    makeCarsDropdown("#adm_car_make", "#adm_car_model");
});

工作片段：

// Start of first file declare the function and the data once.
var myCars = [{
  name: '-Моля,изберете-',
  value: '',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }]
}, {
  name: 'BMW',
  value: 'bmw',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }, {
    name: '320',
    value: '320'
  }, {
    name: '330',
    value: '330'
  }]
}, {
  name: 'Toyota',
  value: 'toyota',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }, {
    name: 'MR2',
    value: 'mr2'
  }, {
    name: 'Capry',
    value: 'capry'
  }]
}];


jQuery(document).ready(function($) {
  // Make a reusable function
  window.makeCarsDropdown = function(makeField, modelField) {
    var temp = {};
    $.each(myCars, function() {
      $("<option />")
        .attr("value", this.value)
        .html(this.name)
        .appendTo(makeField);

      temp[this.value] = this.subitems;
    });

    $(makeField).change(function() {
      var value = $(this).val(),
        menu = $(modelField);

      menu.empty();

      $.each(temp[value], function() {
        $("<option />")
          .attr("value", this.value)
          .html(this.name)
          .appendTo(menu);
      });

    }).change();
  }
});
/* End of first file */

jQuery(document).ready(function($) {
  makeCarsDropdown("#adm_car_make", "#adm_car_model");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="adm_car_make"></select>
<select id="adm_car_model"></select>