比较JavaScript与AngularJS？ [关闭]

Question

我知道JavaScript是一种编程语言，而AngularJS是与JavaScript一起使用的基于MVC的框架。

但是我有一个作业要比较：

• JavaScript与jQuery语法，
• 以及JavaScript与AngularJS语法。

现在，对于JavaScript与jQuery部分，我通过显示DOM方法和jQuery等效方法之间的比较以及如何最小化函数以及如何使用jQuery代替JavaScript轻松访问不同元素以及几行代码来轻松比较它们。

但是在AngularJS vs JavaScript的情况下，由于AngularJS是框架，我应该如何比较其语法？

甚至可以比较两个可以在JavaScript和AngularJS中完成但可以很容易地使用AngularJS完成的事情吗？ 因为据我了解，JavaScript和AngularJS是两个独立的东西。

我是Web开发领域的新手，大约3周前就开始使用HTML5进行开发，所以请原谅我的任何错误。

Answer 1

Angular和jQuery都是用 Javascript 编写的库/框架。 让我将Angular与Javascript进行比较就像在面包和面粉之间进行比较。

但是，用于DOM操作的浏览器API的实现与Angular具有根本不同的想法，因此，我将假定这是您的工作期望您识别的。

需要重点关注的是，范例在根本上是不同的。 Angular采用声明式方法，而DOM和jQuery都是必须的 。

陈述式

一种构建计算机程序的结构和元素的样式，用于表达计算的逻辑而不描述其控制流程。 [ 1 ]

声明性语言是用来描述所需内容的语言，而不是描述如何完成的语言。 这是Angular使用指令的方法。

势在必行

[一种样式]，其中，根据明确的步骤来实现算法。 [ 1 ]

当我们使用DOM API或jQuery编写代码时，我们必须详细说明过程的“方式”。

让我们以数据绑定为例。 我们希望将文本输入中的值绑定到标签中。

使用DOM

<input type='text' id='bind-input'>
<label id='bind-output'></label>

还有我们的Javascript：

window.addEventListener('load', function() {
  var input = document.getElement('bind-input'),
      output = document.getElement('bind-output');

  input.addEventListener('change', function() {
    output.innerText = input.value;
  });
});

我们必须非常具体地解释我们需要浏览器执行的操作。 我们必须侦听某些事件，确保已加载DOM，跟踪元素的ID，所有这些只是为了在输入更改时更新标签。

使用jQuery

<input type='text' id='bind-input'>
<label id='bind-output'></label>

我们仍然需要一些Javascript：

$(document).ready(function() {
  var $input = $('#bind-input'),
      $output = $('#bind-output');

  $input.on('change', function() {
    $output.html($input.value());
  });
});

如您所见，这与DOM方法非常相似。 我们必须向浏览器确切说明我们想要它做什么。

带角

<input type='text' ng-model='bound'>
<label ng-bind='bound'></label>

为了使用Angular，我们甚至不需要编写任何代码！ （显然，我们在某个地方需要一个空的控制器，但是您知道了）。

声明性方法主要是我们从实现细节中抽象出来的一种方法。 与可以以声明方式应用于HTML相比，Angular指令使将这些常见行为包装到小的可重用组件中非常容易。

Answer 2

首先，您（或分配问题的人）似乎有点误解了jQuery / AngularJS是什么。 jQuery和Javascript不互斥，而AngularJS和Javascript不互斥。 简要地：

• Javascript：网络浏览器可以在网页中运行的所有代码（呃，我们在这个问题上很关心的地方：-）都是用Javascript编写的
• jQuery一个用Javascript编写的函数库，可以在网页中使用。 使用jQuery编写内容就是使用jQuery提供的额外功能使用Javascript编写内容。
• AngularJS是一个用Javascript编写的函数库，可以在网页中使用。 使用AngularJS提供的额外功能，使用AngularJS编写内容只是使用Javascript编写内容。

（请注意，我的jQuery / AngularJS定义之间的相似之处。是的，有人说AngularJS是一个框架，但这只是人们编写的一组Javascript函数）

其次，我认为这个问题实际上没有明确说明。 我会给自己一个在Web浏览器中完成的标准任务，例如

• 从Twitter提要中获取最后20个项目，并将结果显示在网页中

使用

• 纯Javascript（无框架或库）
• jQuery，遵循“常规” /“良好” jQuery做法。
• AngularJS，遵循“通常” /“良好”的AngularJS做法。

然后，您可以比较完成上述每个过程的过程以及为每个过程编写的最终代码。

Answer 3

您可以比较Javascript和Jquery因为jQuery是一个库，可将复杂的javascript代码最小化为简单的方法和属性。 您可以在一行中解释jquery， 少写多做，但不能写 AngularJS Framework。

DOM Manipulation是jQuery提供的强大功能。 您可以操纵DOM元素来更改页面的样式。 使用DOM元素进行“捉迷藏”游戏等等。 没有模板之类的功能，您只需要根据自己的需求编写应用程序代码即可。 例如，如果您要将keyup事件绑定到文本框，并想在span显示更改的值，则需要编写如下代码：

$('input').on('keyup',function(){
    $('span').text(this.value);
)};

另一方面， 数据绑定是AngularJs可以完成的强大功能。 这种类型的框架通常用于SPA（单页应用程序），其中必须进行数据绑定，例如， online test 。 使用框架的好处是您将获得包含框架的模板。 因此，您可以使用ng-模块将元素绑定在一起，例如

<input type='text' ng-model='inputElem'>
<span ng-bind='inputElem'></span>

而且，我认为比较可以

1. Javascript和Jquery
2. jQuery和Angular（不是Javascript和Angular）

这里还有一件事，Javascript是一种语言，Jquery是一个库，Angular是一个框架。

以下链接将清除有关库和framworks的更多信息，

1. JavaScript框架和库之间有什么区别？
2. AngularJS有什么比jQuery更好的功能？
3. jQuery vs. AngularJS：比较和迁移演练