programming4us
programming4us
WEBSITE

Sharepoint 2013 : Introducing JavaScript for SharePoint developers (part 2) - Understanding JavaScript functions, Understanding JavaScript closures, Understanding JavaScript prototypes

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
7/18/2014 4:38:01 AM

Understanding JavaScript functions

When writing functions, you need to understand that the function signature consists of the function name, parameters, and scope. In C# programming against the SharePoint server-side API, the calling code should match the function signature by passing in parameters that are typed appropriately. Furthermore, an error is thrown when the calling code does not match the function signature. In JavaScript, however, no error is thrown when the list of parameters passed to a function does not match the function signature. Instead, all parameters are available within a function through the arguments array. Consider the following JavaScript function:

function Add(){
var sum = 0;
for (var i=0; i<arguments.length; i++) {
sum += arguments[i];
}
return sum;
}

The Add function definition does not include any parameters. Instead, the function looks through the arguments array and simply adds together the values contained within it. Because of this, the following calls to the Add function will all succeed:

var sum1 = Add();
var sum2 = Add(7);
var sum3 = Add(7,11);
var sum4 = Add(7,11,21,36);

Functions in JavaScript are actually objects. As such, they can be assigned to a variable. The variable referencing the function can then be invoked as if it were the name of the function. A function can also be defined without a name, making it an anonymous function. The following code shows an example of an anonymous function assigned to a variable named talk and then invoked:

var talk = function() {
alert("hello there!");
};
talk();

Understanding JavaScript closures

Because anonymous functions can be assigned to a variable, they can also be returned from other functions. Furthermore, the local variables defined within the containing function are available through the returned anonymous function. This concept is called a closure. Consider the following code that returns an anonymous function from a containing named function:

function echo (shoutText) {
var echoText = shoutText + " " + shoutText;
var echoReturn = function() { alert(echoText); };
return echoReturn;
}

Because the return value from the named function is an anonymous function, the code that follows can be used to invoke the returned function. When the returned function is invoked, the browser displays the text “Hello! Hello!”.

echo("Hello!")();

What is interesting in this example is the fact that the anonymous function is using the local variable echoText within its body, and the local variable is available even after the function returns. This is possible because the returned value is essentially a pointer to the anonymous function defined within the named function, which means that the local variables do not go out of scope after the named function completes. This is the essence of a closure in JavaScript.

At first glance, closures might appear to be more of a curiosity than a useful construct. However, closures are essential to the process of creating encapsulated JavaScript that is maintainable. Consider the following code:

function person (name) {
var talk = function() { alert("My name is " + name); };
return {
speak:talk
};
}

In the preceding example, an anonymous function is assigned to the local variable talk. The return value of the function is an object that has a key speak, which references the value talk. By using this type of closure, the function can be invoked by using method syntax, which returns the message “My name is Brian Cox”.

person("Brian Cox").speak();

Notice how the code that invokes the function appears almost as if it is object-oriented. Even though JavaScript is clearly not object-oriented, by using closures, you can create functions that look and feel more familiar to C# developers and significantly improve maintainability.

Understanding JavaScript prototypes

A JavaScript object is really just an unordered collection of key-value pairs. Objects can be created with the key-value pairs defined at the moment they are created. The keys are then used to access the values. The following code shows a simple customer object with a name property defined:

customer = {Name: "Brian Cox"};
alert("My name is " + customer["Name"]);

Every JavaScript object is based on a prototype, which is an object that supports the inheritance of its properties. With prototypes, you can define the structure of an object and then use that structure to create new object instances. Example 1 shows an example of defining a prototype and creating an object from it.

Example 1. Creating an object from prototypes
var human = Object.create(null);

Object.defineProperty(human, "name",
{value: "undefined",
writable: true,
enumerable: true,
configurable: true}
);

var customer = Object.create(human);

Object.defineProperty(customer, "title",
{value: "undefined",
writable: true,
enumerable: true,
configurable: true}
);

customer["name"] = "Brian Cox";
customer["title"] = "Developer";
alert("My name is " + customer["name"]);
alert("My title is " + customer["title"]);

In Example 1, a null human prototype is created and then a single name property is defined. The human prototype is then used to create an instance called customer. The customer prototype is then modified to contain a title property. If you call a property on an object but the property does not exist, JavaScript will look for the property by following the prototype chain up the inheritance tree. In this case, the name property of the customer is defined in the human prototype.

Using prototypes is very efficient when you are creating large numbers of objects because the functions do not need to be created for each instance. This behavior results in development patterns that are presented in the next section.

Other  
  •  Sharepoint 2013 : List and library essentials - Creating and deleting lists
  •  Sharepoint 2013 : List and library essentials - Using your apps
  •  Sharepoint 2013 : Developing Applications Using Office Services - What’s New in Access Services
  •  Sharepoint 2013 : Developing Applications Using Office Services - The New Machine Translation Services
  •  Sharepoint 2013 : Developing Applications Using Office Services - Word Automation Services and the New PowerPoint Automation Services
  •  Sharepoint 2013 : Developing Applications Using Office Services - What’s New in Excel Services
  •  Sharepoint 2013 : Developing Applications Using Office Services - WOPI and the New Office Web Apps Server
  •  Sharepoint 2013 : Building a BCS-enabled Business Solution : Building an Integrated BCS Solution with an App for SharePoint Containing an App for Office
  •  Business Connectivity Services in Apps for SharePoint 2013 : Building an App-level BCS Solution for Office 365 SharePoint Online
  •  Business Connectivity Services in SharePoint 2013 : Adding a Business Data Connectivity Model to Office 365 SharePoint Online
  •  
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us
    programming4us
     
     
    programming4us