How do I discover all available properties when using a jQuery UI widget?

问题

I have recently found that there are additional properties for some jQuery UI widgets that work, but are not documented. For example, when providing the buttons property on a jQuery UI 1.11.4 dialog box, I can use sub-properties like id and autofocus, neither of which are listed in the official documentation.

$("#myDialog").dialog({
    title: "Do the thing?"
    buttons:
    [
        {
            text: "Yes",
            id: "dialogBtnYes",
            click: function () {
                $(this).dialog("close")
            }
        },
        {
            text: "No thanks",
            id: "dialogBtnNo",
            autofocus: true,
            click: function () {
                $(this).dialog("close")
            }
        }
    ]
});

I'm left wondering how many other undocumented options are available for me to use. I've tried combing through the JavaScript file, but it's very daunting for a JavaScript novice like myself.

Is combing through the source code what you guys would recommend for figuring out other "hidden" features, or is this not feasible? If it's the way to go, is there any advice you can give me on how to accomplish this sometime before our sun becomes a Red Giant? If not, what other methods might you recommend for learning what else jQuery UI (or any JavaScript framework, for that matter) has to offer?

回答1:

Use a recursive function for enumerating all the methods and properties of the library. For example:

function getUDFs()
    {
    var current;

     /* Use a local variable named current instead of a global variable */

    for(current in arguments[0])
      {
      getUDFs.id = arguments[1]  + " => ";

      /* If the property is not null or undefined */
      if (!!arguments[0][current] || arguments[0][current] === "")
        {
        /* If the constructor is a standard JavaScript type */
        if (/Function|String|Object/.test(String(arguments[0][current].constructor) ) )
          {
          /* Store in an array */
          if (getUDFs.hasOwnProperty("data") )
            {
            getUDFs.data.push(getUDFs.id + current)
            }
          else
            {
            getUDFs.data = []
            }
          }

        if (/Object|Function/.test(String(arguments[0][current].constructor) ) )
         {
         getUDFs(arguments[0][current], getUDFs.id + current)
         }
        }
      }  
     }

getUDFs($.ui,"jQueryUI");
console.log(getUDFs.data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

The id and mousemove properties are added once the jQuery UI object becomes a DOM element. For example:

function getUDFs()
    {
    var current;

    for(current in arguments[0])
      {
      getUDFs.id = arguments[1]  + " => ";

      if (!!arguments[0][current] || arguments[0][current] === "")
        {
        if (/Function|String|Object/.test(String(arguments[0][current].constructor) ) )
          {
          if (getUDFs.hasOwnProperty("data") )
            {
            getUDFs.data.push(getUDFs.id + current)
            }
          else
            {
            getUDFs.data = []
            }
          }

        if (/Object|Function/.test(String(arguments[0][current].constructor) ) )
         {
         getUDFs(arguments[0][current], getUDFs.id + current)
         }
        }
      }  
     }

getUDFs(document.body,"document.body");
console.log(getUDFs.data);

References

• Object.prototype.proto - JavaScript | MDN
• Prototype and prototypal inheritance
• Classes in JavaScript - Explained
• Moving from QSA to Qt Script | Qt 4.8
• objectTree
• Tour de Flex

来源：https://stackoverflow.com/questions/40161920/how-do-i-discover-all-available-properties-when-using-a-jquery-ui-widget