自定义闭包函数未定义的 JS 浏览器

Question

我有一个非常简单的 html 页面，我将这个脚本放在末尾：

<?php echo $this->Html->script(['studiomain.js']); ?>
</html>

该脚本包含 JS 中的 IIF：

window.studiomain =  window.studiomain || (function ($) {
     let _dataTable = '';
     let _modalTemplates = {};
     let _webroot   = 'studioasq';
     function setDataTable (t, options={}) {
        _dataTable = $(t);
        if (typeof $(t).DataTable == 'function') {
           options.language = {
              "url": "/" + _webroot + "/js/datatable/i18n/Italian.json"
        }
        $(t).DataTable(options);
       }
    }
    function setModal(key='',template='') {
        _modalTemplates[key] = template;
    }
    function renderModal(key,data={}) {
       if (_modalTemplates[key] !== undefined) {
           let copy = _modalTemplates[key];
             Object.keys(data).forEach((key) => {                
               copy.replace(new RegExp("{{" + value + "}}","g"),data[key]);
        })
       }
       return $('#'+key);        
    }
  return {
    setDataTable,
    setModal,
    renderModal
}

})($);

但是当页面完成加载时，我在 window 中没有 studiomain:

window.studiomain => undefined.

我认为问题出在 renderModal 函数上：如果我删除它，一切都很好。我错过了什么？

**** 更新 ****

根据建议，我认为问题出在加载脚本和传递对 JQuery 的引用的顺序上。

我还发现将 (jQuery) 和 NOT ($) 传递给 IIF 是有效的。

Answer 1

我猜你正在尝试实现模块化模式。

在您的代码中，您需要 return 函数内的所有内容，否则每个没有 return 的代码都将处于私有状态。

修复你的代码，你需要 return window.studiomain 作为参数，你的代码可以工作，$ 没有定义因此它没有存储在 window 中对象

window.studiomain = window.studiomain || (function($) {
  let _dataTable = '';
  let _modalTemplates = {};
  let _webroot = 'studioasq';

  function setDataTable(t, options = {}) {
    _dataTable = $(t);
    if (typeof $(t).DataTable == 'function') {
      options.language = {
        "url": "/" + _webroot + "/js/datatable/i18n/Italian.json"
      }
      $(t).DataTable(options);
    }
  }

  function setModal(key = '', template = '') {
    _modalTemplates[key] = template;
  }

  function renderModal(key, data = {}) {
    if (_modalTemplates[key] !== undefined) {
      let copy = _modalTemplates[key];
      Object.keys(data).forEach((key) => {
        copy.replace(new RegExp("{{" + value + "}}", "g"), data[key]);
      })
    }
    return $('#' + key);
  }
  return {
    setDataTable,
    setModal,
    renderModal
  }

})(window.studiomain);

console.log(studiomain);

自定义闭包函数未定义的 JS 浏览器

Custom Closure Function Undefined JS Browser

html

javascript

php

iif