Question

我正在构建一个使用jQuery进行Modals和表单验证的网站。我发现自己能够相当容易地编写代码，但它不是非常模块化的，我发现自己重写了很多代码。我有CS背景，但我对jQuery很新。我知道jQuery具有面向对象的功能，但是我还没有完全理解jQuery中是如何完成的，所以我的代码看起来非常程序化，我希望能够更好地模块化它。

举例来说：

$("#show").click( function() {
    $("#view").fadeIn(500);
    return false;
});
$("#view .popup-close a").click( function() {
    $("#view").fadeOut(500);
    return false;
});

我有一个类似的声明列表，我有Modals。我将如何以更模块化的方式编写此声明？

Answer 1

如果您想在整个网站中将其转换为可重复使用的插件，那就太难了。

我建议将插件/编写指南改为：http://docs.jquery.com/Plugins/Authoring

以下是关于如何对弹出窗口进行插件的开始：

(function ($) {
var methods = {
    init: function(options){},
    fadeIn: function(target, speed){
        //fade in logic here
        this.fadeIn(speed);         
    },
    fadeOut: function(target, speed){
        //fade out logic here
        this.fadeOut(speed);   
    }
};
$.fn.popup = function(method){
    // Method calling logic -straight from jquery plugin documentation
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.popup' );
    }  
};
})(jQuery);

这是一个有效的例子：http://jsfiddle.net/HMX9J/

Answer 2

这里有一些关于使用Jquery增加模块性的信息：

使用"this"关键字
使用data objects跟踪处理程序中所需的状态或额外信息
智能地设计你的html，并保持选择器的广泛性
使用toggle
自己编写plugins

例如，假设您的#show元素也是一个链接，并且您的html看起来像这样：

<div class="myButtons">
    <a id="show" data-fade="show"></a>
    <a id="close" data-fade="fade"></a>
</div>

你可以做这样的事情而不是多个处理程序：

$('.myButtons a').click(function(){
    var func = $(this).data("fade");

    if (func === "show"){
        $("#view").fadeIn(500);
    }
    else if(func === "hide"){
        $("#view").fadeOut(500);
    }
});

有关如何使上述代码更加模块化的确切答案，请查看jquerys toggle（），但总体而言，您需要考虑这些其他方法。当你加入这些其他元素时，你可以获得更多的力量。

我应该写一个插件还是只使用一个函数？

2 个答案: