Tamamen açık bir web sitesinde dinamik olarak yüklenmiş farklı içerikler için JS

Bu, sorunu daha iyi açıklamak için geliştirilmiş konseptli bir kod olan (şimdiye kadar verilen cevaplara dayanarak) tamamen güncellenmiş bir mesajdır

Tamamen boş bir web sitesi fark etmeye çalışıyorum. Ama çoklu ciltlenmiş olaylarla ilgili bazı problemlerim var.

Bu temel HTML'dir:

<div id="anything">
    
</div>

Gezinme dinamik olarak oluşturulur ( #navigation içeriği başka bir gezinme ile değiştirilebildiği için), böylece gezinme öğeleri için bağlanma şöyle görünür:

$('#navigation').off('click', '.red').on('click', '.red', function() { 
    var type = $(this).attr('data-type');
    var data = { 'param': 'content', 'type': type };
    ajaxSend(data);
});

Sitenin içeriği de dinamik olarak yüklenmektedir. Örneğin iki farklı içerik var:

1:

<div id="vegetables">Here are some informations about vegetables: <button>Anything</button></div>

2 :

<div id="cars"></div>

İçeriği yüklerken, bu içerik türü için gereken tüm bağlantıları olan belirli bir JS dosyasını da yükleyeceğim. Yani yükleme betiği şöyle görünür:

var ajaxSend = function(data) {
    $.ajax({ url: "script.php", type: "POST", data: data, dataType: "json" })
    .done(function( json ) {
        if (json.logged === false) { login(ajaxSend, data); }
        else {
            $.getScript( 'js/' + json.file + '.js' )
            .done(function( script, textStatus ) { 
                $('#result').html(json.antwort);
            });
        }
    });
}

İhtiyacınız olan sonuç türü için parametreyi (yani sebzeler veya arabalar) geçtiğinizde, sonuç #result bölümünde gösterilecektir. Ayrıca cars.js veya vegetables.js dosyaları yüklenecekti.

Bu yüzden benim sorunum birden fazla olayla bağlantı kurmaktan kaçınmak. Bu nasıl yapıyorum:

cars.js:

$('#result').off('mouseover', 'img').on('mouseover', 'img', function() { 
   //do anything
});

vegetables.js:

$('#result').off('click', 'button').on('click', 'button', function() { 
   //do anything
});

Bu uygun yol mu? Ben off() kullanmak sadece bir geçici çözüm olduğunu düşünüyorum. Bu yüzden herhangi bir gelişmeyi takdir ediyorum!

Dahası, eğer bir sorun olup olmadığını bilmiyorum, kullanıcı navigasyonu birden çok defa tıklarsa: Bu durumda, JS dosyaları birden çok kez yüklenir, öyle değil mi? Öyleyse bu konsepte birden fazla bağlanma var mı?

1
Bir kod örneği verebilir misiniz? Bunu farklı JS dosyalarıyla yapmak istiyorum. Ama sorun aynı, değil mi? Yetki verilmiş etkinlikleri kullanmak zorundayım değil mi? Ve yeni bir içerik yüklendiğinde JS dosyasını kaldırmam gerekiyor mu?
katma yazar user3142695, kaynak
Evet, çok iyi bir örnek görmek istiyorum. Eğer gerçekten iyi bir çözümse, herşeyi taşımayı deneyeceğim ...
katma yazar user3142695, kaynak
Hayır, şu ana kadar bunu yapmam. dosyaları kaldırmak mümkün olmadığını düşündüğüm gibi. Komut dosyasını nasıl kaldırmam gerekir?
katma yazar user3142695, kaynak
Aynı konu ve aynı soru. Daha net anlayabilmek için güncelledim. Her zaman her zaman yeni bir soru olması gerektiğini sanmıyorum ...
katma yazar user3142695, kaynak
@ user3848987 Angular, Backbone veya Ember gibi bir MVC çerçevesi kullanmalısınız. JQuery, bunun için yeterince sağlam değil. Açısal olarak yüklenen görünümlerin (örneğin), olay eşlemesini işlemek için kendi denetleyicileri olur ve çakışma olmaz. Bir örnek görmek ister misiniz?
katma yazar Dave Alperovich, kaynak
Orijinal koddaki tüm değişikliklerle birlikte, bu yeni bir soru olmalıydı ....
katma yazar Gary Storey, kaynak
katma yazar wonderbell, kaynak
Dinamik içerikle yüklenen her dinamik içeriğe özgü JS dosyanız olabilir.
katma yazar wonderbell, kaynak
eski betiği kaldırır mısınız? çünkü sayfayı (ve tarayıcıyı) çok fazla yükleyeceğinizi düşünüyorum ve bir noktada çökebilir. Bir sürü senaryo yüklediğinizi varsayıyorum.
katma yazar Catalin Sterian, kaynak
Ayrıca her şey için yeni bir konu açmanın gerekli olmadığını düşünüyorum. Değişiklikler başlığı değiştirmeden çok net ve şeffaf hale getirdi. Sadece ödül almak için cevabınızı değiştirin :-)
katma yazar user3848987, kaynak

8 cevap

Tamamen açık bir web sitesine başvurduğunuzda, bence SPA - S P yaşını aşılar > A pplication.

Bu ayrım anlamsal olabilir, ancak AJAX DOM manipülasyonunu, SPA Temprating ve Gezinme .

Sayfanız yüklendiğinde HTML şablonları yüklenir. Her şablon belirli bir navigasyon rotasına eşlenir. Büyük değişiklikler olay eşlemesi ile DEĞİLDİR, ancak Şablonun gösterildiğini ve yeni verilerin yüklenip yüklenmediğini gösterir.

Örnek AngularJS SPA Plunkr'a bakın

AngularJS yönlendirmesi şöyle görünür:

   scotchApp.config(function($routeProvider) {
     $routeProvider

    //route for the home page
     .when('/', {
       templateUrl: 'pages/home.html',
       controller: 'mainController'
     })

    //route for the cars page
     .when('/cars', {
       templateUrl: 'pages/Cars.html',
       controller: 'CarsController'
     })

    //route for the vegetables page
     .when('/vegetables', {
       templateUrl: 'pages/Vegetables.html',
       controller: 'VegetablesController'
     });
   });

Bu nedenle, her bir rota karşılık gelen bir HTML Şablonu ve Denetleyicisine (geri arama işlevlerinin tanımlandığı) sahiptir.

CDN amacıyla, şablonlar JSON olarak geri alınabilir

    //route for the vegetables page
     .when('/vegetables', {
       template: '<div class="jumbotron text-center"><div class="row">

Cars Page

Available Cars: LoadCars</div><div class="col-sm-4"> Make/Model</div><div class="col-sm-2"> Year</div><div class="col-sm-2"> Price</div><div class="row" ng-repeat="car in cars  | orderBy:sort"><div class="row"></div><div class="col-sm-4">{{ car.name }}</div><div class="col-sm-2">{{ car.year }}</div><div class="col-sm-2">${{ car.price }}</div></div></div>',
       controller: 'VegetablesController'
     });
  • "Şablonlu" uygulamalarda, her türün HTML'si bir kez yüklenir.

  • Olaylar ve kontroller bir kez bağlanır.

  • Artımlı değişiklikler, ileri ve geri JSON iletilir. Bitiş noktalarınız HTML oluşturmaktan sorumlu değildir. Huzurlu olabilirler ve kaygıları net bir şekilde ayırırlar.

  • AngularJS , Ember , Omurga , JQuery ve daha fazlası.

2
katma
Ve tam olarak bu benim en büyük sorunum. Query-Project'im oldukça iyi çalışıyor ve benim için çok çalıştı. Şu anda hissediyorum ki, 1) angular.js yeni öğrenmeliyim 2) projemi tamamen yeni oluşturmalıyım
katma yazar user3142695, kaynak
Bu çok ilginç görünüyor. Ama bu benim için tamamen yeni. Şablonların HTML dosyaları olması gerekiyor mu? Şimdiye kadar her zaman bir PHP dosyası tarafından oluşturulan HTML Kodunu kullandım (verilen parametrelere bağlı olarak). Bu HTML Kodu, AJAX ile ana sayfaya aktarılmıştır. Yani, yani angular.js ile statik html kullanmanız önerilir, değil mi?
katma yazar user3142695, kaynak
@ user3142695, ben sempati duyuyorum. Yeni bir şey bir oyun değiştirici. Eğer son tarihleriniz varsa, buna karşısınız. Uzun vadede, mevcut yaklaşımınızı Angular SPA'ya ayarlamak daha az bakım gerektirecektir. Burada ve şimdi sonsuz bir delik gibi görünüyor.
katma yazar Dave Alperovich, kaynak
@ user3142695, jQuery ve AngularJS ürününü karıştırabileceğinizi unutmayın. Var olan proje sitelerine Angular'ı ekledim. Sonuçlar Saf Açısal ile en iyisidir, ancak geçiş gerekli değildir. Şüphe ediyorum ki, AngularJS'i kullanmaya başladığınızda, içine daha da fazla büyüyeceksiniz. Ancak, Angular’ın ayar ve yönlendirmesini kullanmak için mevcut tüm çalışmalarınızı atmanız gerekmez.
katma yazar Dave Alperovich, kaynak
Buradaki fikir, html sayfalarınızın statik olması ancak davranışta dinamik olmasıdır. Böylece veri veya kullanıcı etkileşimi etrafında uyum sağlarlar. Bu nedenle son noktalarınız yalnızca verilerle ilgilidir ve sayfalar kullanıcı istekleriyle etkileşime girer. Kabul ediyorum, çok farklı bir yaklaşım. Ve bu uygulamaya bakmak için çılgınca farklı bir yol.
katma yazar Dave Alperovich, kaynak
@ user3142695, aslında, şablonlar JSON olarak oluşturulabilir. şablonunu geçmek yerine: <div> </div> ... . Cevabıma bir örnek ekledim. Ancak, evet, bunlar dinamik HTML değildir. Davranışlar dinamiktir. AngularJS veya Ember gibi çerçeveler, sayfalarınızı kolayca dinamik hale getirmek için büyük bir güce sahiptir. Benim örneğime bir bak. Raporlar oluşturdum, raporları sıralayabiliyorum ve neredeyse hiç bir kodla daha fazla veri yükleyemedim. Dinamik kısmi yüklemek yerine (bunu ASP.NET ile de kullandım), mantığın çoğu müşteri sayfanıza gider. Bu yeni bir düşünce tarzı, ancak IMO çok daha iyi bir tasarım.
katma yazar Dave Alperovich, kaynak

Öncelikle, diğerlerinin önerdiği gibi AngularJS gibi bir çerçeve seçmenizi öneririm.

Ancak, bunun yanında, ad alanlarını kullanmayı da düşünebilirsiniz:

cars.js:

$('#result').off('mouseover.cars', 'img').on('mouseover.cars', 'img', function() { 
   //do anything
});

vegetables.js:

$('#result').off('click.vegetables', 'button').on('click.vegetables', 'button', function() { 
   //do anything
});

(ve biraz daha az geçici çözüm) adlı bir gelişme olurdu, çünkü:

Diğer tıklama olay işleyicilerini rahatsız etmeden

(Bu işi yapar)   öğelere ekli.

     

- .on() belgeler

1
katma
Uzun uzun uzun cevapları okuduktan sonra, birisinin kesin bir çözüm önerdiğini görmekten memnun oldum (olayları adlandırarak) :)
katma yazar Gone Coding, kaynak

cars.js:

 $ ('# result'). off ('fare', 'img'). on ('fare', 'img', function() {
        // birşeyler yap
    });
 
     

vegetabels.js:

 $ ('# sonuç'). kapalı ('klik', 'düğme'). on ('klik', 'düğme', function() {
        // birşeyler yap
    });
 

Emin değilim, ancak kullanıcı önce nav yazıp otomobil türünü tıklarsa, ('mouseover', 'img') dinleyicilerin kaydı silin ve ardından tekrar kayıt olun, değil mi? Sonra kullanıcı sebzeleri tıklattığında nav ('click', 'button') yazın - kayıttan kaldırıldı (ancak !!! 'mouseover', 'img' - tutulur !! !), ve eğer kullanıcı komut dosyasında ('mouseover', 'img') dinleyicinin olmadığı ancak içeriğin img'sinin bulunduğu bir nav tipine tıklarsa, içerik için yasadışı dinleyici var .

Bu nedenle, belki de yeni içerik ve komut dosyası yüklemeye başlamadan ÖNCE #result dinleyicilerine kayıtlı olanları temizlemeniz gerekir, belki de:

    var ajaxSend = function(data) {
        $.ajax({ url: "script.php", type: "POST", data: data, dataType: "json" })
        .done(function( json ) {
            if (json.logged === false) { login(ajaxSend, data); }
            else {
                $('#result').off();
                $.getScript( 'js/' + json.file + '.js' )
                .done(function( script, textStatus ) { 
                    $('#result').html(json.antwort);
                });
            }
        });
    }

veya

cars.js:

    $('#result').off().on('mouseover', 'img', function() { 
       //do anything
    });

vegetabels.js:

    $('#result').off().on('click', 'button', function() { 
       //do anything
    });

Edit: About loading scripts multiple times. I didn't find clear answer, and I think it is browser depend and jQuery implementation and it is possible that each time new script are created new script will be created even if it was created earlier, so there could be 2 disadvantages:

  1. repeated loads of same script form server, if not browser nveyajquery didn't cache it
  2. flooding DOM anp browser's interpreter by scripts

AMA, jQuery belgelerine bağlı olarak.

Yanıtları Önbelleğe Alma

     

Varsayılan olarak, $ .getScript() önbellek ayarını false olarak ayarlar. Bu, tarayıcının her istendiğinde komut dosyasını indirmesini sağlamak için istek URL'sine zaman damgalı bir sorgu parametresi ekler. $.ajaxSetup()

tuşlarını kullanarak önbellek özelliğini genel olarak ayarlayarak bu özelliği geçersiz kılabilirsiniz.      
     

$ .ajaxSetup ({cache: true});

You may rely on JQuery cache (there is an option to cache only scripts), veyaimplement your own, fveyaex.:

    var scriptCache = [];
    function loadScript(scriptName, cb){
      if (scriptCache[scriptName]) {
        jQuery.globalEval(scriptCache[scriptName]);
        cb();
      } else {
        $.getScript( scriptName )
        .done(function( script, textStatus ) { 
          scriptCache[scriptName] = script;
          //$('#result').html(json.antwort);
          cb();
        });
      }
    }
1
katma
Önbelleğe alma noktasını tamamen anlamıyorum. $ .ajaxSetup ({cache: true}); yeterli değil mi? Kod pasajınızın avantajı nedir? Peki ya bağlantılı dokümanınızın $ .cachedScript örneği? GetScript yerine ajax kullandığı için
katma yazar user3142695, kaynak
Oh anladım. Afedersiniz.
katma yazar user3142695, kaynak
Anlamadım $ ('# result'). Off (); ile tüm olaylar kaldırılır. Ardından json.file.js yüklenecek. Şimdi #result üzerinde hiçbir etkinlik yok, bu nedenle off() kullanmak zorunda değilsiniz ... Neden yanlışım?
katma yazar user3142695, kaynak
Ama o zaman cars.js/vegetables.js dosyasında off() 'a gerek yok, değil mi?
katma yazar user3142695, kaynak
"JQuery önbelleğini aktarabilir (yalnızca komut dosyalarını önbelleğe alma seçeneği vardır) veya kendi kodunuzu uygulayabilirsiniz, örneğin: ....." yine de Jquery'nin komut dosyası önbelleğe alma özelliklerine sahip olduğunu ve onu açıp güvenebileceğiniz anlamına geldiğini söyledim ancak, istemiyorsanız (herhangi bir nedenden ötürü), kendi script önbelleğinizi kullanabilir ve basit bir örnek için nasıl gerçekleştirileceğini basit bir örnek için kod parçacığını ekleyebilirsiniz @ user3142695
katma yazar skazska, kaynak
üzgünüm, cevabımı yanlış yönlendirebilirim, iki değişken verdim: 1) $ ("# sonuç"). off() - ajaxSend'de denir ve .off() 'a dinamik olarak yüklenmemiş betiklerde (araba/vagetables) gerek yok 2) kullanım .off() yerine .off (olay, öğe) dyn komut dosyalarındaki .off() ajaxSend varyantındaki 1) gerekmez, dyn komut dosyaları/içerik arızası için kusursuzdur, çünkü önce dinleyicileri temizler (ancak değiştirilecek içerik sola ve misfunction)
katma yazar skazska, kaynak
dinamik olarak yüklenen her komut dosyasında gerekli, çünkü hangi sırada hangi komut dosyalarının yükleneceğini tahmin edemezsiniz ya da sadece ajaxSend'de $ (# sonuç) .off() eklenir, böylece ilk değişkende olduğu gibi.() herhangi bir dyn komut dosyasında ancak bu güvenilir değil (dinleyicilerin kayıtsız olduğu, ancak yeni içerik ve komut dosyası yüklenmediği zaman durum nedeniyle)
katma yazar skazska, kaynak

.off (...). On (...) yaklaşımıyla, aynı olaya bağlanan birden fazla .js dosyanız olması durumunda olayların yeni bir bağlamadan önce netleşeceğini garanti edersiniz (örn. : Hem otomobillerin hem de sebzelerin farklı mantıklara sahip bir düğmesi var).

Bununla birlikte, durum böyle değilse, hangi öğenin etkin olduğunu önceden belirlemek için sınıf filtreleri kullanabilirsiniz:

$('#result:not(.click-bound)').addClass('click-bound').on('click', 'button', function() { 
    //your stuff in here
});

Bu şekilde seçici, olayları yalnızca click-bound sınıfı ile henüz dekore edilmemiş öğelere bağlar.

1
katma

Çoğunlukla, web geliştirmede yapmayı hayal edebildiğiniz her şey zaten yapıldı. Sadece onu bulup çevrenizle çalışmasını sağlamalısınız. Kodunuzla ilgili birkaç sorun var ama beni daha fazla rahatsız eden başka bir şey var - neden kimse angularJS 'a gönderme yapmıyor veya JJ’yi gerektirir ? Bu tür çerçevelerin ve kütüphanelerin kullanılmasının büyük yararları vardır.

  • Her yerdeki binlerce eğitimci
  • SO’da binlerce ve binlerce soru
  • Onlar (çoğunlukla), kullanıma hazır olan inanılmaz eklentilere sahiptirler
  • Muhtemelen uygulamalarınıza kıyasla daha geniş bir işlevselliğe sahiptirler

Ve ayrıca burada kendi kodunuzu kullanmanın yararları

  • Bunu anlayan tek kişi sizsiniz.
  • şey var mı?

Buradaki amacım, başkalarının zaten inşa ettikleri şeyi kullanmanız gerektiği, bunun% 99'unda tamamen ÜCRETSİZDİR.

Ek olarak, açısal gibi çerçeveler kullanarak, daha temiz ve bakımlı kodlara sahip olacaksınız.

0
katma
Bir çerçevenin 'dezavantajı', angular.js'deki tüm projeyi tamamen yeniden yazma ihtiyacıdır.
katma yazar user3142695, kaynak
Çerçeve önerisi konusunda haklısın. Ama çoğunlukla daha fazla işlevselliğe sahipler, o zaman ihtiyacım var. Örnek: Öyleyse sadece solma ve kayma etkisine ihtiyacınız varsa, bunu saf JS'de tek başıma yapmak daha iyi olur mu yoksa bedava olan ve zaten yapılmış olan jQuery kullanmalı mıyım?
katma yazar user3142695, kaynak
@ user3142695, animate.css gibi animasyonlara odaklanan başka bir kütüphane eklemek daha iyi olur. Bunlar size herhangi bir fayda getirmeyecek minimalist endişeler. Teknoloji gelişimi ve birkaç yüz byte hiçbir şeydir. Yabancı ülkelerde batarya ömrünü nasıl azaltabileceği veya mobil internetin maliyetini nasıl artıracağı konusunda emin olabilirsiniz, ancak o zaman yine, kaydettiğiniz miktar gerçekten belaya değer mi?
katma yazar php_nub_qq, kaynak

Sayfaları yüklemek için tek bir işlevi yüklemek ve kullanmak üzere sayfanın adını alan bir işlev oluşturabilirsiniz. Ardından geri çağırma işlevinin aynı adda bir JavaScript dosyası (ortak bir init işlevi ile) yüklemesini sağlayın. Sevmek:

function loadPage( pageName ) {
  $('#dymanic-content').load( pageName +'.php', function() {
    $.getScript( pageName +'.js', function() {
      init();
    });
  });
}

Veya geri çağırma işlevi adını işleve iletebilirsiniz.

function loadPage( pageName, cb ) { 
 $('#dymanic-content').load( pageName +'.php', function() {
   $.getScript( pageName +'.js', function() {
     cb();
   });
 });
}

Bunu geri aramalar yerine vaatlerle de yapabilirsiniz.

0
katma
Bize
katma yazar user3142695, kaynak
Tamam. GetScript ve işlevini kullanmak için ya da sadece $ .getScript ("ajax/test.js") kullanmaktan bir fark var mı?
katma yazar user3142695, kaynak
Fikrini beğendim, ama ne yazık ki tamamen anlamıyorum. Lütfen, yukarıda gösterilen kodumla <.> example_1.js kodunun nasıl görünmesi gerektiğini gösterir misiniz? Anlamam daha kolay olurdu. Teşekkürler.
katma yazar user3142695, kaynak
Fakat bu JS dosyalarında hala temsil edilen etkinlikleri kullanmak zorundayım, değil mi? Bu aynı JS kodudur, doğru mu? Yeni bir içerik (ve yeni JS dosyası) yüklendiğinde kaldırmam gerekir mi?
katma yazar user3142695, kaynak
pagename.js dosyanızın üzerindeki kodda, söz konusu sayfa için yetkilendirilmiş etkinliklerinizin tümünü içerecektir. Böylece menü sayfası olsaydı, dosya yüklendikten sonra çağırdığınız bir işlevi içeren menu.js dosyasını yüklerdi ( init ya da cb yukarıdaki kodda). Bu işlev menüsü için tüm temsil edilen etkinlikleri eklemelidir.
katma yazar Gary Storey, kaynak
Yetkilendirilmiş etkinliklerinizi eklemek için üst öğeniz olarak dynamic-content öğesini kullanabilirsiniz.
katma yazar Gary Storey, kaynak
Listeleme şekliniz vaat ediyor (alternatif olarak bahsetmiştim). Her ikisi de işe yarayacak. Belgeler: api.jquery.com/jQuery.when
katma yazar Gary Storey, kaynak
Oh ve loadPage 'a yapılan her yeni aramada HTML’nin üzerine yazılacaktır.
katma yazar Gary Storey, kaynak

Web'in AJAX yoluna gidiyorsanız, PJAX adresini kullanmayı düşünün. AJAX web siteleri oluşturmak için savaşta test edilmiş bir kütüphanedir ve github'da kullanılmaktadır.

Aşağıdaki PJAX ile eksiksiz bir örnek:

HTML:

data-js attribute will be used to run our function, once the loading of scripts is complete. This needs to be different for each page.

data-url-js attribute contains the list of JS scripts to load.

<div id="content" data-js="vegetablesAndCars" data-urljs="['/js/library1.js','/js/vegetablesAndCars.js']">
    
    <div id="vegetables">
    </div>
    <div id="cars">
    </div>
</div>

Şablon: Tüm sayfalarınız yukarıda belirtilen iki özelliğe sahip #content div'yi kap olarak içermelidir.

JS:

App.js - This file needs to be included with every page.

/*
 * PJAX Global Defaults
 */
$.pjax.defaults.timeout = 30000;
$.pjax.defaults.container = "#content";

/*
*  Loads JS scripts for each page
*/
function loadScript(scriptName, callback) {
    var body = document.getElementsByTagName('body')[0];    
    $.each(scriptArray,function(key,scripturl){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = scripturl;
       //fire the loading
        body.appendChild(script);
    });
}

/*
*  Execute JS script for current Page
*/
function executePageScript()
{
    //Check if we have a script to execute
    if(typeof document.getElementById('content').getAttribute('data-js') !== null)
    {
        var functionName = document.getElementById('content').getAttribute('data-js').toString();
        if(typeof window[functionName] === "undefined")
        {
            var jsUrl = document.getElementById('content').getAttribute('data-url-js').toString();
            if(typeof jsUrl !== "undefined")
            {
                jsLoader(JSON.parse(jsUrl));
            }
            else
            {
                console.log('Js Url not set');
            }
        }
        else
        {
            //If script is already loaded, just execute the script
            window[functionName]();
        }            
    }
}


$(function(){
    /*
     * PJAX events
     */
    $(document).on('pjax:success, pjax:end',function(){
        //After Successful loading
        //Execute Javascript
        executePageScript();
    }).on('pjax:beforeSend',function(){
        //Before HTML replace. You might want to show a little spinning loader to your users here.
        console.log('We are loading our stuff through pjax');
    });  
});

vegetableAndCars.js - This is your page specific JS file. All your page-specific JS scripts will have to follow this template.

/* 
 * Name: vegetablesAndCars Script
 * Description: Self-executing function on document load.
 */
(window.vegetablesAndCars = function() {
    $('#cars').on('click',function(){
        console.log('Vegetables and cars dont mix');
    });
    $('.navigation a').on('click',function() {
        //Loads our page through pjax, i mean, ajax.
        $.pjax({url:$(this).attr('href')});
    });
})();

Daha fazla açıklama:

  1. Global JS namespace penceresine bir fonksiyon adı eklenmiştir, böylece fonksiyon scriptleri yeniden yüklemeden yeniden çalıştırılabilir. Anladığınız gibi, bu işlev adının benzersiz olması gerekir.

  2. İşlev kendiliğinden çalıştırılabilir durumdadır, böylece kullanıcı AJAX kullanmadan sayfaya erişirse kendi kendine çalışacaktır (yani doğrudan sayfa URL'sine gider).

Soruyorsun, peki ya HTML öğelerimde 'a sahip olduğum tüm bu bağlamalar? Öyleyse, unsurlar tahrip edildikten/değiştirildikten sonra, bunlara bağlanan kod tarayıcı tarafından toplanan çöp olacaktır. Böylece hafıza kullanımınız çatıdan fırlamaz.

Ajax tabanlı bir web sitesinin uygulanmasına yönelik yukarıdaki model şu anda müşterimin bulunduğu yerde üretiliyor. Bu yüzden tüm senaryolar için çok test edildi.

0
katma
Gezinme, web sitesinin ana gezinmesi olduğundan, yazıdaki gibi HTML işaretlemesini kullanıyorum. Böylece bölüm elemanı içerik için, başlık elemanı navigasyon için kullanılır. Bunun değişmesinden kaçınmak istiyorum. Bunu #content div ile saracak olsaydım, sayfanın body-elementini kullanabilirdim. Fakat bu gerçekten nasıl kullanılması gerektiği?
katma yazar user3142695, kaynak
Bana performanstan biraz bahseder misiniz?
katma yazar user3142695, kaynak
content div basit bir örnektir. Ancak, içeriği yeniden yüklemek için gövdesini kullanıyorsanız, tüm sayfanın değiştirileceği anlamına gelir. İyi bir çözüm değil, kullanıcı yükleme yolunda fikirleri değiştirmeyi seçerse ve başka bir AJAX bağlantısını tıklatırsa. İlk kütüphaneler yüklendikten sonra performans hızlıca artıyor. Sayfanın yüklenmesi 1 saniye sürer. Web siteme bir önyükleyici ekledim, böylece kullanıcı uygulamanın başlangıçta bileşenlerini yüklüyormuş gibi hisseder ve daha sonra her kütüphaneyi aşamalı olarak yüklemek için her eylemi yavaşlatmaktan daha bağışlayıcıdır.
katma yazar Mysteryos, kaynak

$ ('# navigasyon'). On ('some-event', '.red', function() {}); Olayı #navigation öğesine bağlarsınız (bunu $ ('# navigasyon'). Data ('events') ile görebilirsiniz), ancak .red -içinde ki, yeni js-logic ile yeni öğeler yüklediğinizde yeni ve eski ciltlemeler elde edersiniz.

Bu durumda mümkünse, birlikte kaldırılması/yeniden yüklenmesi gereken tüm olaylar için $ ('# navigation .red'). Some-event (function() {}); gibi düz bir ciltleme kullanın elemanları ile.

0
katma