jQuery 编程风格？答案

【问题标题】：jQuery programming style?jQuery 编程风格？
【发布时间】：2011-06-02 02:34:42
【问题描述】：

我最近被要求在一个我以前没有工作过的网站上修复一些东西。我并没有真正使用过 jQuery，但我想我会看看是否可以修复它。

我已经基本解决了这个问题，但我仍然对他们选择构建这个网站的方式感到震惊。

在文档加载时，它们将每个锚标记和表单元素的 click() 方法替换为相同的海量函数。单击后，该函数会检查标签是否具有几个不同属性之一（甚至是非标准属性），并根据存在的属性及其值执行各种不同的任务。

一些超链接上有一个名为“ajaxrel”的属性，这使得 click() 函数查找另一个（隐藏的）超链接，其 ID 由 ajaxrel 属性指定，然后调用 click() 函数以获取另一个超链接（也被同一个 click() 函数修改）。

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

整个网站的调试都是一场噩梦。这是标准的 jQuery 实践吗？这种导航方案看起来很糟糕。其他人实际上以这种方式使用jQuery吗？我想开始将它整合到我的项目中，但是看着这个网站让我很头疼。

这是超链接的 click() 函数：

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 让几乎任何人都可以轻松使用 Javascript……但这有明显的缺陷。有代码示例吗？
是的，不幸的是，jquery 编程变得太流行了，所以我们聚在一起决定混淆所有未来的代码，以保障工作安全。对不起老兄！
嗯 - 我在那里发布了其中一个函数 - 不过它相当长。
这个问题的格式不正确。 php缩进与jquery无关。对于 javascript，抱怨到底是什么：他们将客户端信息存储在属性中（而不是在哪里，确切地说？）或者它只是您所指的长方法？
它应该看起来更像这样stackoverflow.com/questions/3272384/…

标签： jquery coding-style replace identity

【解决方案1】：

绝对不是。您所描述的不是标准的 jquery 实践，但似乎是由于对 javascript 一无所知的人的设计选择不佳。

【讨论】：

【解决方案2】：

使用 id="" 作为链接，然后使用 jQuery 格式的 click(function() { ... });是最简单的阅读方式。

<a id="something" href="#">something here to click on</a>

<script type="text/javascript" language="javascript">
$(function () {
                 $('#something').click(function () { 
    ...
                 });
                 $('#somethingelse').click(function () { 
    ...
                 });
}
</script>

如果有人在加载 jQuery 之前点击链接（或元素），此方法不会产生错误。然后就可以在页面底部加载jQuery，页面渲染无延迟。

【讨论】：

为了页面可读性，请将 $(function () { ... } 放在靠近元素的位置。除非有充分的理由不能这样做。

【解决方案3】：

他们用 jQuery 做的事情——用标签上的新属性自定义行为——并不是那么疯狂，但他们这样做的方式很奇怪。

我更喜欢将 不同的 函数附加到不同的标签，具体取决于属性。因此，例如，如果带有 ajaxrel 属性的链接应该表现不同：

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

这至少可以更容易地理解代码。（一个问题是如果链接具有多个这些属性，它们应该如何工作。）

【讨论】：

【解决方案4】：

这似乎很难维护。我自己喜欢 jQuery 插件，并且总是喜欢在必要时将代码推送到插件中。

这绝对不是我开发网站和jQuery的方式，请不要拖延！

【讨论】：

【解决方案5】：

您所描述的不是 Jquery 标准。如果你在你的 Jquery 脚本上加上一行注释，任何傻瓜都能理解你的逻辑，更不用说你了……

【讨论】：

【解决方案6】：

看起来很糟糕，但我不想急于谈论风格。痛苦大多不在使用的风格上，因为编码风格取决于依赖关系、需求、API 等……痛苦几乎总是来自糟糕的文档。至于自定义 HTML 属性，它们是有效的，例如：data-ajaxrl

【讨论】：

【解决方案7】：

在另一个线程中，有一些关于 jQuery 使用风格的优点：How can I organize the jQuery code style to avoid confusion by so many brackets and so many nests? Any good sample?

在更基本的层面上，您可以查看 jQuery 核心样式指南：http://docs.jquery.com/JQuery_Core_Style_Guidelines

【讨论】：