Exploitation de la mise en cache et des objets différés

Améliorez les performances avec la mise en cache et les Deferred

Pourquoi la mise en cache des sélecteurs est importante

Enregistrer vos sélections

// Imagine this is in your HTML
// <div id="myDiv">Hello</div>

// Simulate jQuery selecting an element
// In a real browser, this would return a jQuery object
const $myElement = {
  id: "myDiv",
  text: "Hello",
  // Simulate jQuery methods
  css: function(prop, value) {
    console.log(`Setting ${prop} to ${value} on #${this.id}`);
  },
  addClass: function(cls) {
    console.log(`Adding class "${cls}" to #${this.id}`);
  }
};

console.log("--- Without Caching (simulated) ---");
// This would ideally re-query the DOM
$myElement.css("color", "blue"); // Simulates $("#myDiv").css(...)
$myElement.addClass("highlight"); // Simulates $("#myDiv").addClass(...)

console.log("\n--- With Caching ---");
// We already have $myElement, so no re-query
$myElement.css("font-weight", "bold");
$myElement.addClass("active");

Chaînage et efficacité

// Chaining is good for sequential ops
$("#myElement")
  .addClass("active")
  .css("color", "blue")
  .fadeIn();

// Caching is better for repeated, non-sequential ops
const $cachedElement = $("#myElement");
// Later in code...
$cachedElement.trigger("click");
// Even later...
$cachedElement.removeClass("active");

Réutiliser les sélections

// Imagine HTML: <li class="item">1</li> <li class="item">2</li>
// <li class="item">3</li> <button id="toggleBtn">Toggle</button>

// Simulate jQuery context
const $items = [{
  text: "Item 1"
}, {
  text: "Item 2"
}];
const $toggleButton = {
  text: "Toggle Button"
};

console.log("Cached items count:", $items.length);
console.log("Cached button text:", $toggleButton.text);

// Later, you might need them again, without re-querying
// e.g., in an event handler
function handleToggle() {
  // Use $items and $toggleButton directly
  console.log("Toggle button clicked! Working with cached items.");
}

// Call the function
handleToggle();

Gérer les opérations asynchrones

Créer un nouveau Deferred

function doSomethingAsync() {
  const dfd = $.Deferred(); // Create a new Deferred

  setTimeout(function() {
    const success = Math.random() > 0.5; // Simulate success/failure
    if (success) {
      dfd.resolve("Operation successful!"); // Resolve on success
    } else {
      dfd.reject("Operation failed!"); // Reject on failure
    }
  }, 1000); // Simulate 1-second delay

  return dfd.promise(); // Return the Promise part
}

// This code will run when the scene loads
// We'll attach handlers in the next scene
console.log("Deferred created. Waiting for resolution...");

Utiliser .done() et .fail()

function doSomethingAsync() {
  const dfd = $.Deferred();
  setTimeout(function() {
    const success = true; // For this example, let's ensure success
    if (success) {
      dfd.resolve("Data loaded!");
    } else {
      dfd.reject("Network error!");
    }
  }, 500);
  return dfd.promise();
}

const myPromise = doSomethingAsync();

myPromise.done(function(message) {
  console.log("SUCCESS:", message);
});

myPromise.fail(function(errorMessage) {
  console.log("FAILED:", errorMessage);
});

myPromise.always(function() {
  console.log("Operation complete (done or failed).");
});

console.log("Initiating async operation...");

Transformer les résultats avec .then()

function fetchData() {
  const dfd = $.Deferred();
  setTimeout(() => {
    console.log("Data fetched.");
    dfd.resolve({
      id: 1,
      name: "Widget"
    });
  }, 500);
  return dfd.promise();
}

fetchData()
  .then(function(data) {
    console.log("Processing fetched data:", data);
    return data.name.toUpperCase(); // Transform the data
  })
  .then(function(processedName) {
    console.log("Transformed name:", processedName);
    // This second .then() receives the result of the first .then()
  })
  .fail(function(error) {
    console.error("Error:", error);
  });

console.log("Starting data fetch and transformation...");

Quiz sur la mise en cache et les Deferred

Résumé : un jQuery plus rapide et plus intelligent