“This is the 25th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Writing in the front

• In the previous article, you implemented jquery’s methods for manipulating the styles of page elements
• It also leaves the question, what does jquery mean by future-based design?
• The method we implemented earlier to style an element takes strings, so what happens when the style value is a number?

Based on the future

• We all know that the CSS specification is maintained by the W3C, so CSS will continue to grow steadily for a long time to come
• Jquery doesn’t have an organization to maintain it over the long term
• So one day, when new properties appear in CSS, how will jquery support them?

cssNumber

• So let’s solve the first question, how do we determine whether to add px to an element whose attribute value is a number
• The solution is to add a configuration object to the $global property named cssNumber
• The following code

$.cssNumber = {
  animationIterationCount: true.columnCount: true.fillOpacity: true.flexGrow: true.flexShrink: true.fontWeight: true.gridArea: true.gridColumn: true.gridColumnEnd: true.gridColumnStart: true.gridRow: true.gridRowEnd: true.gridRowStart: true.lineHeight: true.opacity: true.order: true.orphans: true.widows: true.zIndex: true.zoom: true};Copy the code

• The property name of this object is the CSS property name and the value is Boolean
• If the value corresponding to the property name is true, it indicates that the CSS property value is a number
• So you need to rewrite #setStyle

  #setStyle(ele, attr, value) {
    if (typeof value === "number" && !(attr in $.cssNumber)) {
      value += "px";
    }
      
    ele.style[attr] = value;
  }
Copy the code

• When setting the style, add the unit “px” to the value of the attribute if the number passed in does not exist in the cssNumber.

cssHooks

• CssHooks is the future-based design of the beginning of this article
• As CSS evolves, it is up to the developer to design and implement properties that jquery does not support
• So cssHooks is just an empty object

$.cssHooks = {};
Copy the code

• Here is a scenario where we use cssHooks

    $.cssHooks.wh = {
      get(ele) {
        console.log(ele);
        return getComputedStyle(ele, null) ["width"] + "-" + getComputedStyle(ele, null) ["height"];
      },
      set(ele, styleValue) {
        ele.style["width"] = styleValue;
        ele.style["height"] = styleValue; }}; $(".btn").css("wh"."100px"); // set
    console.log($(".btn").css("wh")); // get
Copy the code

• Here is a hypothetical CSS property, WH. With the cssHooks, developers can fully customize the setting and acquisition behavior of the property
• To be compatible with cssHooks, you need to rewrite #getStyle and #setStyle

  #setStyle(ele, attr, value) {
    if (typeof value === "number" && !(attr in $.cssNumber)) {
      value += "px";
    }

    if (attr in $.cssHooks) {
      $.cssHooks[attr].set(ele, value);
    } else{ ele.style[attr] = value; }} #getStyle(ele, attr) {
    if (attr in $.cssHooks) {
      return $.cssHooks[attr].get(ele);
    }

    // return getComputedStyle(ele, null).getPropertyValue(attr);
    return getComputedStyle(ele, null)[attr];
  }
Copy the code

• If the style name is in cssHooks, the style fetch and set method defined in advance by the developer in cssHooks is used directly

summary

• So far, we have implemented multi-event binding, chain calls, action node rollback, style manipulation, and future-based style manipulation in My-jquery
• In the next article we will summarize all of the previous my-jquery functions and implement an animate function

The last

• That’s all for today’s sharing, and you’re welcome to discuss it in the comments section 👏.
• If you feel that the article is written well, I hope you do not begrudge praise, everyone’s encouragement is the biggest power I share 🥰