Question

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

＆＃13;

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

＆＃13;

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);
        }
    }

})();

如何访问生活以外的功能

2 个答案: