JSOM and java script practices

13
JSOM Practices in SharePoint Melick Baranasooriya melick-rajee.blogspot.com

description

JSOM need best practices of JQuery and Javascripts

Transcript of JSOM and java script practices

Page 1: JSOM and java script practices

JSOM Practices in SharePointMelick Baranasooriya

melick-rajee.blogspot.com

Page 2: JSOM and java script practices

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

Page 3: JSOM and java script practices

JavaScript

Interpreted Language

Prototype based language style of object-oriented programming Support Inheritance

Dynamic Types

Standardize as ECMAScript

Page 4: JSOM and java script practices

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 );

Page 5: JSOM and java script practices

Window Object

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

Page 6: JSOM and java script practices

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.

Page 7: JSOM and java script practices

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

Page 8: JSOM and java script practices

Methods

(function(mySpace,undefined ) {

//Public

mySpace.add = function() {

console.log("Add")

};

//Private

function addItem( ) {

console.log("AddItem")

}

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

Page 9: JSOM and java script practices

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();

Page 10: JSOM and java script practices

JSOMJavaScript Object Model

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

Page 11: JSOM and java script practices

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>

Page 12: JSOM and java script practices

Single Reference Pattern

https://srj.codeplex.com/

Page 13: JSOM and java script practices

?Thank You