javascript - 包含自定义变量的 JS 文件的最佳实践

Question

我有一个 javascript，我想将其放入文件中，然后将其加载到所有具有数据表的页面上。我的问题是我的一些数据表在 JS 文件中有自定义变量。加载此文件然后加载特定于页面的变量的最佳做法是什么？

    $(document).ready(function() {

        $('#datascape').DataTable( {
          responsive: true,
          columnDefs: [
            { responsivePriority: 10001, targets: 1 },
            { responsivePriority: 10001, targets: 7 },
            { responsivePriority: 10001, targets: 8 },
            { responsivePriority: 10001, targets: 9 },
            { responsivePriority: 10001, targets: 11 },
            { responsivePriority: 10001, targets: 12 },
            { responsivePriority: 10001, targets: 13 },
            { responsivePriority: 10001, targets: 14 },
            { responsivePriority: 2, targets: -2 },
            { responsivePriority: 1, targets: 10 }
        ],
          lengthChange: true,
          pageLength: 15,
          language: {
          search: "_INPUT_",
          searchPlaceholder: "Search Records"
              },
          dom: '<"top"i>rt<"bottom"flp><"clear">',
          dom: 'Bfrtip',
          pagingType: "full_numbers",

            buttons: [
                { extend: 'csvHtml5',
                footer: true,
                text:   'Download   <img src="/assets/images/icons/download.svg" class="downimage">',
                filename: function(){
                           var d = new Date();
                           month = '' + (d.getMonth() + 1),
                           day = '' + d.getDate(),
                           year = d.getFullYear();
                           var n = d.getTime();
                           var now = new Date();
                           var months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
                           var formattedDate = now.getFullYear() + months[now.getMonth()] + now.getDate();
                           return formattedDate + 'Site Download'}

               },
            ],

        });
    });

这将是我正在谈论的自定义属性

          columnDefs: [
            { responsivePriority: 10001, targets: 1 },
            { responsivePriority: 10001, targets: 7 },
            { responsivePriority: 10001, targets: 8 },
            { responsivePriority: 10001, targets: 9 },
            { responsivePriority: 10001, targets: 11 },
            { responsivePriority: 10001, targets: 12 },
            { responsivePriority: 10001, targets: 13 },
            { responsivePriority: 10001, targets: 14 },
            { responsivePriority: 2, targets: -2 },
            { responsivePriority: 1, targets: 10 }
        ],

如果这样的事情是可能的？我知道这在我尝试时不会起作用，但就是这样。

<script type="text/javascript" src="/assets/datascapejs/datatable.js">


columnDefs: [
  { responsivePriority: 10001, targets: 1 },
  { responsivePriority: 10001, targets: 7 },
  { responsivePriority: 10001, targets: 8 },
  { responsivePriority: 10001, targets: 9 },
  { responsivePriority: 10001, targets: 11 },
  { responsivePriority: 10001, targets: 12 },
  { responsivePriority: 10001, targets: 13 },
  { responsivePriority: 10001, targets: 14 },
  { responsivePriority: 2, targets: -2 },
  { responsivePriority: 1, targets: 10 }
],

});
});

</script>

这是 datascape.js 文件

$(document).ready(function() {

    $('#datascape').DataTable( {
      responsive: true,

      lengthChange: true,
      pageLength: 15,
      language: {
      search: "_INPUT_",
      searchPlaceholder: "Search Records"
          },
      dom: '<"top"i>rt<"bottom"flp><"clear">',
      dom: 'Bfrtip',
      pagingType: "simple_numbers",

        buttons: [
            { extend: 'csvHtml5',
            footer: true,
            text:   'Download   <img src="/assets/images/icons/download.svg" class="downimage">',
            filename: function(){
                       var d = new Date();
                       month = '' + (d.getMonth() + 1),
                       day = '' + d.getDate(),
                       year = d.getFullYear();
                       var n = d.getTime();
                       var now = new Date();
                       var months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
                       var formattedDate = now.getFullYear() + months[now.getMonth()] + now.getDate();
                       return formattedDate + 'datascape from RQ'}

           },
        ],

现在在我的一些页面上，它会更少或更多。任何帮助表示赞赏。谢谢

标签： javascriptdatatable

Answer 1

您可以在加载外部脚本之前在脚本元素中加载 columnDefs 的变量。

<script type="text/javascript">
const columnDefs = [
  { responsivePriority: 10001, targets: 1 },
  { responsivePriority: 10001, targets: 7 },
  { responsivePriority: 10001, targets: 8 },
  { responsivePriority: 10001, targets: 9 },
  { responsivePriority: 10001, targets: 11 },
  { responsivePriority: 10001, targets: 12 },
  { responsivePriority: 10001, targets: 13 },
  { responsivePriority: 10001, targets: 14 },
  { responsivePriority: 2, targets: -2 },
  { responsivePriority: 1, targets: 10 }
];
</script>
<script type="text/javascript" src="/assets/datascapejs/datatable.js">

数据表.js

    $(document).ready(function() {

        $('#datascape').DataTable( {
          responsive: true,
          columnDefs,
          lengthChange: true,
          pageLength: 15,
          language: {
          search: "_INPUT_",
          searchPlaceholder: "Search Records"
              },
          dom: '<"top"i>rt<"bottom"flp><"clear">',
          dom: 'Bfrtip',
          pagingType: "full_numbers",

            buttons: [
                { extend: 'csvHtml5',
                footer: true,
                text:   'Download   <img src="/assets/images/icons/download.svg" class="downimage">',
                filename: function(){
                           var d = new Date();
                           month = '' + (d.getMonth() + 1),
                           day = '' + d.getDate(),
                           year = d.getFullYear();
                           var n = d.getTime();
                           var now = new Date();
                           var months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
                           var formattedDate = now.getFullYear() + months[now.getMonth()] + now.getDate();
                           return formattedDate + 'Site Download'}

               },
            ],

        });
    });