javascript - 如何访问 iife 之外的函数

Question

我收到了 IIFE 的作业。
我阅读了文档，在这里尝试过，但仍然找不到我的问题的答案。
我有2个文件。许多函数将写入 IIFE 内名为 items.js 的文件中，我应该能够在另一个文件(例如 main.js)中访问这些函数。
我尝试实现它，但实际上无法做到。任何意见将不胜感激。
谢谢。实际上我需要的是，我在 IIFE 内的 items.js 中有一个名为 TimeForNewToDoItem(item) 的函数，
我应该能够在另一个 .js 文件中访问它。
我不需要存储该函数的任何返回值。
TimeForNewToDoItem(item) 函数仅执行一些 DOM 操作

// 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 = 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;
			TimeForNewToDoItem(newItem);
		}
	}
	
})();

//items.js
(function(){
		//to add new todo item
	function TimeForNewToDoItem(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
	function template(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;
})();

Answer 1

您可以将IIFE分配给某些变量。还返回一个对象，其中包含对 items.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
            items.Time_Item(newItem);
        }
    }
})();

将 items.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 函数命名约定以获得更好的指导。