jQuery编程风格？ [英] jQuery programming style?

问题描述

我最近被要求修复我以前没有工作的网站上的东西。我没有真正使用jQuery这么多，但我想我会看看，看看是否可以解决它。

I was recently asked to fix something on a site which I haven't worked on before. I haven't really worked with jQuery that much, but I figured I'd take a look and see if I could fix it.

我设法大部分清除

在文档加载时，它们替换了每个锚点标签的click（）方法并且形成具有相同大块函数的元素。单击时，该函数将检查标记是否具有几个不同属性之一（非标准属性，甚至），并根据存在的属性及其值，执行各种不同的任务。

On document load, they replace the click() method of every anchor tag and form element with the same massive function. When clicked, that function then checks if the tag has one of a few different attributes (non-standard attributes, even), and does a variety of different tasks depending on what attributes exist and what their values are.

一些超链接在它们上面有一个称为ajaxrel的属性，它使click（）函数寻找具有由ajaxrel属性指定的ID的另一个（隐藏）超链接，然后调用click ）函数为该其他超链接（也被相同的click（）函数修改）。

Some hyperlinks have an attribute on them called 'ajaxrel', which makes the click() function look for another (hidden) hyperlink with an ID specified by the ajaxrel attribute, and then calls the click() function for that other hyperlink (which was also modified by this same click() function).

在服务器端，所有的php文件都很长，没有缩进。

On the server side, all the php files are quite long and have absolutely no indentation.

这个整个网站一直是一个噩梦来调试。这是标准的jQuery实践吗？这种导航方案似乎可怕。有没有人真的使用jQuery这种方式？

This whole site has been a nightmare to debug. Is this standard jQuery practice? This navigation scheme seems terrible. Does anyone else actually use jQuery this way? I'd like to start incorporating it into my projects, but looking at this site is giving me a serious headache.

这是超链接的click（）函数：

Here's the click() function for hyperlinks:

function ajaxBoxA(theElement, urltosend, ajaxbox, dialogbox) {

if ($(theElement).attr("href") != undefined)
      var urltosend = $(theElement).attr("href");
if ($(theElement).attr('toajaxbox') != undefined)
      var ajaxbox = $(theElement).attr('toajaxbox');

// check to see if dialog box is called for.
if ($(theElement).attr('dialogbox') != undefined)
      var dialogbox = $(theElement).attr('dialogbox');

var dodialog = 0;
if (dialogbox != undefined) {
    // if dialogbox doesn't exist, then flag to create dialog box.
    var isDiaOpen = $('[ajaxbox="' + ajaxbox + '"]').parent().parent().is(".ui-dialog-container");
    dodialog = 1;
    if (isDiaOpen) {
        dodialog = 0;
    }
    dialogbox = parseUri(dialogbox);
    dialogoptions = { close: function () { 
//          $("[id^=hierarchy]",this).NestedSortableDestroy();
        $(this).dialog('destroy').remove() 
    } };
    for ( var keyVar in dialogbox['queryKey'] )
              eval( "dialogoptions." + keyVar + " = dialogbox['queryKey'][keyVar]");
};


$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");
$('#TB_load').show();
if (urltosend.search(/\?/) > 0) {
    urltosend = urltosend + "&-ajax=1";
} else {
    urltosend = urltosend + "?-ajax=1";
}
if ($('[ajaxbox="' + ajaxbox + '"]').length) {
  $('[ajaxbox="' + ajaxbox + '"]').each( function () { $(this).empty(); });
};
$.ajax({
    type: "GET",
    url: urltosend,
    data: "",
    async: false,
    dataType: "html",
    success: function (html) {
        var re = /^<toajaxbox>(.*?)<\/toajaxbox>+(.*)/;
        if (re.test(html)) { 
            var match = re.exec(html);
            ajaxbox = match[1];
            html = Right(html, String(html).length - String(match[1]).length);
        }
        var re = /^<header>(.*?)<\/header>+(.*)/;
        if (re.test(html)) { 
            var match = re.exec(html);
            window.location = match[1];
            return false;
        }
        if (html.length > 0) {
            var newHtml = $(html);
            if ($('[ajaxbox="' + ajaxbox + '"]').length) {
                $('[ajaxbox="' + ajaxbox + '"]').each( function () { $(this).replaceWith(newHtml).ready( function () {
                    ajaxBoxInit(newHtml)
                    if (window.ajaxboxsuccess) ajaxboxsuccess(newHtml);
                }); });
                if ($('[ajaxdialog="' + ajaxbox + '"]').length = 0) {
                    if (dodialog) $(newHtml).wrap("<div class='flora ui-dialog-content' ajaxdialog='" + ajaxbox + "' style='overflow:auto;'></div>").parent().dialog(dialogoptions);
                }
            } else {
                $("body").append(newHtml).ready( function () {
                    ajaxBoxInit(newHtml);
                    if (window.ajaxboxsuccess) ajaxboxsuccess(newHtml);
                });
                if (dodialog) $(newHtml).wrap("<div class='flora ui-dialog-content' ajaxdialog='" + ajaxbox + "' style='overflow:auto;'></div>").parent().dialog(dialogoptions);
            }
        }
        var rel = $(theElement).attr('ajaxtriggerrel');
        if (rel != undefined) $('a[ajaxrel="' + rel + '"]').click();
        tb_remove();
        return false;
    },

    complete: function () {
        $("#TB_load").remove();
        }
});
return false;

}

推荐答案

他们在使用jQuery做什么 - 在标签上自定义带有新属性的行为 - 并不那么疯狂，但是它们的做法很奇怪。

What they're doing with jQuery — customizing behavior with novel attributes on tags — isn't so crazy, but the way they did it is rather odd.

我更喜欢将不同的函数附加到不同的标签，具体取决于属性。因此，例如，如果与 ajaxrel 属性的链接行为不同：

What I would prefer is to attach different functions to different tags, depending on attributes. So, for instance, if links with the ajaxrel attribute should behave differently:

$('a[@ajaxrel]').click(function() {
    // handle click according to ajaxrel attribute
});

这将至少使代码更容易。 （一个问题是链接应该如何工作，如果他们有一个以上的属性。）

This would at least make grokking the code easier. (The one concern would be how links should work if they have more than one of these attributes.)

这篇关于jQuery编程风格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！