如何访问iife外的功能

Question

我在IIFE上得到了一份任务。
我阅读文档，在这里尝试过，但仍然无法找到我的问题的答案。
我有2个文件。很多函数都会写入一个名为items.js的文件中，并且我应该可以在另一个文件中访问这些函数，比如说main.js。
我试过实现它，但实际上无法做到。任何输入将不胜感激。
谢谢。 其实我所需要的是，我有一个名为TimeForNewToDoItem（项目）在一个IIFE内的items.js中的函数，
我应该能够在另一个.js文件中访问它。
我不需要存储该函数的任何返回值。
TimeForNewToDoItem（项目）函数只是做了一些DOM操作

// main.js 
 
(function(){ 
 
\t var toDoElements = {}; 
 
\t var ulContainer = document.querySelector("#itemContainerId"); 
 
\t var div = document.createElement("div"); 
 
\t var listArray = []; 
 
\t 
 
\t document.addEventListener("DOMContentLoaded", function(event) { 
 
\t \t console.log("DOM loaded"); 
 
\t \t //adding existing elements 
 
\t \t var preloadedItems = ["Eat","sleep"]; 
 
\t \t preloadedItems.map(function(item) 
 
\t \t \t { 
 
\t \t \t \t listArray = TimeForNewToDoItem(item); 
 
\t \t \t \t div.appendChild(listArray); 
 
\t \t \t }); \t 
 
\t \t /*var newInputItem = document.getElementById("newToDoItem"); 
 
\t \t var ulElement = document.getElementById("itemContainerId"); 
 
\t \t var clrscr = document.getElementById("clearScreen"); 
 
\t \t ulElement.addEventListener("click",AssignListeners); 
 
\t \t clrscr.addEventListener("click",clearScreen); 
 
\t \t newInputItem.addEventListener("keydown",check);*/ 
 
\t }); 
 

 

 
\t //checks for enter key 
 
\t function check(event){ 
 
\t \t console.log("Keydown event listened"); 
 
\t \t if(event.keyCode === 13){ 
 
\t \t \t console.log("Enter key pressed, going to add new items"); 
 
\t \t \t var newItem = document.getElementById("newToDoItem").value; 
 
\t \t \t TimeForNewToDoItem(newItem); 
 
\t \t } 
 
\t } 
 
\t 
 
})(); 
 

 
//items.js 
 
(function(){ 
 
\t \t //to add new todo item 
 
\t function TimeForNewToDoItem(newItem){ 
 
\t \t var newInputItem = document.getElementById("newToDoItem"); 
 
\t \t newInputItem.value = null; 
 
\t \t var childCount = ulContainer.childNodes.length; 
 
\t \t console.log("totally "+childCount+" child nodes are currently present inside parent ul element"); 
 
\t \t var checkBoxid = "checkBox"+childCount; 
 
\t \t var stat = "unchecked"; 
 
\t \t var divContent = template(newItem,childCount); 
 
\t \t console.log("new TODO item added"); 
 
\t \t var insertedItems = {id : checkBoxid, name : newItem, state : stat}; 
 
\t \t storeElements(insertedItems); 
 
\t \t return divContent; 
 
\t } 
 
\t 
 
\t \t //returns the array of elements to be added to the DOM 
 
\t function template(newItem,childCount){ 
 
\t \t var checkBoxid = "checkBox"+childCount; 
 
\t \t var newItemToBeAdded = []; 
 
\t \t var count = 0; 
 
\t \t newItemToBeAdded[count++] = "<li class = 'customHorizontalRule'>"; 
 
\t \t newItemToBeAdded[count++] = "<input type = 'checkbox' id = '"+checkBoxid+"' class = 'checkBox'/>"; 
 
\t \t newItemToBeAdded[count++] = "<span>"+newItem+"</span>"; 
 
\t \t newItemToBeAdded[count++] = "<a href = '#' class = 'moveRightSide' id = 'deletebutton"+childCount+"' >Delete</a>"; 
 
\t \t newItemToBeAdded = newItemToBeAdded.join(""); 
 
\t \t return newItemToBeAdded; 
 
})();

Answer 1

您可以分配IIFE一些变量。还返回一个包含对item.js中的函数的引用的对象

// main.js 
// Assinged to a variable 
var main = (function(){ 
    // rest of code 
    function check(event){ 
     console.log("Keydown event listened"); 
     if(event.keyCode === 13){ 
      // rest of code 
      // Use by calling the variable name followed by the inner function 
      item.Time_Item(newItem); 
     } 
    } 
})(); 

将item.js中的IIFE分配给变量。此IIFE返回对象

//items.js 
var items = (function() { 
    //to add new todo item 
    function TimeForNewToDoItem(newItem) { 
     // rest of code 
     return divContent; 
    } 

    //returns the array of elements to be added to the DOM 
    function template(newItem, childCount) { 
     // Rest of code 
     return newItemToBeAdded; 
    } 
    return { 
     Time_Item:TimeForNewToDoItem, 
     template_item:template 
    } 
})(); 

还要注意名称为大写的函数表示构造函数。你可以检查js的功能命名约定，以获得更好的指导

Answer 2

我试图修改你的文件有一些东西丢失。 但是，你所要求的可以通过创建一个变量或从iife推送到窗口的对象来完成，然后它将在其他iffe中访问。

//item.js 
(function(){ 
    //to add new todo item 
    window.MyNamespace = { 
    TimeForNewToDoItem: function(newItem) { 
     var newInputItem = document.getElementById("newToDoItem"); 
     newInputItem.value = null; 
     var childCount = ulContainer.childNodes.length; 
     console.log("totally "+childCount+" child nodes are currently present inside parent ul element"); 
     var checkBoxid = "checkBox"+childCount; 
     var stat = "unchecked"; 
     var divContent = template(newItem,childCount); 
     console.log("new TODO item added"); 
     var insertedItems = {id : checkBoxid, name : newItem, state : stat}; 
     storeElements(insertedItems); 
     return divContent; 
    }, 

    //returns the array of elements to be added to the DOM 
    template: function(newItem,childCount){ 
     var checkBoxid = "checkBox"+childCount; 
     var newItemToBeAdded = []; 
     var count = 0; 
     newItemToBeAdded[count++] = "<li class = 'customHorizontalRule'>"; 
     newItemToBeAdded[count++] = "<input type = 'checkbox' id = '"+checkBoxid+"' class = 'checkBox'/>"; 
     newItemToBeAdded[count++] = "<span>"+newItem+"</span>"; 
     newItemToBeAdded[count++] = "<a href = '#' class = 'moveRightSide' id = 'deletebutton"+childCount+"' >Delete</a>"; 
     newItemToBeAdded = newItemToBeAdded.join(""); 
     return newItemToBeAdded; 
    } 
    }; 
})(); 

// main.js 
(function(){ 
    var toDoElements = {}; 
    var ulContainer = document.querySelector("#itemContainerId"); 
    var div = document.createElement("div"); 
    var listArray = []; 

    document.addEventListener("DOMContentLoaded", function(event) { 
     console.log("DOM loaded"); 
     //adding existing elements 
     var preloadedItems = ["Eat","sleep"]; 
     preloadedItems.map(function(item) 
      { 
       listArray = MyNamespace.TimeForNewToDoItem(item); 
       div.appendChild(listArray); 
      }); 
     var newInputItem = document.getElementById("newToDoItem"); 
     var ulElement = document.getElementById("itemContainerId"); 
     var clrscr = document.getElementById("clearScreen"); 
     ulElement.addEventListener("click",AssignListeners); 
     clrscr.addEventListener("click",clearScreen); 
     newInputItem.addEventListener("keydown",check); 
    }); 


    //checks for enter key 
    function check(event){ 
     console.log("Keydown event listened"); 
     if(event.keyCode === 13){ 
      console.log("Enter key pressed, going to add new items"); 
      var newItem = document.getElementById("newToDoItem").value; 
      MyNamespace.TimeForNewToDoItem(newItem); 
     } 
    } 

})();