jQuery编程风格？
我最近被要求在我以前没有工作的网站上修改一些东西。 我还没有真正使用过jQuery，但我想我会看一看，看看能不能解决它。
我已经设法解决了这个问题，但我仍然对他们选择建立这个网站的方式感到震惊。
在文档加载时，它们用相同的大量函数替换每个锚标记和表单元素的click（）方法。 单击时，该函数将检查标记是否具有几个不同属性（非标准属性，偶数）中的一个，并根据存在的属性和它们的值来执行各种不同的任务。
一些超链接在它们上面有一个名为’ajaxrel’的属性，它使click（）函数查找具有由ajaxrel属性指定的ID的另一个（隐藏）超链接，然后调用该另一个超链接的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("
"); $('#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 = /^(.*?)+(.*)/; if (re.test(html)) { var match = re.exec(html); ajaxbox = match[1]; html = Right(html, String(html).length - String(match[1]).length); } var re = /^(.*?)+(.*)/; 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("").parent().dialog(dialogoptions); } } else { $("body").append(newHtml).ready( function () { ajaxBoxInit(newHtml); if (window.ajaxboxsuccess) ajaxboxsuccess(newHtml); }); if (dodialog) $(newHtml).wrap("").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做的事情 – 用标签上的新颖属性定制行为 – 并不是那么疯狂，但他们这样做的方式却相当奇怪。
我更喜欢的是根据属性将不同的function附加到不同的标签。 因此，例如，如果具有ajaxrel属性的链接的行为应该不同：
$('a[@ajaxrel]').click(function() { // handle click according to ajaxrel attribute });
这至少可以使代码更容易。 （一个问题是如果链接具有多个属性，链接应该如何工作。）
绝对不。 你所描述的并不是标准的jquery练习，但似乎是由于那些对javascript一无所知的人的糟糕设计选择。
使用id =“”作为链接，然后使用jQuery格式化click（function（）{…}）; 是阅读它的最简单方法。
something here to click on
如果有人在加载jQuery之前单击链接（或元素），则此方法不会生成错误。 然后jQuery可以加载到页面的底部，页面呈现没有延迟。
这似乎难以维持。 我自己喜欢jQuery插件，并且总是喜欢在必要时将代码插入插件。
这绝对不是我开发网站和jQuery的方式，请不要推迟！
你所描述的不是Jquery标准。 如果你在Jquery脚本上放置一行注释，Any虚拟可以理解你的逻辑，更不用说你……
这看起来很糟糕，但我不想急于谈论风格。 痛苦主要不在于使用的风格，因为编码风格取决于依赖性，要求，API等……痛苦几乎总是来自糟糕的文档。 至于自定义HTML属性，它们是有效的ex： data-ajaxrl
在这个其他线程中有一些关于jQuery使用风格的好点： 如何组织jQuery代码样式以避免被如此多的括号和如此多的嵌套混淆？ 有什么好样品吗？
在更基础的层面上，您可以查看jQuery核心样式指南： http ： //docs.jquery.com/JQuery_Core_Style_Guidelines