JS module Project: Tracalorie

最新推荐文章于 2020-07-06 23:52:51 发布
最新推荐文章于 2020-07-06 23:52:51 发布
阅读量207 收藏
点赞数
分类专栏： JavaScript Project JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BLUEsang/article/details/106988743
版权

UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    
  <title>Track Calorie | Meal & Calorie Tracker</title>
</head>
<body>
  <!-- Nav bar -->
    <nav>
      <div class="nav-wrapper blue">
        <div class="container">
          <a href="#" class="brand-logo center">Tracalorie</a>
          <ul class="right">
            <li><a href="#" class="clear-btn btn blue lighten-3">Clear All</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <br>

    <div class="container">
      <!-- From card -->
      <div class="card">
        <div class="card-content">
          <span class="card-title">Add Meal / Food Item</span>
          <form class="col">
            <div class="row">
              <div class="input-field col s6">
                <input type="text" placeholder="Add Item" id="item-name">
                <label for="item-name">Meal</label>
              </div>
              <div class="input-field col s6">
                <input type="text" placeholder="Add Calories" id="item-calories">
                <label for="item-calories">Calories</label>
              </div>
              <button class="add-btn btn blue darken-3"><i class="fa fa-plus"></i>Add Meal</button>
              <!--
              <button class="update-btn btn orange"><i class="fa fa-pencil-square-o"></i>Update Meal</button>
              <button class="delete-btn btn red"><i class="fa fa-remove"></i>Delete Meal</button>
              -->
              <button class="back-btn btn grey pull-right"><i class="fa fa-chevron-circle-left"></i>Back</button>
            </div>
          </form>
        </div>
      </div>

      <!--Calorie Count-->
      <h3 class="center-align">Total Calories: <span class="total-calories">0</span></h3>

      <!-- Item List -->
      <ul id="item-list" class="collection">
        <!--  
        <li class="collection-item" id="item-0">
          <strong>Steak Dinner: </strong> <em>1200 Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        <li class="collection-item" id="item-0">
          <strong>Cookie: </strong> <em>400 Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        <li class="collection-item" id="item-0">
          <strong>Eggs: </strong> <em>300 Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        -->
      </ul>

    </div>


    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
      <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="app.js"></script>
    
</body>
</html>

Controller & Data structure

//Storage Constroller


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    items :[
      {id:0, name:'Steak', calories:1200},
      {id:1, name:'Cookies', calories:400},
      {id:2, name:'Eggs', calories:300}
    ],
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    logData : function(){
      return data;
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  
  //Public methods
  return {

  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl){   //自动运行
  
  //Public methods
  return {
    init: function(){
      console.log('Initializing app');
    }
  }

})(ItemCtrl,UICtrl);

//Initialize App
App.init();

Get & Populate items

//Storage Constroller


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    items :[
      {id:0, name:'Steak', calories:1200},
      {id:1, name:'Cookies', calories:400},
      {id:2, name:'Eggs', calories:300}
    ],
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl){   //自动运行
  
  //Public methods
  return {
    init: function(){
      //Fetch items from data structure
      const items = ItemCtrl.getItems();
      
      //Populate list with items
      UICtrl.populateItemList(items);
    }
  }

})(ItemCtrl,UICtrl);

//Initialize App
App.init();

Add item to Data structure

//Storage Constroller


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const Item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    items :[
      {id:0, name:'Steak', calories:1200},
      {id:1, name:'Cookies', calories:400},
      {id:2, name:'Eggs', calories:300}
    ],
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    },
    addItem:function(name,calories){
      let ID;
      //Create ID
      if(data.items.length > 0){
        ID = data.items[data.items.length-1].id+1;
      }else{
        ID=0;
      }

      //Calories to number
      calories = parseInt(calories);  //传入为string，变为int

      //Create new item
      newItem = new Item(ID,name,calories);

      //Add to Items Array
      data.items.push(newItem);

      return newItem;
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list',
    addBtn:'.add-btn',
    itemNameInput:'#item-name',
    itemCaloriesInput:'#item-calories'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    },
    getSelectors:function(){
      return UISelectors;
    },
    getItemInput: function(){
      return {
        name:document.querySelector(UISelectors.itemNameInput).value,
        calories:document.querySelector(UISelectors.itemCaloriesInput).value
      }
    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl){   //自动运行
  //Load event listeners
  const loadEventListeners = function(){
    //Get UI Selectors
    const UISelectors = UICtrl.getSelectors();

    //Add item event
    document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
  }

  //Add item submit
  const itemAddSubmit = function(e){
    //Get form inpur from UI Controller
    const input = UICtrl.getItemInput();
    //Chech for name and calorie input
    if(input.name !== ""&&input.calories!==""){
      //Add item
      const mewItem = ItemCtrl.addItem(input.name,input.calories);
    }

    e.preventDefault();
  }


  //Public methods
  return {
    init: function(){
      //Fetch items from data structure
      const items = ItemCtrl.getItems();
      
      //Populate list with items
      UICtrl.populateItemList(items);

      //Load event listeners
      loadEventListeners();
    }
  }

})(ItemCtrl,UICtrl);

//Initialize App
App.init();

Add item to the UI

//Storage Constroller


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const Item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    items :[
      // {id:0, name:'Steak', calories:1200},
      // {id:1, name:'Cookies', calories:400},
      // {id:2, name:'Eggs', calories:300}
    ],
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    },
    addItem:function(name,calories){
      let ID;
      //Create ID
      if(data.items.length > 0){
        ID = data.items[data.items.length-1].id+1;
      }else{
        ID=0;
      }

      //Calories to number
      calories = parseInt(calories);  //传入为string，变为int

      //Create new item
      newItem = new Item(ID,name,calories);

      //Add to Items Array
      data.items.push(newItem);

      return newItem;
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list',
    addBtn:'.add-btn',
    itemNameInput:'#item-name',
    itemCaloriesInput:'#item-calories'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    },
    getSelectors:function(){
      return UISelectors;
    },
    getItemInput: function(){
      return {
        name:document.querySelector(UISelectors.itemNameInput).value,
        calories:document.querySelector(UISelectors.itemCaloriesInput).value
      }
    },
    addListItem:function(item){
      //Show the list
      document.querySelector(UISelectors.itemList).style.display='block';
      //Create li element
      const li = document.createElement('li');
      //Add class
      li.className = 'collection-item';
      //Add ID
      li.id=`item-${item.id}`;
      //Add HTML
      li.innerHTML = `
      <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
      `;
      //Insert item
      document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
    },
    clearInput:function(){
      document.querySelector(UISelectors.itemNameInput).value="";
      document.querySelector(UISelectors.itemCaloriesInput).value="";
    },
    hideList:function(){
      document.querySelector(UISelectors.itemList).style.display='none';
    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl){   //自动运行
  //Load event listeners
  const loadEventListeners = function(){
    //Get UI Selectors
    const UISelectors = UICtrl.getSelectors();

    //Add item event
    document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
  }

  //Add item submit
  const itemAddSubmit = function(e){
    //Get form inpur from UI Controller
    const input = UICtrl.getItemInput();
    //Chech for name and calorie input
    if(input.name !== ""&&input.calories!==""){
      //Add item
      const newItem = ItemCtrl.addItem(input.name,input.calories);
      //Add item to UI list
      UICtrl.addListItem(newItem);

      //Clear fields
      UICtrl.clearInput();
    }

    e.preventDefault();
  }


  //Public methods
  return {
    init: function(){
      //Fetch items from data structure
      const items = ItemCtrl.getItems();

      //Check if any items
      if(items.length===0){
        UICtrl.hideList();
      }else{
        //Populate list with items
        UICtrl.populateItemList(items);
      }
      
      

      //Load event listeners
      loadEventListeners();
    }
  }

})(ItemCtrl,UICtrl);

//Initialize App
App.init();

Add total calories

//Storage Constroller


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const Item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    items :[
      // {id:0, name:'Steak', calories:1200},
      // {id:1, name:'Cookies', calories:400},
      // {id:2, name:'Eggs', calories:300}
    ],
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    },
    addItem:function(name,calories){
      let ID;
      //Create ID
      if(data.items.length > 0){
        ID = data.items[data.items.length-1].id+1;
      }else{
        ID=0;
      }

      //Calories to number
      calories = parseInt(calories);  //传入为string，变为int

      //Create new item
      newItem = new Item(ID,name,calories);

      //Add to Items Array
      data.items.push(newItem);

      return newItem;
    },
    GettotalCalories:function(){
      let total =0;
      //Loop through items and add cals
      data.items.forEach(function(item){
        total+=item.calories;
      });

      //Set total cal in data structure
      data.totalCalories=total;

      return data.totalCalories;
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list',
    addBtn:'.add-btn',
    itemNameInput:'#item-name',
    itemCaloriesInput:'#item-calories',
    totalCalories:'.total-calories'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    },
    getSelectors:function(){
      return UISelectors;
    },
    getItemInput: function(){
      return {
        name:document.querySelector(UISelectors.itemNameInput).value,
        calories:document.querySelector(UISelectors.itemCaloriesInput).value
      }
    },
    addListItem:function(item){
      //Show the list
      document.querySelector(UISelectors.itemList).style.display='block';
      //Create li element
      const li = document.createElement('li');
      //Add class
      li.className = 'collection-item';
      //Add ID
      li.id=`item-${item.id}`;
      //Add HTML
      li.innerHTML = `
      <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
      `;
      //Insert item
      document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
    },
    clearInput:function(){
      document.querySelector(UISelectors.itemNameInput).value="";
      document.querySelector(UISelectors.itemCaloriesInput).value="";
    },
    hideList:function(){
      document.querySelector(UISelectors.itemList).style.display='none';
    },
    showTotalCalories:function(total){
      document.querySelector(UISelectors.totalCalories).textContent=total;
    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl){   //自动运行
  //Load event listeners
  const loadEventListeners = function(){
    //Get UI Selectors
    const UISelectors = UICtrl.getSelectors();

    //Add item event
    document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
  }

  //Add item submit
  const itemAddSubmit = function(e){
    //Get form inpur from UI Controller
    const input = UICtrl.getItemInput();
    //Chech for name and calorie input
    if(input.name !== ""&&input.calories!==""){
      //Add item
      const newItem = ItemCtrl.addItem(input.name,input.calories);
      //Add item to UI list
      UICtrl.addListItem(newItem);

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      //Clear fields
      UICtrl.clearInput();
    }

    e.preventDefault();
  }


  //Public methods
  return {
    init: function(){
      //Fetch items from data structure
      const items = ItemCtrl.getItems();

      //Check if any items
      if(items.length===0){
        UICtrl.hideList();
      }else{
        //Populate list with items
        UICtrl.populateItemList(items);
      }
      
      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      

      //Load event listeners
      loadEventListeners();
    }
  }

})(ItemCtrl,UICtrl);

//Initialize App
App.init();

Edit State

//Storage Constroller


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const Item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    items :[
      // {id:0, name:'Steak', calories:1200},
      // {id:1, name:'Cookies', calories:400},
      // {id:2, name:'Eggs', calories:300}
    ],
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    },
    addItem:function(name,calories){
      let ID;
      //Create ID
      if(data.items.length > 0){
        ID = data.items[data.items.length-1].id+1;
      }else{
        ID=0;
      }

      //Calories to number
      calories = parseInt(calories);  //传入为string，变为int

      //Create new item
      newItem = new Item(ID,name,calories);

      //Add to Items Array
      data.items.push(newItem);

      return newItem;
    },
    GettotalCalories:function(){
      let total =0;
      //Loop through items and add cals
      data.items.forEach(function(item){
        total+=item.calories;
      });

      //Set total cal in data structure
      data.totalCalories=total;

      return data.totalCalories;
    },
    getItemById:function(id){
      let found = null;
      //Loop through items
      data.items.forEach(function(item){
        if(item.id===id){
          found = item;
        }
      });
      return found;
    },
    setCurrentItem:function(item){
      data.currentItem=item;
    },
    getCurrentItem:function(){
      return data.currentItem;
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list',
    addBtn:'.add-btn',
    itemNameInput:'#item-name',
    itemCaloriesInput:'#item-calories',
    totalCalories:'.total-calories',
    updateBtn:'.update-btn',
    deleteBtn:'.delete-btn',
    backBtn:'.back-btn'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    },
    getSelectors:function(){
      return UISelectors;
    },
    getItemInput: function(){
      return {
        name:document.querySelector(UISelectors.itemNameInput).value,
        calories:document.querySelector(UISelectors.itemCaloriesInput).value
      }
    },
    addListItem:function(item){
      //Show the list
      document.querySelector(UISelectors.itemList).style.display='block';
      //Create li element
      const li = document.createElement('li');
      //Add class
      li.className = 'collection-item';
      //Add ID
      li.id=`item-${item.id}`;
      //Add HTML
      li.innerHTML = `
      <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
      `;
      //Insert item
      document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
    },
    clearInput:function(){
      document.querySelector(UISelectors.itemNameInput).value="";
      document.querySelector(UISelectors.itemCaloriesInput).value="";
    },
    hideList:function(){
      document.querySelector(UISelectors.itemList).style.display='none';
    },
    showTotalCalories:function(total){
      document.querySelector(UISelectors.totalCalories).textContent=total;
    },
    clearEditState:function(){
      UICtrl.clearInput();
      document.querySelector(UISelectors.updateBtn).style.display='none';
      document.querySelector(UISelectors.deleteBtn).style.display='none';
      document.querySelector(UISelectors.backBtn).style.display='none';
      document.querySelector(UISelectors.addBtn).style.display='inline';
      document.querySelector(UISelectors.itemList).style.display='none';
    },
    addItemToForm:function(){
      document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
      document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
      UICtrl.showEditState();
    },
    showEditState:function(){
      document.querySelector(UISelectors.updateBtn).style.display='inline';
      document.querySelector(UISelectors.deleteBtn).style.display='inline';
      document.querySelector(UISelectors.backBtn).style.display='inline';
      document.querySelector(UISelectors.addBtn).style.display='none';
      document.querySelector(UISelectors.itemList).style.display='inline';
    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl){   //自动运行
  //Load event listeners
  const loadEventListeners = function(){
    //Get UI Selectors
    const UISelectors = UICtrl.getSelectors();

    //Add item event
    document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);

    //Edit icon click event
    document.querySelector(UISelectors.itemList).addEventListener('click',itemUpdateSubmit);
  }

  //Add item submit
  const itemAddSubmit = function(e){
    //Get form inpur from UI Controller
    const input = UICtrl.getItemInput();
    //Chech for name and calorie input
    if(input.name !== ""&&input.calories!==""){
      //Add item
      const newItem = ItemCtrl.addItem(input.name,input.calories);
      //Add item to UI list
      UICtrl.addListItem(newItem);

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      //Clear fields
      UICtrl.clearInput();
    }

    e.preventDefault();
  }

  //Update Item submit
  const itemUpdateSubmit = function(e){
    if(e.target.classList.contains('edit-item')){  //event delegation
      //Get list item id (item-0,item-1)
      const listId = e.target.parentNode.parentNode.id;
      
      //Break into an array
      const listIdArr = listId.split('-');
      
      //Get the actual id
      const id = parseInt(listIdArr[1]);

      //Get item
      const itemToEdit = ItemCtrl.getItemById(id);
      
      //Set current item
      ItemCtrl.setCurrentItem(itemToEdit);
      
      //Add item to form
      UICtrl.addItemToForm();
    }

    e.preventDefault();
  }

  //Public methods
  return {
    init: function(){
      //Clear edit state /set inital set
      UICtrl.clearEditState();

      //Fetch items from data structure
      const items = ItemCtrl.getItems();

      //Check if any items
      if(items.length===0){
        UICtrl.hideList();
      }else{
        //Populate list with items
        UICtrl.populateItemList(items);
      }

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      

      //Load event listeners
      loadEventListeners();
    }
  }

})(ItemCtrl,UICtrl);

//Initialize App
App.init();

Updating Items & Total Calories

//Storage Constroller


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const Item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    items :[
      // {id:0, name:'Steak', calories:1200},
      // {id:1, name:'Cookies', calories:400},
      // {id:2, name:'Eggs', calories:300}
    ],
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    },
    addItem:function(name,calories){
      let ID;
      //Create ID
      if(data.items.length > 0){
        ID = data.items[data.items.length-1].id+1;
      }else{
        ID=0;
      }

      //Calories to number
      calories = parseInt(calories);  //传入为string，变为int

      //Create new item
      newItem = new Item(ID,name,calories);

      //Add to Items Array
      data.items.push(newItem);

      return newItem;
    },
    GettotalCalories:function(){
      let total =0;
      //Loop through items and add cals
      data.items.forEach(function(item){
        total+=item.calories;
      });

      //Set total cal in data structure
      data.totalCalories=total;

      return data.totalCalories;
    },
    getItemById:function(id){
      let found = null;
      //Loop through items
      data.items.forEach(function(item){
        if(item.id===id){
          found = item;
        }
      });
      return found;
    },
    setCurrentItem:function(item){
      data.currentItem=item;
    },
    getCurrentItem:function(){
      return data.currentItem;
    },
    updateItem:function(name,calories){  //update int the ds
      //Calories to number
      calories=parseInt(calories);

      let found = null;
      data.items.forEach(function(item){
        if(item.id === data.currentItem.id){
          item.name = name;
          item.calories=calories;
          found = item;
        }
      });
      return found;
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list',
    addBtn:'.add-btn',
    itemNameInput:'#item-name',
    itemCaloriesInput:'#item-calories',
    totalCalories:'.total-calories',
    updateBtn:'.update-btn',
    deleteBtn:'.delete-btn',
    backBtn:'.back-btn',
    listItems:'#item-list li'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    },
    getSelectors:function(){
      return UISelectors;
    },
    getItemInput: function(){
      return {
        name:document.querySelector(UISelectors.itemNameInput).value,
        calories:document.querySelector(UISelectors.itemCaloriesInput).value
      }
    },
    addListItem:function(item){
      //Show the list
      document.querySelector(UISelectors.itemList).style.display='block';
      //Create li element
      const li = document.createElement('li');
      //Add class
      li.className = 'collection-item';
      //Add ID
      li.id=`item-${item.id}`;
      //Add HTML
      li.innerHTML = `
      <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
      `;
      //Insert item
      document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
    },
    clearInput:function(){
      document.querySelector(UISelectors.itemNameInput).value="";
      document.querySelector(UISelectors.itemCaloriesInput).value="";
    },
    hideList:function(){
      document.querySelector(UISelectors.itemList).style.display='none';
    },
    showTotalCalories:function(total){
      document.querySelector(UISelectors.totalCalories).textContent=total;
    },
    clearEditState:function(){
      UICtrl.clearInput();
      document.querySelector(UISelectors.updateBtn).style.display='none';
      document.querySelector(UISelectors.deleteBtn).style.display='none';
      document.querySelector(UISelectors.backBtn).style.display='none';
      document.querySelector(UISelectors.addBtn).style.display='inline';
      //document.querySelector(UISelectors.itemList).style.display='none';
    },
    addItemToForm:function(){
      document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
      document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
      UICtrl.showEditState();
    },
    showEditState:function(){
      document.querySelector(UISelectors.updateBtn).style.display='inline';
      document.querySelector(UISelectors.deleteBtn).style.display='inline';
      document.querySelector(UISelectors.backBtn).style.display='inline';
      document.querySelector(UISelectors.addBtn).style.display='none';
      document.querySelector(UISelectors.itemList).style.display='inline';
    },
    updateListItem: function(item){
      let listItems = document.querySelectorAll(UISelectors.listItems);

      //Node list 不能用foreach——转为array
      
      //Turn nodelist into array
      listItems = Array.from(listItems);
      listItems.forEach(function(listItem){
        const ItemID = listItem.getAttribute('id');
        if(ItemID === `item-${item.id}`){  //挑被修改的id改
          document.querySelector(`#${ItemID}`).innerHTML =`
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
          ` ;
        }
      })

    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl){   //自动运行
  //Load event listeners
  const loadEventListeners = function(){
    //Get UI Selectors
    const UISelectors = UICtrl.getSelectors();

    //Add item event
    document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);

    //Disable submit on enter
    document.addEventListener('keypress',function(e){
      if(e.keyCode === 13|| e.which ===13){    //若按下enter
        e.preventDefault();
        return false;
      }
    });

    //Edit icon click event
    document.querySelector(UISelectors.itemList).addEventListener('click',itemEditSubmit);

    //Update item event
    document.querySelector(UISelectors.updateBtn).addEventListener('click',itemUpdateSubmit);
  }

  //Add item submit
  const itemAddSubmit = function(e){
    //Get form inpur from UI Controller
    const input = UICtrl.getItemInput();
    //Chech for name and calorie input
    if(input.name !== ""&&input.calories!==""){
      //Add item
      const newItem = ItemCtrl.addItem(input.name,input.calories);
      //Add item to UI list
      UICtrl.addListItem(newItem);

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      //Clear fields
      UICtrl.clearInput();
    }

    e.preventDefault();
  }

  //Click edit item
  const itemEditSubmit = function(e){
    if(e.target.classList.contains('edit-item')){  //event delegation
      //Get list item id (item-0,item-1)
      const listId = e.target.parentNode.parentNode.id;
      
      //Break into an array
      const listIdArr = listId.split('-');
      
      //Get the actual id
      const id = parseInt(listIdArr[1]);

      //Get item
      const itemToEdit = ItemCtrl.getItemById(id);
      
      //Set current item
      ItemCtrl.setCurrentItem(itemToEdit);
      
      //Add item to form
      UICtrl.addItemToForm();
    }

    e.preventDefault();
  }

  //Update item submit
  const itemUpdateSubmit=function(e){
    //Get item input
    const input = UICtrl.getItemInput();

    //Update item
    const updateItem = ItemCtrl.updateItem(input.name,input.calories);

    //Update UI
    UICtrl.updateListItem(updateItem);

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);
    
    UICtrl.clearEditState();

    e.preventDefault();
  }

  //Public methods
  return {
    init: function(){
      //Clear edit state /set inital set
      UICtrl.clearEditState();

      //Fetch items from data structure
      const items = ItemCtrl.getItems();

      //Check if any items
      if(items.length===0){
        UICtrl.hideList();
      }else{
        //Populate list with items
        UICtrl.populateItemList(items);
      }

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      

      //Load event listeners
      loadEventListeners();
    }
  }

})(ItemCtrl,UICtrl);

//Initialize App
App.init();

Delete & Clear items

//Storage Constroller


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const Item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    items :[
      // {id:0, name:'Steak', calories:1200},
      // {id:1, name:'Cookies', calories:400},
      // {id:2, name:'Eggs', calories:300}
    ],
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    },
    addItem:function(name,calories){
      let ID;
      //Create ID
      if(data.items.length > 0){
        ID = data.items[data.items.length-1].id+1;
      }else{
        ID=0;
      }

      //Calories to number
      calories = parseInt(calories);  //传入为string，变为int

      //Create new item
      newItem = new Item(ID,name,calories);

      //Add to Items Array
      data.items.push(newItem);

      return newItem;
    },
    GettotalCalories:function(){
      let total =0;
      //Loop through items and add cals
      data.items.forEach(function(item){
        total+=item.calories;
      });

      //Set total cal in data structure
      data.totalCalories=total;

      return data.totalCalories;
    },
    getItemById:function(id){
      let found = null;
      //Loop through items
      data.items.forEach(function(item){
        if(item.id===id){
          found = item;
        }
      });
      return found;
    },
    setCurrentItem:function(item){
      data.currentItem=item;
    },
    getCurrentItem:function(){
      return data.currentItem;
    },
    updateItem:function(name,calories){  //update int the ds
      //Calories to number
      calories=parseInt(calories);

      let found = null;
      data.items.forEach(function(item){
        if(item.id === data.currentItem.id){
          item.name = name;
          item.calories=calories;
          found = item;
        }
      });
      return found;
    },
    deletItem:function(id){
      //Get ids
      const ids = data.items.map(function(item){  //map得到ids
        return item.id;
      });

      //Get index
      const index = ids.indexOf(id);

      //Remove item
      data.items.splice(index,1);  //删除下表为index的一个元素

    },
    ClearAllItems:function(){
      data.items=[];
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list',
    addBtn:'.add-btn',
    itemNameInput:'#item-name',
    itemCaloriesInput:'#item-calories',
    totalCalories:'.total-calories',
    updateBtn:'.update-btn',
    deleteBtn:'.delete-btn',
    backBtn:'.back-btn',
    listItems:'#item-list li',
    clearBtn:'.clear-btn'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    },
    getSelectors:function(){
      return UISelectors;
    },
    getItemInput: function(){
      return {
        name:document.querySelector(UISelectors.itemNameInput).value,
        calories:document.querySelector(UISelectors.itemCaloriesInput).value
      }
    },
    addListItem:function(item){
      //Show the list
      document.querySelector(UISelectors.itemList).style.display='block';
      //Create li element
      const li = document.createElement('li');
      //Add class
      li.className = 'collection-item';
      //Add ID
      li.id=`item-${item.id}`;
      //Add HTML
      li.innerHTML = `
      <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
      `;
      //Insert item
      document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
    },
    clearInput:function(){
      document.querySelector(UISelectors.itemNameInput).value="";
      document.querySelector(UISelectors.itemCaloriesInput).value="";
    },
    hideList:function(){
      document.querySelector(UISelectors.itemList).style.display='none';
    },
    showTotalCalories:function(total){
      document.querySelector(UISelectors.totalCalories).textContent=total;
    },
    clearEditState:function(){
      UICtrl.clearInput();
      document.querySelector(UISelectors.updateBtn).style.display='none';
      document.querySelector(UISelectors.deleteBtn).style.display='none';
      document.querySelector(UISelectors.backBtn).style.display='none';
      document.querySelector(UISelectors.addBtn).style.display='inline';
      //document.querySelector(UISelectors.itemList).style.display='none';
    },
    addItemToForm:function(){
      document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
      document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
      UICtrl.showEditState();
    },
    showEditState:function(){
      document.querySelector(UISelectors.updateBtn).style.display='inline';
      document.querySelector(UISelectors.deleteBtn).style.display='inline';
      document.querySelector(UISelectors.backBtn).style.display='inline';
      document.querySelector(UISelectors.addBtn).style.display='none';
      document.querySelector(UISelectors.itemList).style.display='inline';
    },
    updateListItem: function(item){
      let listItems = document.querySelectorAll(UISelectors.listItems);

      //Node list 不能用foreach——转为array
      
      //Turn nodelist into array
      listItems = Array.from(listItems);
      listItems.forEach(function(listItem){
        const ItemID = listItem.getAttribute('id');
        if(ItemID === `item-${item.id}`){  //挑被修改的id改
          document.querySelector(`#${ItemID}`).innerHTML =`
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
          ` ;
        }
      })

    },
    deleteListItem:function(id){
      const itemID=`#item-${id}`;
      const item = document.querySelector(itemID);
      item.remove();  //删除该li
    },
    ClearItems:function(){
      let listItems = document.querySelector(UISelectors.listItems);
      
      //Turn Node list into array
      listItems = Array.from(listItems);  //转为array
      listItems.forEach(function(item){
        item.remove;
      })
    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl){   //自动运行
  //Load event listeners
  const loadEventListeners = function(){
    //Get UI Selectors
    const UISelectors = UICtrl.getSelectors();

    //Add item event
    document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);

    //Disable submit on enter
    document.addEventListener('keypress',function(e){
      if(e.keyCode === 13|| e.which ===13){    //若按下enter
        e.preventDefault();
        return false;
      }
    });

    //Edit icon click event
    document.querySelector(UISelectors.itemList).addEventListener('click',itemEditSubmit);

    //Update item event
    document.querySelector(UISelectors.updateBtn).addEventListener('click',itemUpdateSubmit);

    //Back Button event
    document.querySelector(UISelectors.backBtn).addEventListener('click',function(e){
      UICtrl.clearEditState();
      e.preventDefault();
    });

    //Delete Button event
    document.querySelector(UISelectors.deleteBtn).addEventListener('click',ItemDeleteSubmit);

    //Clear items event
    document.querySelector(UISelectors.clearBtn).addEventListener('click',ClearAllItems);

  }

  //Add item submit
  const itemAddSubmit = function(e){
    //Get form inpur from UI Controller
    const input = UICtrl.getItemInput();
    //Chech for name and calorie input
    if(input.name !== ""&&input.calories!==""){
      //Add item
      const newItem = ItemCtrl.addItem(input.name,input.calories);
      //Add item to UI list
      UICtrl.addListItem(newItem);

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      //Clear fields
      UICtrl.clearInput();
    }

    e.preventDefault();
  }

  //Click edit item
  const itemEditSubmit = function(e){
    if(e.target.classList.contains('edit-item')){  //event delegation
      //Get list item id (item-0,item-1)
      const listId = e.target.parentNode.parentNode.id;
      
      //Break into an array
      const listIdArr = listId.split('-');
      
      //Get the actual id
      const id = parseInt(listIdArr[1]);

      //Get item
      const itemToEdit = ItemCtrl.getItemById(id);
      
      //Set current item
      ItemCtrl.setCurrentItem(itemToEdit);
      
      //Add item to form
      UICtrl.addItemToForm();
    }

    e.preventDefault();
  }

  //Update item submit
  const itemUpdateSubmit=function(e){
    //Get item input
    const input = UICtrl.getItemInput();

    //Update item
    const updateItem = ItemCtrl.updateItem(input.name,input.calories);

    //Update UI
    UICtrl.updateListItem(updateItem);

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);
    //返回添加界面
    UICtrl.clearEditState();

    e.preventDefault();
  }

  //Item Delete Submit
  const ItemDeleteSubmit = function(e){
    //Get current item
    const currentItem = ItemCtrl.getCurrentItem();

    //delete from data structure
    ItemCtrl.deletItem(currentItem.id);

    //delete from UI
    UICtrl.deleteListItem(currentItem.id);

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);
    //返回添加界面
    UICtrl.clearEditState();

    e.preventDefault();
  }

  //Clear items event
  const ClearAllItems = function(){
    //Delete all items from datastructure
    ItemCtrl.ClearAllItems();
    //Delete all items from UI
    UICtrl.ClearItems();

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);
    //返回添加界面
    UICtrl.clearEditState();

    UICtrl.hideList();
  }

  //Public methods
  return {
    init: function(){
      //Clear edit state /set inital set
      UICtrl.clearEditState();

      //Fetch items from data structure
      const items = ItemCtrl.getItems();

      //Check if any items
      if(items.length===0){
        UICtrl.hideList();
      }else{
        //Populate list with items
        UICtrl.populateItemList(items);
      }

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      

      //Load event listeners
      loadEventListeners();
    }
  }

})(ItemCtrl,UICtrl);

//Initialize App
App.init();

Add & Get From Local Storage

//Storage Constroller
const StorageCtrl=(function(){
  return{
    storeItem: function(item){
      let items;
    //拿取时从string变为object
    if(localStorage.getItem('items')=== null){
      items =[];
      //Push new item
      items.push(item);
      //Set ls
      //保存时从object变为string
      localStorage.setItem('items',JSON.stringify(items));
    }else{
      items = JSON.parse(localStorage.getItem('items'));
      //Push new item
      items.push(item);
      //Set ls
      //保存时从object变为string
      localStorage.setItem('items',JSON.stringify(items));
    }
    },
    getItemsFromStorage:function(){
      let items;
      if(localStorage.getItem('items')=== null){
        items=[];
      }else{
        items=JSON.parse(localStorage.getItem('items'));
      }
      return items;
    }
  }
})();


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const Item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    // items :[
    //   // {id:0, name:'Steak', calories:1200},
    //   // {id:1, name:'Cookies', calories:400},
    //   // {id:2, name:'Eggs', calories:300}
    // ],
    items:StorageCtrl.getItemsFromStorage(),
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    },
    addItem:function(name,calories){
      let ID;
      //Create ID
      if(data.items.length > 0){
        ID = data.items[data.items.length-1].id+1;
      }else{
        ID=0;
      }

      //Calories to number
      calories = parseInt(calories);  //传入为string，变为int

      //Create new item
      newItem = new Item(ID,name,calories);

      //Add to Items Array
      data.items.push(newItem);

      return newItem;
    },
    GettotalCalories:function(){
      let total =0;
      //Loop through items and add cals
      data.items.forEach(function(item){
        total+=item.calories;
      });

      //Set total cal in data structure
      data.totalCalories=total;

      return data.totalCalories;
    },
    getItemById:function(id){
      let found = null;
      //Loop through items
      data.items.forEach(function(item){
        if(item.id===id){
          found = item;
        }
      });
      return found;
    },
    setCurrentItem:function(item){
      data.currentItem=item;
    },
    getCurrentItem:function(){
      return data.currentItem;
    },
    updateItem:function(name,calories){  //update int the ds
      //Calories to number
      calories=parseInt(calories);

      let found = null;
      data.items.forEach(function(item){
        if(item.id === data.currentItem.id){
          item.name = name;
          item.calories=calories;
          found = item;
        }
      });
      return found;
    },
    deletItem:function(id){
      //Get ids
      const ids = data.items.map(function(item){  //map得到ids
        return item.id;
      });

      //Get index
      const index = ids.indexOf(id);

      //Remove item
      data.items.splice(index,1);  //删除下表为index的一个元素

    },
    ClearAllItems:function(){
      data.items=[];
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list',
    addBtn:'.add-btn',
    itemNameInput:'#item-name',
    itemCaloriesInput:'#item-calories',
    totalCalories:'.total-calories',
    updateBtn:'.update-btn',
    deleteBtn:'.delete-btn',
    backBtn:'.back-btn',
    listItems:'#item-list li',
    clearBtn:'.clear-btn'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    },
    getSelectors:function(){
      return UISelectors;
    },
    getItemInput: function(){
      return {
        name:document.querySelector(UISelectors.itemNameInput).value,
        calories:document.querySelector(UISelectors.itemCaloriesInput).value
      }
    },
    addListItem:function(item){
      //Show the list
      document.querySelector(UISelectors.itemList).style.display='block';
      //Create li element
      const li = document.createElement('li');
      //Add class
      li.className = 'collection-item';
      //Add ID
      li.id=`item-${item.id}`;
      //Add HTML
      li.innerHTML = `
      <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
      `;
      //Insert item
      document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
    },
    clearInput:function(){
      document.querySelector(UISelectors.itemNameInput).value="";
      document.querySelector(UISelectors.itemCaloriesInput).value="";
    },
    hideList:function(){
      document.querySelector(UISelectors.itemList).style.display='none';
    },
    showTotalCalories:function(total){
      document.querySelector(UISelectors.totalCalories).textContent=total;
    },
    clearEditState:function(){
      UICtrl.clearInput();
      document.querySelector(UISelectors.updateBtn).style.display='none';
      document.querySelector(UISelectors.deleteBtn).style.display='none';
      document.querySelector(UISelectors.backBtn).style.display='none';
      document.querySelector(UISelectors.addBtn).style.display='inline';
      //document.querySelector(UISelectors.itemList).style.display='none';
    },
    addItemToForm:function(){
      document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
      document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
      UICtrl.showEditState();
    },
    showEditState:function(){
      document.querySelector(UISelectors.updateBtn).style.display='inline';
      document.querySelector(UISelectors.deleteBtn).style.display='inline';
      document.querySelector(UISelectors.backBtn).style.display='inline';
      document.querySelector(UISelectors.addBtn).style.display='none';
      document.querySelector(UISelectors.itemList).style.display='inline';
    },
    updateListItem: function(item){
      let listItems = document.querySelectorAll(UISelectors.listItems);

      //Node list 不能用foreach——转为array
      
      //Turn nodelist into array
      listItems = Array.from(listItems);
      listItems.forEach(function(listItem){
        const ItemID = listItem.getAttribute('id');
        if(ItemID === `item-${item.id}`){  //挑被修改的id改
          document.querySelector(`#${ItemID}`).innerHTML =`
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
          ` ;
        }
      })

    },
    deleteListItem:function(id){
      const itemID=`#item-${id}`;
      const item = document.querySelector(itemID);
      item.remove();  //删除该li
    },
    ClearItems:function(){
      let listItems = document.querySelector(UISelectors.listItems);
      
      //Turn Node list into array
      listItems = Array.from(listItems);  //转为array
      listItems.forEach(function(item){
        item.remove;
      })
    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl,StorageCtrl){   //自动运行
  //Load event listeners
  const loadEventListeners = function(){
    //Get UI Selectors
    const UISelectors = UICtrl.getSelectors();

    //Add item event
    document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);

    //Disable submit on enter
    document.addEventListener('keypress',function(e){
      if(e.keyCode === 13|| e.which ===13){    //若按下enter
        e.preventDefault();
        return false;
      }
    });

    //Edit icon click event
    document.querySelector(UISelectors.itemList).addEventListener('click',itemEditSubmit);

    //Update item event
    document.querySelector(UISelectors.updateBtn).addEventListener('click',itemUpdateSubmit);

    //Back Button event
    document.querySelector(UISelectors.backBtn).addEventListener('click',function(e){
      UICtrl.clearEditState();
      e.preventDefault();
    });

    //Delete Button event
    document.querySelector(UISelectors.deleteBtn).addEventListener('click',ItemDeleteSubmit);


    //Clear items event
    document.querySelector(UISelectors.clearBtn).addEventListener('click',ClearAllItems);

  }

  //Add item submit
  const itemAddSubmit = function(e){
    //Get form inpur from UI Controller
    const input = UICtrl.getItemInput();
    //Chech for name and calorie input
    if(input.name !== ""&&input.calories!==""){
      //Add item
      const newItem = ItemCtrl.addItem(input.name,input.calories);
      //Add item to UI list
      UICtrl.addListItem(newItem);

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);

      //Store in local Storage 
      StorageCtrl.storeItem(newItem);   //存入LS

      //Clear fields
      UICtrl.clearInput();
    }

    e.preventDefault();
  }

  //Click edit item
  const itemEditSubmit = function(e){
    if(e.target.classList.contains('edit-item')){  //event delegation
      //Get list item id (item-0,item-1)
      const listId = e.target.parentNode.parentNode.id;
      
      //Break into an array
      const listIdArr = listId.split('-');
      
      //Get the actual id
      const id = parseInt(listIdArr[1]);

      //Get item
      const itemToEdit = ItemCtrl.getItemById(id);
      
      //Set current item
      ItemCtrl.setCurrentItem(itemToEdit);
      
      //Add item to form
      UICtrl.addItemToForm();
    }

    e.preventDefault();
  }

  //Update item submit
  const itemUpdateSubmit=function(e){
    //Get item input
    const input = UICtrl.getItemInput();

    //Update item
    const updateItem = ItemCtrl.updateItem(input.name,input.calories);

    //Update UI
    UICtrl.updateListItem(updateItem);

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);
    //返回添加界面
    UICtrl.clearEditState();

    e.preventDefault();
  }

  //Item Delete Submit
  const ItemDeleteSubmit = function(e){
    //Get current item
    const currentItem = ItemCtrl.getCurrentItem();

    //delete from data structure
    ItemCtrl.deletItem(currentItem.id);

    //delete from UI
    UICtrl.deleteListItem(currentItem.id);

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);
    //返回添加界面
    UICtrl.clearEditState();

    e.preventDefault();
  }

  //Clear items event
  const ClearAllItems = function(){
    //Delete all items from datastructure
    ItemCtrl.ClearAllItems();
    //Delete all items from UI
    UICtrl.ClearItems();

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);
    //返回添加界面
    UICtrl.clearEditState();

    UICtrl.hideList();
  }

  //Public methods
  return {
    init: function(){
      //Clear edit state /set inital set
      UICtrl.clearEditState();

      //Fetch items from data structure
      const items = ItemCtrl.getItems();

      //Check if any items
      if(items.length===0){
        UICtrl.hideList();
      }else{
        //Populate list with items
        UICtrl.populateItemList(items);
      }

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      

      //Load event listeners
      loadEventListeners();
    }
  }

})(ItemCtrl,UICtrl,StorageCtrl);

//Initialize App
App.init();

Delete & Clear from Local storage

//Storage Constroller
const StorageCtrl=(function(){
  return{
    storeItem: function(item){
      let items;
    //拿取时从string变为object
    if(localStorage.getItem('items')=== null){
      items =[];
      //Push new item
      items.push(item);
      //Set ls
      //保存时从object变为string
      localStorage.setItem('items',JSON.stringify(items));
    }else{
      items = JSON.parse(localStorage.getItem('items'));
      //Push new item
      items.push(item);
      //Set ls
      //保存时从object变为string
      localStorage.setItem('items',JSON.stringify(items));
    }
    },
    getItemsFromStorage:function(){
      let items;
      if(localStorage.getItem('items')=== null){
        items=[];
      }else{
        items=JSON.parse(localStorage.getItem('items'));
      }
      return items;
    },
    updateItemStorage:function(updateItem){
      let items=JSON.parse(localStorage.getItem('items'));
      items.forEach(function(item,index){
        if(item.id===updateItem.id){
          items.splice(index,1,updateItem); //array中的删除——传入下标和个数
          //第三个参数为replace
        }
      });
      localStorage.setItem('items',JSON.stringify(items));
    },
    deleteItemFromStorage:function(id){
      let items=JSON.parse(localStorage.getItem('items'));
      items.forEach(function(item,index){
        if(item.id===id){
          items.splice(index,1); //array中的删除——传入下标和个数
        }
      });
      localStorage.setItem('items',JSON.stringify(items));
    },
    clearItemsFromStorage:function(){
      localStorage.removeItem('items');
    }

  }
})();


//Item Controller
const ItemCtrl = (function(){   //自动运行
  //Item Constructor
  const Item = function(id,name,calories){
    this.id = id;
    this.name= name;
    this.calories = calories;
  } 
  //Data Structures /State
  const data={
    // items :[
    //   // {id:0, name:'Steak', calories:1200},
    //   // {id:1, name:'Cookies', calories:400},
    //   // {id:2, name:'Eggs', calories:300}
    // ],
    items:StorageCtrl.getItemsFromStorage(),
    currentItem:null,
    totalCalories:0
  }
  //Public methods
  return {
    getItems: function(){
      return data.items;
    },
    logData : function(){
      return data;
    },
    addItem:function(name,calories){
      let ID;
      //Create ID
      if(data.items.length > 0){
        ID = data.items[data.items.length-1].id+1;
      }else{
        ID=0;
      }

      //Calories to number
      calories = parseInt(calories);  //传入为string，变为int

      //Create new item
      newItem = new Item(ID,name,calories);

      //Add to Items Array
      data.items.push(newItem);

      return newItem;
    },
    GettotalCalories:function(){
      let total =0;
      //Loop through items and add cals
      data.items.forEach(function(item){
        total+=item.calories;
      });

      //Set total cal in data structure
      data.totalCalories=total;

      return data.totalCalories;
    },
    getItemById:function(id){
      let found = null;
      //Loop through items
      data.items.forEach(function(item){
        if(item.id===id){
          found = item;
        }
      });
      return found;
    },
    setCurrentItem:function(item){
      data.currentItem=item;
    },
    getCurrentItem:function(){
      return data.currentItem;
    },
    updateItem:function(name,calories){  //update int the ds
      //Calories to number
      calories=parseInt(calories);

      let found = null;
      data.items.forEach(function(item){
        if(item.id === data.currentItem.id){
          item.name = name;
          item.calories=calories;
          found = item;
        }
      });
      return found;
    },
    deletItem:function(id){
      //Get ids
      const ids = data.items.map(function(item){  //map得到ids
        return item.id;
      });

      //Get index
      const index = ids.indexOf(id);

      //Remove item
      data.items.splice(index,1);  //删除下表为index的一个元素

    },
    ClearAllItems:function(){
      data.items=[];
    }
  }
})();

//UI Controller
const UICtrl = (function(){   //自动运行
  const UISelectors={
    itemList:'#item-list',
    addBtn:'.add-btn',
    itemNameInput:'#item-name',
    itemCaloriesInput:'#item-calories',
    totalCalories:'.total-calories',
    updateBtn:'.update-btn',
    deleteBtn:'.delete-btn',
    backBtn:'.back-btn',
    listItems:'#item-list li',
    clearBtn:'.clear-btn'
  }
  
  //Public methods
  return {
    populateItemList:function(items){
      let html = ``;
      items.forEach(function(item){
        html += `
        <li class="collection-item" id="item-${item.id}">
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
        </li>
        `;
      });
      //Insert list items
      document.querySelector(UISelectors.itemList).innerHTML=html;
    },
    getSelectors:function(){
      return UISelectors;
    },
    getItemInput: function(){
      return {
        name:document.querySelector(UISelectors.itemNameInput).value,
        calories:document.querySelector(UISelectors.itemCaloriesInput).value
      }
    },
    addListItem:function(item){
      //Show the list
      document.querySelector(UISelectors.itemList).style.display='block';
      //Create li element
      const li = document.createElement('li');
      //Add class
      li.className = 'collection-item';
      //Add ID
      li.id=`item-${item.id}`;
      //Add HTML
      li.innerHTML = `
      <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
      `;
      //Insert item
      document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
    },
    clearInput:function(){
      document.querySelector(UISelectors.itemNameInput).value="";
      document.querySelector(UISelectors.itemCaloriesInput).value="";
    },
    hideList:function(){
      document.querySelector(UISelectors.itemList).style.display='none';
    },
    showTotalCalories:function(total){
      document.querySelector(UISelectors.totalCalories).textContent=total;
    },
    clearEditState:function(){
      UICtrl.clearInput();
      document.querySelector(UISelectors.updateBtn).style.display='none';
      document.querySelector(UISelectors.deleteBtn).style.display='none';
      document.querySelector(UISelectors.backBtn).style.display='none';
      document.querySelector(UISelectors.addBtn).style.display='inline';
      //document.querySelector(UISelectors.itemList).style.display='none';
    },
    addItemToForm:function(){
      document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
      document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
      UICtrl.showEditState();
    },
    showEditState:function(){
      document.querySelector(UISelectors.updateBtn).style.display='inline';
      document.querySelector(UISelectors.deleteBtn).style.display='inline';
      document.querySelector(UISelectors.backBtn).style.display='inline';
      document.querySelector(UISelectors.addBtn).style.display='none';
      document.querySelector(UISelectors.itemList).style.display='inline';
    },
    updateListItem: function(item){
      let listItems = document.querySelectorAll(UISelectors.listItems);

      //Node list 不能用foreach——转为array
      
      //Turn nodelist into array
      listItems = Array.from(listItems);
      listItems.forEach(function(listItem){
        const ItemID = listItem.getAttribute('id');
        if(ItemID === `item-${item.id}`){  //挑被修改的id改
          document.querySelector(`#${ItemID}`).innerHTML =`
          <strong>${item.name}: </strong> <em>${item.calories} Calories</em>
          <a href="#" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i>
          </a>
          ` ;
        }
      })

    },
    deleteListItem:function(id){
      const itemID=`#item-${id}`;
      const item = document.querySelector(itemID);
      item.remove();  //删除该li
    },
    ClearItems:function(){
      let listItems = document.querySelector(UISelectors.listItems);
      
      //Turn Node list into array
      listItems = Array.from(listItems);  //转为array
      listItems.forEach(function(item){
        item.remove;
      })
    }
  }

})();

//App Controller
const App = (function(ItemCtrl,UICtrl,StorageCtrl){   //自动运行
  //Load event listeners
  const loadEventListeners = function(){
    //Get UI Selectors
    const UISelectors = UICtrl.getSelectors();

    //Add item event
    document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);

    //Disable submit on enter
    document.addEventListener('keypress',function(e){
      if(e.keyCode === 13|| e.which ===13){    //若按下enter
        e.preventDefault();
        return false;
      }
    });

    //Edit icon click event
    document.querySelector(UISelectors.itemList).addEventListener('click',itemEditSubmit);

    //Update item event
    document.querySelector(UISelectors.updateBtn).addEventListener('click',itemUpdateSubmit);

    //Back Button event
    document.querySelector(UISelectors.backBtn).addEventListener('click',function(e){
      UICtrl.clearEditState();
      e.preventDefault();
    });

    //Delete Button event
    document.querySelector(UISelectors.deleteBtn).addEventListener('click',ItemDeleteSubmit);


    //Clear items event
    document.querySelector(UISelectors.clearBtn).addEventListener('click',ClearAllItems);

  }

  //Add item submit
  const itemAddSubmit = function(e){
    //Get form inpur from UI Controller
    const input = UICtrl.getItemInput();
    //Chech for name and calorie input
    if(input.name !== ""&&input.calories!==""){
      //Add item
      const newItem = ItemCtrl.addItem(input.name,input.calories);
      //Add item to UI list
      UICtrl.addListItem(newItem);

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);

      //Store in local Storage 
      StorageCtrl.storeItem(newItem);   //存入LS

      //Clear fields
      UICtrl.clearInput();
    }

    e.preventDefault();
  }

  //Click edit item
  const itemEditSubmit = function(e){
    if(e.target.classList.contains('edit-item')){  //event delegation
      //Get list item id (item-0,item-1)
      const listId = e.target.parentNode.parentNode.id;
      
      //Break into an array
      const listIdArr = listId.split('-');
      
      //Get the actual id
      const id = parseInt(listIdArr[1]);

      //Get item
      const itemToEdit = ItemCtrl.getItemById(id);
      
      //Set current item
      ItemCtrl.setCurrentItem(itemToEdit);
      
      //Add item to form
      UICtrl.addItemToForm();
    }

    e.preventDefault();
  }

  //Update item submit
  const itemUpdateSubmit=function(e){
    //Get item input
    const input = UICtrl.getItemInput();

    //Update item
    const updateItem = ItemCtrl.updateItem(input.name,input.calories);

    //Update UI
    UICtrl.updateListItem(updateItem);

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);


    //Update local storage
    StorageCtrl.updateItemStorage(updateItem);

    //返回添加界面
    UICtrl.clearEditState();

    e.preventDefault();
  }

  //Item Delete Submit
  const ItemDeleteSubmit = function(e){
    //Get current item
    const currentItem = ItemCtrl.getCurrentItem();

    //delete from data structure
    ItemCtrl.deletItem(currentItem.id);

    //delete from UI
    UICtrl.deleteListItem(currentItem.id);

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);

    //Delete from local storage
    StorageCtrl.deleteItemFromStorage(currentItem.id);


    //返回添加界面
    UICtrl.clearEditState();

    e.preventDefault();
  }

  //Clear items event
  const ClearAllItems = function(){
    //Delete all items from datastructure
    ItemCtrl.ClearAllItems();
    //Delete all items from UI
    UICtrl.ClearItems();

    //Get total calories
    const totalCalories = ItemCtrl.GettotalCalories();
    //Add total calories to UI
    UICtrl.showTotalCalories(totalCalories);

    //Clear from local storage
    StorageCtrl.clearItemsFromStorage();

    
    //返回添加界面
    UICtrl.clearEditState();

    UICtrl.hideList();
  }

  //Public methods
  return {
    init: function(){
      //Clear edit state /set inital set
      UICtrl.clearEditState();

      //Fetch items from data structure
      const items = ItemCtrl.getItems();

      //Check if any items
      if(items.length===0){
        UICtrl.hideList();
      }else{
        //Populate list with items
        UICtrl.populateItemList(items);
      }

      //Get total calories
      const totalCalories = ItemCtrl.GettotalCalories();
      //Add total calories to UI
      UICtrl.showTotalCalories(totalCalories);
      

      //Load event listeners
      loadEventListeners();
    }
  }

})(ItemCtrl,UICtrl,StorageCtrl);

//Initialize App
App.init();
豌豆射手GCC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Module3Project:Module3 课程项目
06-17
模块 3 项目 模块 3 课程项目的 ##README 文件 ###模块 3 课程项目的提交包括以下内容： M3Prjdata.txt - 整洁干净的数据集。 run_analysis.R - R 脚本，用于处理和转换在 [link] ( ) 中找到的原始数据集以输出第 ...
EAS BOS 常用的需覆盖的方法和作用
语不惊人死不休
04-03 2857
onload(),  onshow(),  loadFields(), loadFields         将业务数据装载到控件。数据绑定代码在super.loadFields中。 storeFields      从控件中获得最新的业务数据。数据绑定代码在super.storeFields中。 getSelectors   指定查询单据对象时需要的属性列表。 verifyInp
dep加的字段在UI界面的处理
only小昊
12-22 1558
dep加的字段在UI界面的处理方式:绑定,显示…
Scrapy框架—Selectors（关键）
xiabenshu的博客
03-31 213
选择器Scrapy选择器使用selcector构造一个selectors开始使用 当你爬取一个网页的时候，最普遍的任务你得去做就是从HTML资源中提取数据，有几个库可以让你获取这些，就像： beatifulsoup：一个HTML解析库 lxml ：一个XML解析库 Scrapy选择器 Scrapy它有自己的机制对于提取数据，我们叫它选择器，因为它选择了HTML文档中特定的部分要么通过CSS要么...
Appium源码分析（六）-find(上)
saii的专栏
08-25 1403
说明： 原本打算按照项目的目录，将源码都分析一遍，但是其中遇到部分有些不太理解的，还有部分是依赖于另外一些代码的。所以这次特地先抽出相当重要的一块代码 find进行解释。后续的click,setText等等都是依赖于find才能够进行的，所以先抽出find来进行讲解 正文： 首先我们先来看看find的源代码 private AndroidCommandResult execut
multi-module-project:maven多模块项目框架
05-14
项目结构multi-module-project是我们的项目名称，其中包含多个模块：mmp-dal模块：数据访问层，提供对原始数据（主要指数据库）的操作mmp-integration模块：提供对第三方服务的调用mmp-commons模块：提供工具类、...
BC-6-JS-PROJECT:音乐播放器
04-29
【BC-6-JS-PROJECT:音乐播放器】是一个基于JavaScript技术实现的项目，它旨在创建一个功能完备的在线音乐播放器。JavaScript是Web开发中不可或缺的一部分，尤其在客户端交互和动态网页应用方面发挥着重要作用。这个...
module-project:Maven管理多模块项目的基本学习
05-10
一个基于Maven的SpringBoot多模块项目搭建 支持Https协议 支持Http自动转Https协议 加入模块，自动打印请求信息
react-js-project:react+webpack项目
05-27
react-ts-project react+ts+webpack搭建项目 配置 prettier 1.安装 yarn add --dev --exact prettier ...2.echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
JS module
BLUEsang的博客
06-28 929
module 设置1：object export const person={ name:'John', age:30 } 设置2：函数 export function sayHello(){ return `Hello ${person.name}`; } 设置3：export default 避免{}； const greeting = 'Hello World'; export default greeting; //export default 不用用P{} 引入module
Axios：React & Javascript
BLUEsang的博客
07-06 653
Axios——用于进行http request https://github.com/axios/axios#typescript 安装Axios npm install axios --save Axios+Promise import axios from 'axios'; componentDidMount(){ //get为异步——即无法使用变量保存（因为执行该语句后变量中还未保存数据） axios.get('https://jsonplaceholder.typ
JS Re 表示 name+zip+email+phone
BLUEsang的博客
06-26 472
re表示name const re= /^[a-zA-Z]{2,10}$/; re表示zip const re= /^[0-9]{5}(-[0-9]{4})?$/; re表示email const re= /^([a-zA-Z0-9_\?\.]+)@([a-zA-Z0-9_\?\.]+)\.([a-zA-Z]{2,5})$/; re表示phone const re= /^\(?\d{3}\)?[-. ]?\d{3}[-. ]?\d{4}$/; app.js //Form Blur Event
DOM Project1 TaskList: 页面的添加，删除，筛选（保存在loaclstorage）
BLUEsang的博客
06-21 372
HTML准备 https://code.jquery.com/ https://materializecss.com/getting-started.html https://www.bootstrapcdn.com/fontawesome/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
JS Project: GitHub finder
BLUEsang的博客
06-25 296
UI <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css"> <title>GITHUB FINDER
JS Project：iterator
BLUEsang的博客
06-26 259
iter遍历的data const data = [ { name:'Jone Doe', age:32, gender:'male', lookingfor:'female', location:'Boston MA', image:'https://randomuser.me/api/portraits/men/82.jpg' }, { name:'Jone Doe2', age:32, gender:'male',
JS Ajax&JSON
BLUEsang的博客
06-24 249
load json文件 Load single customer document.getElementById('button1').addEventListener('click',loadCustomer); function loadCustomer(e){ const xhr = new XMLHttpRequest(); xhr.open('GET','customer.json',true); xhr.onload=function(){ console.log(thi
JS: primitive type &reference type 浅拷贝&深拷贝
BLUEsang的博客
06-29 234
primitive type （1）string （2）number （3）boolean 其拷贝都为深拷贝； reference type （1）object （2）array 其拷贝都为浅拷贝； 浅拷贝 //reference type //object arrays const person ={ //person是一个指向object的指针 name:'Max' }; 此时person为指向object的储存位置的地址； const secondPerson =person; /
JS Factory
BLUEsang的博客
06-27 221
Factory Factory类似Construct函数； 是用于构建一个类对象的函数； 返回一个object；C function MemberFactory(){ this.createMember = function(name,type){ let member; if(type === 'simple'){ member = new SimpleMembership(name); }else if(type ==='standard'){ me
JS Project:WeatherJS
BLUEsang的博客
06-25 219
UI <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css"> <title>Weather JS&lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值