jQuery nasıl daha modüler kodlanır?

Question

Bir çerçeve (Django) kullanıyorum ve HTML yazma konusunda çok fazla esnekliğe sahibim. JQuery yazmanın yolunun daha iyi olabileceğini düşünüyorum.

Örneðin, örneðin: sitedeki bir dðme düðmesi her yerde görünür, daha güzel bir düðmeye çeviririz (orijinal deðerleri ve davranýþlarý yerine getirir ve temelde deðiþtirir). Bu sadece bir örnektir, ancak siteye yerleştirilmiş html snippet'lerinin olduğu ve kapsayıcı yapının Javascript tarafından manipüle edilmesi gereken sayfada ne olduğu konusunda hiçbir fikri olmadığı bir çok kullanım durumu vardır. Yani 2 bölüm soru: sadece 50 (sadece sarılmış bir seti arar jQuery eklentisi) üzerinde kullanılabilecek 100 sayfa üzerinde bir şey yürütmek için verimli ve jQuery ile sadece gerçekten bir modüler yaklaşımı varsa, nasıl olurdu Ben bu konuda giderim?

Answer 1

Uygun önbelleğe alma ile, tek bir minified .js dosyasının olması kesinlikle daha verimlidir. Sadece bir kez yüklenecek ve sadece sayfa başına 1 çağrı olacak. Kodunuzu modüle ederseniz, daha fazla istekte bulunacaksınız, buna ek olarak, herhangi bir zaman, ekstra js'yi dling etmeyeceksiniz, yine de önbelleğe alınacaktır. Sorunuzdaki temel sorun Modular programming ile ilgili ise

Answer 2

. Şu anda Douglas Crockford's "JavaScript: The Good Parts" çalışıyorum. Bu kitaptan

:

Fonksiyonlar JavaScript temel modüler ünite bulunmaktadır. Kod yeniden kullanımı, bilgi saklaması ve kompozisyon için kullanılan . Aslında tüm jquery yapısı için yolumu

/* only one global variable to encapsulate all your code */ 

var MAINOBJ= {}; 

jQuery(document).ready(function($) { 

    /* modules */ 

    MAINOBJ.formStuff = { 
     results : [], 
     myFunction: function(){ 
      // code 
      results = MAINOBJ.ajaxStuff.loadResults(); 
      // code 
     } 
    } 

    MAINOBJ.ajaxStuff = { 
     results : [], 
     loadResults: function(){ 
      // code 
      return results; 
     } 
    } 

    /* DOM traversing */ 

    $('#myForm').submit(function(e) { 
     e.preventDefault(); 
     MAINOBJ.formStuff.myFunction(); 
    }); 
}) 

geçerli: javascript tüm fonksiyonlar nesnelerdir olarak

Yani, bu şekilde modül olarak üst düzey yapılarını tanımlamak için hazır bilgi gösterimi nesne kullanabilirsiniz Aynı kapsamı yabancı javascript koduyla paylaştığımız wordpress/joomla vb.

Answer 3

İhtiyacınız olan şey: http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html. Ama yine de çok deneysel. Şu an için Google'ın kapatma araçlarına bakın.