AJAX uygulamalarında kod ayırma

5 Cevap php

AJAX uygulamalarında kod ayrılmasını sağlamak için bazı stratejiler nelerdir?

Ben güzel bir AJAX ön sona istiyorum bir PHP uygulama inşa ediyorum. Ben uzun zamandır benim mantık ve görüntü kod arasındaki mesafeyi iyi korumak emin olmak için benim PHP kodu çiftleşmiş çeşit kullanmayı öğrendim, ama sorun ön ucunda JavaScript kodu ile bunu yapmak için iyi bir yol bulma yaşıyorum. Ben XML veri ve kolay DOM manipülasyon getiriliyor yapmak için jQuery kullanıyorum, ama mantık ve düzen kodu intermix başlıyor bulma yaşıyorum.

Asıl sorun o zaman reformasyon ve yardımcı metin ona (yön ve benzeri) sarılı zorundadır gereken arka ucundan XML verilerini almak olduğunu. Ben zaten biçimlendirilmiş HTML üzerinden gönderme düşündüm, ama bu backend kapsamlı elden gerektirir, ve benim kendi ile geldi ne daha iyi bir yolu olmalı.

5 Cevap

  • Muhtemelen gizli bir elemanı içinde, HTML sayfanızda şablonları yazmak.
  • AJAX çağrıları ile veri almak, i JSON kullanımı daha kolay bulmak, böylece 'reformasyon' XML zorunda değilsiniz, sadece veri bulunuyor.
  • HTML üretmek ve görüntülenen sayfanın içine eklemek için veri şablonu uygulamak.

Bazı jQuery çiftleşmiş eklentileri kontrol: jsRepeater, jTemplates, noTemplate, Template

Ben (here ve here) son zamanlarda benzer sorular sorarak oldum ve ben yardımcı olabilecek bir kaç şey buldum. Ben UI etkileşim koduna zorla ile buluyoruz aynı sorunları anlamak.

1: işlevselliği için "sınıflar" yazın ve bu size kalmış, element ya da elemanın kendisi için kimlik olsun, constuctor değiştirmek üzere elemanları geçmek.

2: sayfa veya denetim bağlı olarak değişebilir bölümleri için "olayları" yazın. Olaylar, seni gerçek işlevlerine ile yazabiliyorlar sadece tutucu yöntemleri anlamına gelir. Örnekler için So ...

var FilterControl = function() {

    //the "event"
    var self = this;
    this.onLoadComplete = function() { };

    //This is the command that calls the event
    this.load = function() {
        //do some work
        ...

        //Call the event
        self.onLoadComplete();
    };
};

//somewhere else in the code
var filter = new FilterControl();
filter.onLoadComplete = function() {
    //unique calls just for this control
};

3: daha Javascript dostu bir IDE alın. I love Benim Visual Studio, ancak Apanta gerçekten güçlü bir JavaScript IDE (bu bir File References iletişim içine. JS dosyaları sürükleyin olanak vardır olağanüstü bir IDE yapar o yüzden up Javascript bölmek zor neden ana nedenlerinden biri çözme tüm bu JavaScript belgeler için intellisense olsun!

Sanırım bir tek sayfa stil AJAX uygulama bahsediyoruz özellikle belirli görevlere yönelik Singletons sınıfları kullanmak için, ben ne sorun ama ne yapabilirim olsun% 100 emin değilim.

var XMLFormatter = function(){
    /* PRIVATE AREA */

    /* PUBLIC API */
    return {
        formatXML : function(xml){
            /* DO SOMETHING RETURN SOMETHING */
        }
    }
}();

Ne sol böylece gibi sayfanın üzerinde herhangi denebilecek bir statik XMLFormatter sınıf ...

function useClass(){
    $('#test').update(XMLFormatter.formatXML(someXML))
}

Bu fonksiyon, AJAX istekleri bir geri olarak kullanılabilir. Ben sayfa yüklendiğinde çağrılan bir init yöntemi ile bir nesne döndürür taht Sayfa sınıf oluşturarak sayfa mantık için bu yöntemi kullanın. Init yöntem daha sonra sayfama çeşitli etkinlikler ve malzeme verdiği ve elementler bulunuyor. Bu zaman ve para varsa yaklaşım okuma Pro JavaScript Design Patterns iyi değer hakkında konuştuk olduğunu.

Bu Javascript en iyi uygulama yaklaşımlar genellikle Java uyarlanan sadece olanlardır diğer dillerde ve genellikle halklarına göre oldukça farklı olduğunu akılda da değer taşıyan. Bu OK iken kendisine Javascript kullanarak değil tam bir potansiyel. Javascript nedeniyle tahrik oldukça olay olduğunu unutmayın o UI etkileşimi yakınlık ve diğer kod ile bazı olay kod karışarak bulacaksınız. Crockfords web sitesi (http://javascript.crockford.com/), bazı iyi uygulama yazılar artı diğer yararlı ipuçları bir dizi vardır.

Ben doğru soruyu anlamak, aynı kod bloğunda HTML / javascript bir sürü yaşıyorsanız, ve onları ayırmak istiyorum.

Ben temiz bir ayrılık olması için çeşitli hileler kullanmak istiyorsunuz:

  • Eylemler grup başına komut / fonksiyonları içeren Bir JS dosyası.
  • Tüm ortak fonksiyonları içeren tek bir JS dosyası (XML ayrıştırıcı, araçlar ...)
  • Bir JS (tembel-) yükler özel komut dosyası (burada madde # 1) dosya ve belge yükleme üzerinde akımlar elemanları için herhangi bir etkinlik eklemek.

Asıl sorun üretilen kod on-the-fly fonksiyonları / olayları bağlamak olacaktır. IIRC, JQuery bu ele ama emin olamaz.

Umarım yardımcı olur.

Ben her zaman, gerçekten, örneğin, bir seçim listesi için veri ihtiyacı olmadıkça AJAX geriçağırımlarının gelen HTML dönmek için çalışacağız yüzden istemci üzerinde biçimlendirme sevmiyorum.

Bunun nedeni istemci üzerinde HTML ve hiçbir şey oluşturmak için sunucu (ASP) zengin bir araç seti olması. Ben biçimlendirmek istediğiniz veriler için şablon tutan bir 'dinamik kontrolünü' içeren sunucu üzerinde bir gümrük 'dinamik sayfa kullanabilirsiniz. Bu denetimin yalnızca içeriği sayfasından yayılır.

AJAX çağrıları web hizmeti sadece gelmez: Execute (bazı-dinamik-sayfa) döner. Web servisine argümanlar HttpContextve torbaya veya sorgu dizesi ya dinamik sayfasına geçirilir.

Ben daha kolay bir istemci şablon veya xml transformatör kullanarak daha sürükle ve bırak kontrollerini kullanarak sunucu üzerinde yeni bir dinamik sayfa şablonu oluşturmak için bulabilirsiniz. Belki onlar acıyı hafifletmek - Gerçi herhangi bir ya da Jxxxx çiftleşmiş araçları kullanılmış değil.

Bu yöntemi kullanarak, normalde aynı ayrımı (MVP / MVC, veya sadece kod-arkasında) kullanabilirsiniz.

etiketler