SharePointOnline开发篇：AppPart

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

创新互联公司是一家专业提供左贡企业网站建设,专注与成都网站设计、成都做网站、外贸网站建设、H5开发、小程序制作等业务。10年已为左贡众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

Webpart基本上是每个Portal项目中必不可少的，但是对于SharePoint Online中开发webpart并不是很随意，已经不能像On-Permise环境中可以随意开发visual webpart了，我们需要根据具体的功能进行具体的分析。

比如：Visual Studio在App.js中创建一个带有hello-worldish脚本的应用程序。该脚本检索当前用户的显示名，并将其放入默认App页面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());

为了提高效率，首先我们需要分析某个区域的信息显示能否通过SharePoint的OOB的Webpart来实现，而不是需要每个Webpart都要自己开发。如果确实OOB的Webpart无法实现，我们在考虑使用App Part来实现。

对于app part上面中需要的js和css尽量使用cdn的方式引入，因为如果一个app包中包含多个app part并且在同一个页面上添加这些app part，会导致请求过多有些app site中css和js无法加载。使用CDN的方式能减少部分请求，也可以避免部分这样的问题。

为了避免多个App Part使用一个App Site，如果同一页面放了很多这样的app part会导致对这个app site的请求资源过多，带来意想不到的问题，最好每个app part单独开发一个app.
尽量减少请求次数，对于不必须要的请求我们可以通过App part的属性来替代，例如：一个完整功能的app part内部可能需要点击item跳转到view item页面，那么这个URL可以通过属性来配置，而不是通过REST API单独请求一次。

比如SharePoint Host的App Part 借助SharePoint REST API 或者JSOM来获取数据，并且画出我们想要的效果，但是这种方式我们过于依赖于SharePoint站点，也就是我们需要用到的css和js都在SharePoint站点中存在，如果我们把这个Webpart移植到另一个站点中，这个站点也必须部署相应的js和css文件，依赖性比较强。这里我们要求使用SharePoint Host App的app part来代替，因为app part实际上是一个Iframe，我们开发的App part 中使用到的js和css都是独立存在app site中的，这样便于移植。

希望本文总结对大家日后开发有所帮助。