SharePoint Online 開(kāi)發(fā)篇：App Part

Blog鏈接：https://blog.51cto.com/13969817

Webpart基本上是每個(gè)Portal項(xiàng)目中必不可少的，但是對(duì)于SharePoint Online中開(kāi)發(fā)webpart并不是很隨意，已經(jīng)不能像On-Permise環(huán)境中可以隨意開(kāi)發(fā)visual webpart了，我們需要根據(jù)具體的功能進(jìn)行具體的分析。

比如：Visual Studio在App.js中創(chuàng)建一個(gè)帶有hello-worldish腳本的應(yīng)用程序。該腳本檢索當(dāng)前用戶(hù)的顯示名，并將其放入默認(rèn)App頁(yè)面default .aspx的中。

Sample Code：

'use strict';
?
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
?
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
?getUserName();
});
?
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
?context.load(user);
?context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
?
// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess()
?$('#message').text('Hello ' + user.get_title());
}
?
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
?alert('Failed to get user name. Error:' + args.get_message());

為了提高效率，首先我們需要分析某個(gè)區(qū)域的信息顯示能否通過(guò)SharePoint的OOB的Webpart來(lái)實(shí)現(xiàn)，而不是需要每個(gè)Webpart都要自己開(kāi)發(fā)。如果確實(shí)OOB的Webpart無(wú)法實(shí)現(xiàn)，我們?cè)诳紤]使用App Part來(lái)實(shí)現(xiàn)。

對(duì)于app part上面中需要的js和css盡量使用CDN的方式引入，因?yàn)槿绻粋€(gè)app包中包含多個(gè)app part并且在同一個(gè)頁(yè)面上添加這些app part，會(huì)導(dǎo)致請(qǐng)求過(guò)多有些app site中css和js無(wú)法加載。使用CDN的方式能減少部分請(qǐng)求，也可以避免部分這樣的問(wèn)題。

為了避免多個(gè)App Part使用一個(gè)App Site，如果同一頁(yè)面放了很多這樣的app part會(huì)導(dǎo)致對(duì)這個(gè)app site的請(qǐng)求資源過(guò)多，帶來(lái)意想不到的問(wèn)題，最好每個(gè)app part單獨(dú)開(kāi)發(fā)一個(gè)app.
盡量減少請(qǐng)求次數(shù)，對(duì)于不必須要的請(qǐng)求我們可以通過(guò)App part的屬性來(lái)替代，例如：一個(gè)完整功能的app part內(nèi)部可能需要點(diǎn)擊item跳轉(zhuǎn)到view item頁(yè)面，那么這個(gè)URL可以通過(guò)屬性來(lái)配置，而不是通過(guò)REST API單獨(dú)請(qǐng)求一次。

比如SharePoint Host的App Part 借助SharePoint REST API 或者JSOM來(lái)獲取數(shù)據(jù)，并且畫(huà)出我們想要的效果，但是這種方式我們過(guò)于依賴(lài)于SharePoint站點(diǎn)，也就是我們需要用到的css和js都在SharePoint站點(diǎn)中存在，如果我們把這個(gè)Webpart移植到另一個(gè)站點(diǎn)中，這個(gè)站點(diǎn)也必須部署相應(yīng)的js和css文件，依賴(lài)性比較強(qiáng)。這里我們要求使用SharePoint Host App的app part來(lái)代替，因?yàn)閍pp part實(shí)際上是一個(gè)Iframe，我們開(kāi)發(fā)的App part 中使用到的js和css都是獨(dú)立存在app site中的，這樣便于移植。

希望本文總結(jié)對(duì)大家日后開(kāi)發(fā)有所幫助。