Question

一个月前，我开始编写我的第一个严肃的前端重型网站，其想法是创建一个自定义cms驱动的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这样的框架，它将帮助您构建代码并为您提供以下几个重要的事项：

路由管理
事件管理通常位于“查看”图层
通过模型进行数据管理
并通过模板将模型绑定到UI

我怎么能以正确的方式编写这个jquery代码

2 个答案: