как я могу написать этот код jQuery надлежащим образом.

Question

Месяц назад я начал писать свой первый серьезный тяжелый веб-сайт переднего плана, идея заключалась в создании пользовательского веб-сайта с 1 страницей, который вмещал более 100 страниц.

так что URL всегда будет таким же, но каждый раз пользователь нажимает любую ссылку на основе иерархии навигации, он будет анимировать, загружать данные с помощью ajax-вызова и добавлять хеш-код в URL-адрес, который можно использовать для обмена ссылками, я закончил использовать что-то вроде это:

ссылки:

<a data-alias="#treasurysales" rel="get_content.php?id=62" data-content="vert_21_63" data-target="vert_21_63_tar" href="">(Treasury Sales) 

контейнер:

<li id="vert_2_19_tar" class="hs-home-li" style="display: none;"> 

вот как выглядит мой JS как:

$(document).ready(function(){ 

     //hash handling 
     $("a[data-alias],li[data-alias]").live("click",hashHandler); 
     $("a[rel *= php]:not('.apply,a[data-direction],.bod')").live("click",ajaxHandler); 
     $(".static-link").live("click",static_link) 

     //main navigation 
     $(".horizontal-scroll > li").not(":first-child").hide(); 
     $(".left-nav ul li a").live("click",vertNav); 
     $(".tab-nav ul li a[data-target]").live("click",horzNav); 
     $(".small",".hs-home-li").hide(); 
     $(".small:first",".hs-home-li").show(); 
     $(".tab-sub-nav a").live("click",tabNav); 
       // around 100 lines 


}) 

вот как мой function.js выглядит

var vTarget, 
lastvTarget = $("site-vertical-scroll>li:first"), 
hTarget, 
lasthTarget, 
tabTarget, //around 15-20 var 
var hashHandler = function(){}; 
var hash_location = function(){}; 
var hash_location = function(){}; //around 100 function 

после достижения 1000 + строки JS я понял, что это не так, чтобы сделать это правильно. мой код очень зависит от dom, плотно соединенный, неподъемный.

Я прочитал несколько книг по oop js, шаблону, тестированию и лучшей практике, но мне действительно не хватает в архитектуре моего js.

я по достоинству оценят много, если кто-то может сказать мне, как писать выше код в собственно ООП способом

Answer 1

Возможно, вы пожелаете write it as a plugin. Для приложения у меня есть несколько «плагинов», которые представляют собой полное поведение конкретной страницы. Я склонен следовать этой структуре для страниц с большим количеством функций, с которыми может взаимодействовать другой контент.

(function($) { 
    var $m = $.mycompany||{}; 

    $m.myPage = new function(element, options) { 
     this.$element = $(element); 
     this.options = options; 

     // i initialize everything here 
    }; 

    $m.myPage.prototype = { 
     someMethod: function() { 
      // these are what i consider "API" methods for my plugin. other components may need to interact with functionality of this plugin, and this is how I expose it. 
     } 
     // etc. 
    } 

    $m.myPage.defaults = {} // defaults on this object 

    $.fn.myPage = function(options) { 
     options = $.extend({}, $m.myPage.defaults, options); 

     this.each(function() { 
      var $this = $(this); 
      if ($this.data('myPage')) return; // plugin already initialized 
      $this.data('myPage', new $m.myPage(this, options)); 
     }); 
    } 
})(jQuery); 

Затем на странице, я мог бы сделать:

$(document).myPage({myOption:'whatever'}); 

Другие функции могут получить доступ к этому плагин через

$(document).data('myPage').someMethod(); 

Answer 2

Рассмотрим структуру как Backbone.js, которая поможет вам структурировать ваш код и предоставить вам несколько важных вещей:

• управления маршрутизации
• управления событий обычно на уровне «вида»
• управления данного с помощью моделей
• и привязка моделей к пользовательскому интерфейсу через шаблоны