使用 JQuery 而不是直接使用 JavaScript 可以节省多少行代码？

Question

也许更熟悉该主题的人可以帮助我简化或正确写出问题。我们正在寻找 JQuery 甚至其他 JS 框架与直接 JavaScript 的使用进行比较的指标。我不相信代码行度量，从来没有，但我无法想到其他任何东西来衡量它。

Function Points (jquery) = Jquery-LOC
Function Points (JS) = JS-LOC

Answer 1

要使用标准 javascript 附加点击处理程序，您可以尝试如下操作：

var myelement = document.getElementById("clickme");
function myClickHandler (evt) {
  var evt = evt || event; // ie uses a global instead of
                          // passing an object as a param
  (evt.target || evt.srcElement).style.width="110px";

}
if (myelement.addEventListener) {
   myelement.addEventListener("click", myClickHandler, false);
} else if(myelement.attachEvent) {
   myelement.attachEvent("onclick", myClickHandler);
} else if(typeof myelement.onclick === "function") {
    (function () {
      var oldfunc = myelement.onclick; 
      myelement.onclick = function (evt) {
          var evt = evt || event;
          oldfunc(evt);
          myClickHandler(evt);
      }
    })()
} else {
   myelement.onclick = myClickHandler;
}

或尝试使用 jquery 执行类似的操作

jQuery("#clickme").click(function(evt){ jQuery(evt.target).css("width",110); });

您可能会说，每次要分配点击处理程序时编写第一个示例代码是一件愚蠢的事情。为什么不将其重构为自己的标准函数并重用呢？那么你就有了一个可以调试的核心函数，而无需在发现错误时重写每个实例。

这将是一个非常好的论据，而这正是 jquery 这样的库的意义所在。通过不编写这个冗长的样板文件可以节省时间，如果您希望代码跨浏览器工作，那么这是绝对必要的。无需调试即可节省时间。您可以节省时间 - 如果您确实需要调试它，您只需修补 jquery 中的一个函数并为下一版本提交错误报告。如果事件绑定代码有问题，那么只有一个人需要更改一点代码，而不是成千上万的人需要更改数百万位代码。当有人指出你应该首先测试 addEventListener 时，这一点就变得毫无意义，因为 jQuery 已经做了既定的“正确”事情。如果没有，它将在下一个版本中出现。

jQuery 不会帮助你解决真正困难的领域特定问题，但为了磨练日常的 dom 操作，最好使用库函数，而不是试图“接近金属”。有太多跨浏览器的碎片，还有太多愚蠢冗长的 dom API，而且一遍又一遍地解决已经解决的问题太愚蠢了。

你需要某种类型的库（不一定是 jquery）才能保持理智。

现在您到底节省了多少时间和精力？谁知道？这是无法估量的。您必须绑定事件处理程序多少次？您需要在一个简单函数中执行 jQuery 提供的其他操作多少次？一个人强烈依赖另一个人。

如果您找到了衡量程序员生产力的方法，请告诉我们。我想我们都会非常感兴趣。无论如何，从这些客观事实和我们个人的主观经验来看，我们知道这可能是相当长的时间。

Answer 2

您对代码行度量的怀疑是正确的，尽管假设您不考虑 jquery 本身，它将节省大量的新代码行。

更重要的是，它将减少您必须在 5 个左右的浏览器上手动编写和测试的 DOM-soup 代码量。它可以节省大量时间，并减少大量错误。

Answer 3

这取决于你写的是什么。想要更精确吗？正好 12 行。

Answer 4

“节省时间”指标与其他指标一样好。

使用 jQuery，你可以写得更少（我的意思是这甚至是 jQuery 的座右铭！），但 LOC 是一个荒谬的衡量标准。

我使用 jQuery 的原因是为了浏览器兼容性。如果我不必自己写，显然可以节省时间。

Answer 5

开发人员的生产力如何？找到支持代码库的人有多容易。

Answer 6

使用 JQuery 或其他 JavaScript 库，您的应用程序将具有更多的功能点和更多的代码行。为什么？因为在开始使用这些库之前，您将可以轻松地完成一些您认为不可能或不可行的事情。这将鼓励您编写更多功能，而不是像从头开始编程那样惩罚您的尝试。

他们就是那么好。

Answer 7

它的数量与一根绳子的长度相当。

Answer 8

我也不认为 LOC 是一个非常适用的指标，但是能够编写诸如 $('#my_id') 与 document.getElementById('my_id') 之类的东西> 从长远来看，即使在短期内也会产生巨大的影响。

Answer 9

如果没有上下文，这个问题基本上毫无意义。

如果您使用 jQuery 在 4 行中完成一些原本需要 20 行的操作，那么您会因为添加（在版本 1.3.2 上）4376 行 jQuery 来节省 16 行您自己的代码而失败。

另一方面，如果您使用 jQuery 节省了 9000 行代码，那么您就会获得净收益。

如果您需要三个月的时间来学习编写这 16 行所需的内容，那么为了节省 16 行而花费 4376 行甚至可能是值得的。或者，也许值得花三个月的时间来学习足够的知识，以避免写 9000 行，而 20 行就可以了。

我认为你需要一个更复杂的指标。

Answer 10

我知道这是一个老问题&这不是一个非常重要的问题，但是，让我添加我的OP。看看 Brenton 的例子：

jQuery("#clickme").click(function(evt){ jQuery(evt.target).css("width",110); });

如果 IE8 &下面的内容与上面的内容显然不一样，可以写成：

document.getElementById('clickme').addEventListener('click', function(e){e.target.style.width = '110px';}, false);

在比较 LOC 时，没有人会期望用纯 JavaScript 从头开始​​编写每个应用程序，通过 jQuery（一个通用库）更可行。

在公平的竞争环境中，您可以比较两个应用程序：
App-A 使用 jQuery + libs VS App-B 使用纯 JS + libs。
App-B 可能比 App-A 使用更多的库，这意味着 Js 核心代码比预想的要少。

从整体上看，一个非通用库可能大约为 0.?-4kB，并且可以执行以下操作，并且因为它不是一个适合所有库的库，所以包含在 App-B 中是公平的：

getEl('clickme').ev('click',{ width: 110 });

与 JS 相比，jQuery 的行数当然会胜出，但区别在于比较的方法。