SharePoint için gezinti seçenekleri

Bu makalede, SharePoint'te SharePoint Yayımlama'nın etkinleştirildiği gezinti seçenekleri siteleri açıklanmaktadır. Gezintinin seçimi ve yapılandırması, SharePoint'teki sitelerin performansını ve ölçeklenebilirliğini önemli ölçüde etkiler. SharePoint Yayımlama sitesi şablonu yalnızca merkezi bir portal için gerekiyorsa kullanılmalıdır ve yayımlama özelliği yalnızca belirli sitelerde etkinleştirilmelidir ve yalnızca gerektiğinde yanlış kullanıldığında performansı etkileyebilir.

Gezinti seçeneklerine genel bakış

Gezinti sağlayıcısı yapılandırması tüm sitenin performansını önemli ölçüde etkileyebilir ve SharePoint sitesinin gereksinimleri için etkili bir şekilde ölçeklendirilen bir gezinti sağlayıcısı ve yapılandırma seçmek için dikkatli olunması gerekir. kullanıma uygun iki gezinti sağlayıcısının yanı sıra özel gezinti uygulamaları da vardır.

Siteniz için yapısal gezinti önbelleğini açarsanız, ilk seçenek olan Yapısal gezinti, klasik SharePoint siteleri için SharePoint'te önerilen gezinti seçeneğidir. Bu gezinti sağlayıcısı, geçerli sitenin altındaki gezinti öğelerini ve isteğe bağlı olarak geçerli siteyi ve eşdüzey öğelerini görüntüler. Güvenlik kırpması ve site yapısı numaralandırması gibi ek özellikler sağlar. Önbelleğe alma devre dışı bırakılırsa bu durum performansı ve ölçeklenebilirliği olumsuz etkiler ve azaltmaya maruz kalabilir.

İkinci seçenek olan Yönetilen (Meta Veri) gezintisi, Yönetilen Meta Veri terim kümesi kullanan gezinti öğelerini temsil eder. Gerekmedikçe güvenlik kırpmanın devre dışı bırakılması önerilir. Güvenlik kırpması, bu gezinti sağlayıcısı için varsayılan olarak güvenli bir ayar olarak etkinleştirilir; ancak, gezinti öğeleri genellikle sitenin tüm kullanıcıları için tutarlı olduğundan, birçok site güvenlik kırpma ek yükü gerektirmez. Güvenlik kırpmayı devre dışı bırakmak için önerilen yapılandırmayla, bu gezinti sağlayıcısı site yapısını listelemeyi gerektirmez ve kabul edilebilir performans etkisiyle yüksek oranda ölçeklenebilir.

Kullanıma sunulan gezinti sağlayıcılarına ek olarak, birçok müşteri alternatif özel gezinti uygulamalarını başarıyla uyguladı. Bu makaledeki Arama tabanlı istemci tarafı betiği oluşturma bölümüne bakın.

SharePoint gezinti seçeneklerinin avantajları ve dezavantajları

Aşağıdaki tabloda her seçeneğin artıları ve eksileri özetlemektedir.

Yapısal gezinti	Yönetilen gezinti	Arama temelli gezinti	Özel gezinti sağlayıcısı
Profesyonel: Bakımı kolay Güvenlik kırpıldı İçerik değiştirildiğinde 24 saat içinde otomatik olarak güncelleştirilir	Profesyonel: Bakımı kolay	Profesyonel: Güvenlik kırpıldı Siteler eklendikçe otomatik olarak güncelleştirilir Hızlı yükleme süresi ve yerel olarak önbelleğe alınmış gezinti yapısı	Profesyonel: Daha geniş seçenek seçenekleri Önbelleğe alma doğru kullanıldığında hızlı yükleme Hızlı yanıt veren sayfa tasarımıyla birçok seçenek iyi çalışır
Eksi -lerini: Önbelleğe alma devre dışı bırakılırsa performansı etkiler Azaltmaya tabi	Eksi -lerini: Site yapısını yansıtacak şekilde otomatik olarak güncelleştirilmez Güvenlik kırpma etkinse veya gezinti yapısı karmaşıksa performansı etkiler	Eksi -lerini: Siteleri kolayca sipariş etme olanağı yok Ana sayfanın özelleştirilmesini gerektirir (teknik beceriler gereklidir)	Eksi -lerini: Özel geliştirme gereklidir Dış veri kaynağı /depolanan önbellek gereklidir; örneğin, Azure

Siteniz için en uygun seçenek, site gereksinimlerinize ve teknik yeteneğinize bağlıdır. İçerik değiştirildiğinde otomatik olarak güncelleştirilen, yapılandırması kolay bir gezinti sağlayıcısı istiyorsanız, önbelleğe alma etkin yapısal gezinti iyi bir seçenektir.

SharePoint'te gezinti performansını analiz etme

SharePoint için Sayfa Tanılama aracı, Hem SharePoint modern portalını hem de klasik yayımlama sitesi sayfalarını analiz eden Microsoft Edge ve Chrome tarayıcıları için bir tarayıcı uzantısıdır. Bu araç yalnızca SharePoint için çalışır ve SharePoint sistem sayfasında kullanılamaz.

Araç, analiz edilen her sayfa için sayfanın önceden tanımlanmış bir kural kümesine göre nasıl performans gösterdiğini gösteren bir rapor oluşturur ve test sonuçları temel değerin dışında olduğunda ayrıntılı bilgiler görüntüler. SharePoint yöneticileri ve tasarımcıları, yayımlamadan önce yeni sayfaların iyileştirildiğinden emin olmak için performans sorunlarını gidermek için aracı kullanabilir.

ÖZELLIKLE SPRequestDuration , SharePoint'in sayfayı işlemesi için geçen süredir. Ağır gezinti (gezintideki sayfalar dahil), karmaşık site hiyerarşileri ve diğer yapılandırma ve topoloji seçeneklerinin tümü daha uzun sürelere önemli ölçüde katkıda bulunabilir.

SharePoint'te yapısal gezintiyi kullanma

Bu, varsayılan olarak kullanılan kullanıma hazır gezintidir ve en basit çözümdür. Herhangi bir özelleştirme gerektirmez ve teknik olmayan bir kullanıcı da kolayca öğe ekleyebilir, öğeleri gizleyebilir ve ayarlar sayfasından gezintiyi yönetebilir. Önbelleğe almayı etkinleştirmenizi öneririz, aksi takdirde pahalı bir performans dengelemesi olur.

Yapısal gezinti önbelleğini uygulama

Site Ayarları>Genel Görünüm>Gezintisi'nin altında, genel gezinti veya geçerli gezinti için yapısal gezintinin seçili olup olmadığını doğrulayabilirsiniz. Sayfaları göster'in seçilmesi performansı olumsuz etkiler.

Önbelleğe alma, site koleksiyonu düzeyinde ve site düzeyinde etkinleştirilebilir veya devre dışı bırakılabilir ve her ikisi için de varsayılan olarak etkinleştirilir. Site koleksiyonu düzeyinde etkinleştirmek için , Site Ayarları>Site Koleksiyonu Yönetimi>Site Koleksiyonu Gezintisi'nin altında Önbelleğe almayı etkinleştir kutusunu işaretleyin.

Site düzeyinde etkinleştirmek için , Site Ayarları>Gezintisi'nin altında Önbelleğe almayı etkinleştir kutusunu işaretleyin.

SharePoint'te yönetilen gezinti ve meta verileri kullanma

Yönetilen gezinti, yapısal gezintiyle aynı işlevlerin çoğunu yeniden oluşturmak için kullanabileceğiniz bir diğer kullanıma uygun seçenektir. Yönetilen meta veriler, güvenlik kırpmanın etkinleştirilmesi veya devre dışı bırakılması için yapılandırılabilir. Güvenlik kırpma devre dışıyken yapılandırıldığında, tüm gezinti bağlantılarını sabit sayıda sunucu çağrısıyla yüklediğinden yönetilen gezinti oldukça verimlidir. Bununla birlikte, güvenlik kırpmanın etkinleştirilmesi, yönetilen gezintinin bazı performans avantajlarını engeller.

Güvenlik kırpmasını etkinleştirmeniz gerekiyorsa şunları yapmanızı öneririz:

• Tüm kolay URL bağlantılarını basit bağlantılara güncelleştirin
• Gerekli güvenlik kırpma düğümlerini kolay URL'ler olarak ekleme
• Gezinti öğelerinin sayısını en fazla 100 ve en fazla üç düzey derinliğinde sınırlayın

Gezinti yapısı genellikle sitenin tüm kullanıcıları için tutarlı olduğundan, birçok site güvenlik kırpması gerektirmez. Güvenlik kırpma devre dışı bırakılırsa ve gezintiye tüm kullanıcıların erişimi olmayan bir bağlantı eklenirse, bağlantı yine de gösterilir ancak erişim reddedildi iletisine yol açar. İçeriğe yanlışlıkla erişim riski yoktur.

Yönetilen gezintiyi ve sonuçları uygulama

Microsoft Learn'de yönetilen gezintinin ayrıntıları hakkında birkaç makale vardır. Örneğin, bkz. SharePoint Server'da yönetilen gezintiye genel bakış.

Yönetilen gezintiyi uygulamak için, sitenin gezinti yapısına karşılık gelen URL'lerle terimler ayarlarsınız. Yönetilen gezinti, çoğu durumda yapısal gezintiyi değiştirmek için el ile de kullanılabilir. Örneğin:

)

Arama tabanlı istemci tarafı betiği kullanma

Yaygın bir özel gezinti uygulaması sınıfı, yerel gezinti düğümleri önbelleğini depolayan istemci tarafından işlenmiş tasarım desenlerini benimser.

Bu gezinti sağlayıcılarının birkaç önemli avantajı vardır:

• Genellikle hızlı yanıt veren sayfa tasarımlarıyla iyi çalışırlar.
• Bunlar, kaynak maliyeti olmadan işlenebildiği (ve zaman aşımından sonra arka planda yenilenebildiği) için son derece ölçeklenebilir ve yüksek performanslıdır.
• Bu gezinti sağlayıcıları, basit statik yapılandırmalardan çeşitli dinamik veri sağlayıcılarına kadar çeşitli stratejileri kullanarak gezinti verilerini alabilir.

Veri sağlayıcısına örnek olarak, gezinti düğümlerini listeleme ve güvenlik kırpma işlemlerini verimli bir şekilde işleme esnekliği sağlayan Arama temelli gezinti kullanmaktır.

Özel gezinti sağlayıcıları oluşturmak için başka popüler seçenekler de vardır. Özel gezinti sağlayıcısı oluşturma konusunda daha fazla rehberlik için SharePoint portalları için gezinti çözümlerini gözden geçirin.

Aramayı kullanarak, sürekli gezinmeyi kullanarak arka planda oluşturulan dizinleri kullanabilirsiniz. Arama sonuçları arama dizininden çekilir ve sonuçlar güvenlikle kırpılır. Bu genellikle güvenlik kırpması gerektiğinde kullanıma kullanıma yönelik gezinti sağlayıcılarından daha hızlıdır. Özellikle karmaşık bir site yapınız varsa yapısal gezinti araması kullanmak sayfa yükleme süresini önemli ölçüde hızlandıracaktır. Bunun yönetilen gezintiye göre temel avantajı, güvenlik kırpmasından yararlanmanızdır.

Bu yaklaşım, özel bir ana sayfa oluşturmayı ve kullanıma açık gezinti kodunu özel HTML ile değiştirmeyi içerir. dosyasındaki seattle.htmlgezinti kodunu değiştirmek için aşağıdaki örnekte özetlenen bu yordamı izleyin. Bu örnekte, dosyayı açacak seattle.html ve öğenin id="DeltaTopNavigation" tamamını özel HTML koduyla değiştireceksiniz.

Örnek: Bir ana sayfadaki kullanıma özel gezinti kodunu değiştirme

1. Site Ayarları sayfasına gidin.
2. Ana Sayfalar'a tıklayarak ana sayfa galerisini açın.
3. Buradan kitaplıkta gezinebilir ve dosyasını seattle.masterindirebilirsiniz.
4. Bir metin düzenleyicisi kullanarak kodu düzenleyin ve aşağıdaki ekran görüntüsünde kod bloğunu silin.
   
   
5. ve <\SharePoint:AjaxDelta> etiketleri arasındaki <SharePoint:AjaxDelta id="DeltaTopNavigation"> kodu kaldırın ve aşağıdaki kod parçacığıyla değiştirin:
   

<div id="loading">
  <!--Replace with path to loading image.-->
  <div style="background-image: url(''); height: 22px; width: 22px; ">
  </div>
</div>
<!-- Main Content-->
<div id="navContainer" style="display:none">
    <div data-bind="foreach: hierarchy" class="noindex ms-core-listMenu-horizontalBox">
        <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
            <span class="menu-item-text" data-bind="text: item.Title">
            </span>
        </a>
        <ul id="menu" data-bind="foreach: $data.children" style="padding-left:20px">
            <li class="static dynamic-children level1">
                <a class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">

                 <!-- ko if: children.length > 0-->
                    <span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children">
                        <span class="menu-item-text" data-bind="text: item.Title">
                        </span>
                    </span>
                <!-- /ko -->
                <!-- ko if: children.length == 0-->
                    <span aria-haspopup="true" class="ms-navedit-flyoutArrow dynamic-children">
                        <span class="menu-item-text" data-bind="text: item.Title">
                        </span>
                    </span>
                <!-- /ko -->
                </a>

                <!-- ko if: children.length > 0-->
                <ul id="menu"  data-bind="foreach: children;" class="dynamic  level2" >
                    <li class="dynamic level2">
                        <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline  ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">

          <!-- ko if: children.length > 0-->
          <span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children">
           <span class="menu-item-text" data-bind="text: item.Title">
           </span>
          </span>
           <!-- /ko -->
          <!-- ko if: children.length == 0-->
          <span aria-haspopup="true" class="ms-navedit-flyoutArrow dynamic-children">
           <span class="menu-item-text" data-bind="text: item.Title">
           </span>
          </span>
          <!-- /ko -->
                        </a>
          <!-- ko if: children.length > 0-->
         <ul id="menu" data-bind="foreach: children;" class="dynamic level3" >
          <li class="dynamic level3">
           <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
            <span class="menu-item-text" data-bind="text: item.Title">
            </span>
           </a>
          </li>
         </ul>
           <!-- /ko -->
                    </li>
                </ul>
                <!-- /ko -->
            </li>
        </ul>
    </div>
</div>

6. Başlangıçtaki yükleme görüntüsü tutturucu etiketindeki URL'yi, site koleksiyonunuzdaki bir yükleme görüntüsünün bağlantısıyla değiştirin. Değişiklikleri yaptıktan sonra dosyayı yeniden adlandırın ve ana sayfa galerisine yükleyin. Bu, yeni bir .master dosyası oluşturur.
7. Bu HTML, JavaScript kodundan döndürülen arama sonuçlarıyla doldurulacak temel işaretlemedir. Aşağıdaki kod parçacığında gösterildiği gibi var root = "site koleksiyonu URL'si" değerini değiştirmek için kodu düzenlemeniz gerekir:

var root = "https://spperformance.sharepoint.com/sites/NavigationBySearch";

8. Sonuçlar self.nodes dizisine atanır ve çıkışı bir dizi self.hiyerarşisine atama linq.js kullanılarak nesnelerden bir hiyerarşi oluşturulur. Bu dizi, HTML'ye bağlı nesnedir. Bu, toggleView() işlevinde kendi nesnesini ko.applyBinding() işlevine geçirerek gerçekleştirilir.
Bu, hiyerarşi dizisinin aşağıdaki HTML'ye bağlanmasına neden olur:

<div data-bind="foreach: hierarchy" class="noindex ms-core-listMenu-horizontalBox">

ve mouseexit için mouseenter olay işleyicileri, işlevinde yapılan alt site açılan menülerini işlemek için üst düzey gezintiye addEventsToElements() eklenir.

Karmaşık gezinti örneğimizde, yerel önbelleğe alma olmadan yapılan yeni bir sayfa yükü, yönetilen gezinti yaklaşımına benzer bir sonuç elde etmek için sunucuda harcanan sürenin karşılaştırma yapısal gezintisinden azaltıldığını gösterir.

JavaScript dosyası hakkında...

JavaScript dosyasının tamamı aşağıdaki gibidir:

//Models and Namespaces
var SPOCustom = SPOCustom || {};
SPOCustom.Models = SPOCustom.Models || {}
SPOCustom.Models.NavigationNode = function () {

    this.Url = ko.observable("");
    this.Title = ko.observable("");
    this.Parent = ko.observable("");

};

var root = "https://spperformance.sharepoint.com/sites/NavigationBySearch";
var baseUrl = root + "/_api/search/query?querytext=";
var query = baseUrl + "'contentClass=\"STS_Web\"+path:" + root + "'&trimduplicates=false&rowlimit=300";

var baseRequest = {
    url: "",
    type: ""
};


//Parses a local object from JSON search result.
function getNavigationFromDto(dto) {
    var item = new SPOCustom.Models.NavigationNode();
    if (dto != undefined) {

        var webTemplate = getSearchResultsValue(dto.Cells.results, 'WebTemplate');

        if (webTemplate != "APP") {
            item.Title(getSearchResultsValue(dto.Cells.results, 'Title')); //Key = Title
            item.Url(getSearchResultsValue(dto.Cells.results, 'Path')); //Key = Path
            item.Parent(getSearchResultsValue(dto.Cells.results, 'ParentLink')); //Key = ParentLink
        }

    }
    return item;
}

function getSearchResultsValue(results, key) {

    for (i = 0; i < results.length; i++) {
        if (results[i].Key == key) {
            return results[i].Value;
        }
    }
    return null;
}

//Parse a local object from the serialized cache.
function getNavigationFromCache(dto) {
    var item = new SPOCustom.Models.NavigationNode();

    if (dto != undefined) {

        item.Title(dto.Title);
        item.Url(dto.Url);
        item.Parent(dto.Parent);
    }

    return item;
}

/* create a new OData request for JSON response */
function getRequest(endpoint) {
    var request = baseRequest;
    request.type = "GET";
    request.url = endpoint;
    request.headers = { ACCEPT: "application/json;odata=verbose" };
    return request;
};

/* Navigation Module*/
function NavigationViewModel() {
    "use strict";
    var self = this;
    self.nodes = ko.observableArray([]);
    self.hierarchy = ko.observableArray([]);;
    self.loadNavigatioNodes = function () {
        //Check local storage for cached navigation datasource.
        var fromStorage = localStorage["nodesCache"];
        if (false) {
            var cachedNodes = JSON.parse(localStorage["nodesCache"]);

            if (cachedNodes && timeStamp) {
                //Check for cache expiration. Currently set to 3 hrs.
                var now = new Date();
                var diff = now.getTime() - timeStamp;
                if (Math.round(diff / (1000 * 60 * 60)) < 3) {

                    //return from cache.
                    var cacheResults = [];
                    $.each(cachedNodes, function (i, item) {
                        var nodeitem = getNavigationFromCache(item, true);
                        cacheResults.push(nodeitem);
                    });

                    self.buildHierarchy(cacheResults);
                    self.toggleView();
                    addEventsToElements();
                    return;
                }
            }
        }
        //No cache hit, REST call required.
        self.queryRemoteInterface();
    };

    //Executes a REST call and builds the navigation hierarchy.
    self.queryRemoteInterface = function () {
        var oDataRequest = getRequest(query);
        $.ajax(oDataRequest).done(function (data) {
            var results = [];
            $.each(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function (i, item) {

                if (i == 0) {
                    //Add root element.
                    var rootItem = new SPOCustom.Models.NavigationNode();
                    rootItem.Title("Root");
                    rootItem.Url(root);
                    rootItem.Parent(null);
                    results.push(rootItem);
                }
                var navItem = getNavigationFromDto(item);
                results.push(navItem);
            });
            //Add to local cache
            localStorage["nodesCache"] = ko.toJSON(results);

            localStorage["nodesCachedAt"] = new Date().getTime();
            self.nodes(results);
            if (self.nodes().length > 0) {
                var unsortedArray = self.nodes();
                var sortedArray = unsortedArray.sort(self.sortObjectsInArray);

                self.buildHierarchy(sortedArray);
                self.toggleView();
                addEventsToElements();
            }
        }).fail(function () {
            //Handle error here!!
            $("#loading").hide();
            $("#error").show();
        });
    };
    self.toggleView = function () {
        var navContainer = document.getElementById("navContainer");
        ko.applyBindings(self, navContainer);
        $("#loading").hide();
        $("#navContainer").show();

    };
    //Uses linq.js to build the navigation tree.
    self.buildHierarchy = function (enumerable) {
        self.hierarchy(Enumerable.From(enumerable).ByHierarchy(function (d) {
            return d.Parent() == null;
        }, function (parent, child) {
            if (parent.Url() == null || child.Parent() == null)
                return false;
            return parent.Url().toUpperCase() == child.Parent().toUpperCase();
        }).ToArray());

        self.sortChildren(self.hierarchy()[0]);
    };


    self.sortChildren = function (parent) {

        // sjip processing if no children
        if (!parent || !parent.children || parent.children.length === 0) {
            return;
        }

        parent.children = parent.children.sort(self.sortObjectsInArray2);

        for (var i = 0; i < parent.children.length; i++) {
            var elem = parent.children[i];

            if (elem.children && elem.children.length > 0) {
                self.sortChildren(elem);
            }
        }
    };

    // ByHierarchy method breaks the sorting in chrome and firefox
    // we need to resort  as ascending
    self.sortObjectsInArray2 = function (a, b) {
        if (a.item.Title() > b.item.Title())
            return 1;
        if (a.item.Title() < b.item.Title())
            return -1;
        return 0;
    };


    self.sortObjectsInArray = function (a, b) {
        if (a.Title() > b.Title())
            return -1;
        if (a.Title() < b.Title())
            return 1;
        return 0;
    }
}

//Loads the navigation on load and binds the event handlers for mouse interaction.
function InitCustomNav() {
    var viewModel = new NavigationViewModel();
    viewModel.loadNavigatioNodes();
}

function addEventsToElements() {
    //events.
      $("li.level1").mouseover(function () {
          var position = $(this).position();
          $(this).find("ul.level2").css({ width: 100, left: position.left + 10, top: 50 });
      })
   .mouseout(function () {
     $(this).find("ul.level2").css({  left: -99999, top: 0 });
   
    });
   
     $("li.level2").mouseover(function () {
          var position = $(this).position();
          console.log(JSON.stringify(position));
          $(this).find("ul.level3").css({ width: 100, left: position.left + 95, top:  position.top});
      })
   .mouseout(function () {
     $(this).find("ul.level3").css({  left: -99999, top: 0 });
    });
} _spBodyOnLoadFunctionNames.push("InitCustomNav");

İşlevde jQuery $(document).ready yukarıda gösterilen kodu özetlemek için bir viewModel object oluşturulur ve bu nesnedeki loadNavigationNodes() işlev çağrılır. Bu işlev, istemci tarayıcısının HTML5 yerel depolama alanında depolanan önceden oluşturulmuş gezinti hiyerarşisini yükler veya işlevini queryRemoteInterface()çağırır.

QueryRemoteInterface() betiğinde getRequest() daha önce tanımlanan sorgu parametresiyle işlevini kullanarak bir istek oluşturur ve ardından sunucudan veri döndürür. Bu veriler temelde çeşitli özelliklere sahip veri aktarım nesneleri olarak temsil edilen site koleksiyonundaki tüm sitelerin dizisidir.

Daha sonra bu veriler, değerleri daha önce tanımladığımız HTML'ye bağlayan veriler tarafından kullanılmak üzere gözlemlenebilir özellikler oluşturmak için kullanılan Knockout.js önceden tanımlanmış SPO.Models.NavigationNode nesnelere ayrıştırılır.

Nesneler daha sonra bir sonuç dizisine konur. Bu dizi, Knockout kullanılarak JSON'a ayrıştırılır ve gelecekteki sayfa yüklemelerinde daha iyi performans için yerel tarayıcı depolama alanında depolanır.

Bu yaklaşımın avantajları

Bu yaklaşımın önemli avantajlarından biri, HTML5 yerel depolama kullanılarak gezintinin sayfayı bir sonraki yükleyişinde kullanıcı için yerel olarak depolanmasıdır. Yapısal gezinti için arama API'sini kullanarak önemli performans iyileştirmeleri elde ederiz; ancak bu işlevi yürütmek ve özelleştirmek için bazı teknik yetenekler gerekir.

Örnek uygulamada, siteler kullanıma yönelik yapısal gezinti ile aynı şekilde sıralanır; alfabetik sıra. Bu düzenden sapmak istiyorsanız, geliştirmek ve korumak daha karmaşık olacaktır. Ayrıca, bu yaklaşım desteklenen ana sayfalardan sapmanızı gerektirir. Özel ana sayfa korunmuyorsa, siteniz Microsoft'un ana sayfalarda yaptığı güncelleştirmeleri ve iyileştirmeleri kaçıracaktır.

Yukarıdaki kod aşağıdaki bağımlılıklara sahiptir:

• Jquery- https://jquery.com/
• KnockoutJS - https://knockoutjs.com/
• Linq.js - https://linqjs.codeplex.com/veya github.com/neuecc/linq.js

LinqJS'nin geçerli sürümü yukarıdaki kodda kullanılan ByHierarchy yöntemini içermez ve gezinti kodunu bozar. Bunu düzeltmek için, satırından Flatten: function ()önce Linq.js dosyasına aşağıdaki yöntemi ekleyin.

ByHierarchy: function(firstLevel, connectBy, orderBy, ascending, parent) {
     ascending = ascending == undefined ? true : ascending;
     var orderMethod = ascending == true ? 'OrderBy' : 'OrderByDescending';
     var source = this;
     firstLevel = Utils.CreateLambda(firstLevel);
     connectBy = Utils.CreateLambda(connectBy);
     orderBy = Utils.CreateLambda(orderBy);

     //Initiate or increase level
     var level = parent === undefined ? 1 : parent.level + 1;

    return new Enumerable(function() {
         var enumerator;
         var index = 0;

        var createLevel = function() {
                 var obj = {
                     item: enumerator.Current(),
                     level : level
                 };
                 obj.children = Enumerable.From(source).ByHierarchy(firstLevel, connectBy, orderBy, ascending, obj);
                 if (orderBy !== undefined) {
                     obj.children = obj.children[orderMethod](function(d) {
                         return orderBy(d.item); //unwrap the actual item for sort to work
                     });
                 }
                 obj.children = obj.children.ToArray();
                 Enumerable.From(obj.children).ForEach(function(child) {
                     child.getParent = function() {
                         return obj;
                     };
                 });
                 return obj;
             };

        return new IEnumerator(

        function() {
             enumerator = source.GetEnumerator();
         }, function() {
             while (enumerator.MoveNext()) {
                 var returnArr;
                 if (!parent) {
                     if (firstLevel(enumerator.Current(), index++)) {
                         return this.Yield(createLevel());
                     }

                } else {
                     if (connectBy(parent.item, enumerator.Current(), index++)) {
                         return this.Yield(createLevel());
                     }
                 }
             }
             return false;
         }, function() {
             Utils.Dispose(enumerator);
         })
     });
 },

İlgili konular

SharePoint Server'da yönetilen gezintiye genel bakış

Yapısal gezinti önbelleği ve performansı