JSOM and java script practices

Post on 11-May-2015

1.422 views 1 download

description

JSOM need best practices of JQuery and Javascripts

Transcript of JSOM and java script practices

JSOM Practices in SharePointMelick Baranasooriya

melick-rajee.blogspot.com

SharePoint Development

JSO

M

CS

OM

SS

OM

Need SharePoint Environment

Farm Solutions

Sandbox Solutions

DllsSharePointAdministrator

No NeedSharePoint Environment

Need Environment For Connect

DllsSharePoint Client

SharePoint Client Runtime

No Dll References

Can UseSharePoint Online

JavaScript

JavaScript

Interpreted Language

Prototype based language style of object-oriented programming Support Inheritance

Dynamic Types

Standardize as ECMAScript

General Practices

is this correct ?

x = "SomeName";

function Add() {

x = "Add";

console.log("Add");

}

//Functions

window.Add();

//Global variables,window object

console.log( window.x );

Window Object

Window.add = function () { };Window.x = “SomeName”

Own Namespace

Self-Executing Anonymous Function

(function(mySpace,undefined ) {

}( window.mySpace = window.mySpace || {}));

Check the global space for mySpace and assign a new one if not available

Leave the undefined as undefined.

Properties

(function(mySpace,undefined ) {

//Private

var x = 1;

//Public

mySpace.y = "2";

}( window.mySpace = window.mySpace || {}));

Console.log(mySpace.y)

Console.log(mySpace.x) – Not accessible

Methods

(function(mySpace,undefined ) {

//Public

mySpace.add = function() {

console.log("Add")

};

//Private

function addItem( ) {

console.log("AddItem")

}

}( window.mySpace = window.mySpace || {}));

Classes and Objects

mySpace.Class1 = function () { };

mySpace.Class1.prototype = {

methodOne: function () {

return "methodOne";

},

methodTwo: function (para) {

console.log(para);

}

};

var a = new Class1();

a.methodOne();

JSOMJavaScript Object Model

Use Js files available in Web Server Extensions\15\TEMPLATE\LAYOUTS

JSOM

SharePoint Hosted

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { // Do });

Provider Hosted

<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

Single Reference Pattern

https://srj.codeplex.com/

?Thank You