Preparing Your Code For Use With a JavaScript Library Interface

Create wrapper code, if necessary, to make your JavaScript functions compatible with the JavaScript Library Interface (JSLI).

Before you begin, create a web application and acquire a JavaScript library or find a global, built-in browser function you want to use.

  1. Determine if you need to create wrapper code.
    When calling JavaScript functions in your web application, you may need to create wrapper code to make your JavaScript code compatible with the JSLI. The following table contains common examples of when to create wrapper code and descriptions of the wrapper code to create.
    Situation Solution

    You need to call functions that use or return unsupported data types. JSLIs currently support the following data types:

    • booleans
    • strings
    • numerics
      • 8-bit signed integer
      • 16-bit signed integer
      • 32-bit signed integer
      • 8-bit unsigned integer
      • 16-bit unsigned integer
      • 32-bit unsigned integer
      • Single-precision, floating-point numeric
      • Double-precision, floating-point numeric
    • JavaScript references
    • 1D array of numerics (represented as a TypedArray)
    • 1D array of JavaScript references (represented as Array of JavaScript values)

    Create wrapper functions that convert between unsupported JavaScript types and types supported by the JSLI.

    You need to use the new operator to create an instance of an object or you need to invoke a method on an instance of an object.

    Complete the following steps:
    1. Create a wrapper function that invokes the new operator and stores a reference to the new object instance.
    2. Create a wrapper function that looks up the reference to that object and invokes a method.
  2. Create wrapper code for your JavaScript library. NI recommends you create one JavaScript file per JSLI document that contains all the wrapper functions you create.

    Model the following code as a best practice for creating wrapper code. Customize the following code for your unique programming goals. 

     /*1*/
(function () {
   'use strict'; /*2*/

    var counter = 1; /*3*/

    /*4*/
    var logWithCount = function (message){
      console.log(counter + ' > ' + message); /*5*/
      return counter++; /*6*/
    };

    window.logWithCount = logWithCount; /*7*/ 
}());
    1378 Wrap the contents of the entire wrapper JavaScript file in an immediately invoked function expression (IIFE). The IIFE creates a new lexical scope which prevents you from unintentionally adding objects to the global scope.
    1378 Configure the IIFE to use JavaScript strict mode. Strict mode improves error handling and allows browsers to make certain optimizations.
    1378 Create a private variable by declaring it within the IIFE. In this example, the private variable is named counter. Because this variable is private, it cannot be unintentionally modified by other code. This variable is not accessible to the JSLI because you did not add it to the global scope.

    1378

    		 Create a new function and add the desired parameters to the function. In this example, we create a function named logWithCount that passes a parameter to a built-in browser function named console.log.
    1378 Call the function you are wrapping, in this example, the console.log function.
    1378 Return a value from your wrapper function. If you configure the return parameter in the JSLI document to be of a type other than void, you must pass a return value of the type you configured in the JSLI document to the return statement.
    1378 Add the function you want to call in your web application to the global scope to allow the JSLI document to access the function. In this example, we use the logWithCount function. In a web browser, the name of the global object is window, so the code window.logWithCount = logWithCount; places logWithCount on the global scope.