比较JavaScript和AngularJS?

时间:2015-04-25 11:32:57

标签: javascript jquery angularjs html5

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

但我有一个我应该比较的作业:

  • JavaScript vs jQuery语法,
  • 和JavaScript vs AngularJS语法。

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

但是对于AngularJS vs JavaScript,我怎么能比较它的语法,因为AngularJS是一个框架?

甚至可以比较两个可以在JavaScript和AngularJS中完成但可以使用AngularJS轻松完成的事情吗?因为据我所知,JavaScript和AngularJS是两个不同的东西。

我是网络开发的新手,并且已经开始像3周前一样在HTML5中开发,所以请原谅我的任何错误。

3 个答案:

答案 0 :(得分:8)

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方法非常相似。我们必须向浏览器完全解释我们想要它做什么。

使用Angular

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

我们甚至不需要编写任何代码来与Angular一起使用! (显然我们在某个地方需要一个空的控制器,但你明白了。)

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

答案 1 :(得分:4)

首先,您(或分配问题的人)似乎略微误解了jQuery / AngularJS是什么。 jQuery和Javascript不是互斥的,AngularJS和Javascript不是互斥的。简言之:

  • Javascript:所有代码(呃,我们关心这个问题:-)网页浏览器可以在网页中运行用Javascript编写
  • jQuery用Javascript编写的函数库,可以在网页中使用。使用jQuery编写一些东西只是使用Javascript编写一些东西,使用jQuery提供的额外函数。
  • AngularJS是一个用Javascript编写的函数库,可以在网页中使用。使用AngularJS编写一些东西只是使用Javascript编写一些东西,使用AngularJS提供的额外函数。

(注意我对jQuery / AngularJS的定义之间的相似之处。是的,有些人说AngularJS是一个框架,但它只是人们编写的一组Javascript函数)

其次,我认为这个问题实际上略显不足。我会给自己一个在Web浏览器中完成的标准任务,例如

  • 从Twitter Feed中获取最后20个项目,并在网页中显示结果

使用

  • 普通Javascript(无框架或库)
  • jQuery,坚持&#34;通常&#34; /&#34;好&#34; jQuery实践。
  • AngularJS,坚持&#34;通常&#34; /&#34;好&#34; AngularJS实践。

然后你可以比较你完成上述每个过程所经历的过程,以及你为每个过程编写的最终代码。

答案 2 :(得分:3)

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

DOM操作是jQuery提供的强大功能。您可以操纵DOM元素来更改页面的样式。与DOM元素一起玩捉迷藏等等。没有类似模板的功能,您只需根据需要对应用程序进行编码即可。例如,如果要将keyup事件绑定到文本框并想要在span中显示更改的值,则需要编写类似的代码,

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

另一端数据绑定是一项功能强大的功能,可由AngularJs完成。这种类型的框架通常用于SPA(单页应用程序),其中数据绑定必须是online test。使用Framework的优点是您将获得包含框架的模板。因此,您可以使用ng-模块将元素绑定在一起,如

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

而且,我认为比较可以是,

  1. Javascript和Jquery
  2. Jquery和Angular(不是Javascript和Angular)
  3. 这里还有一件事,Javascript是一种语言,Jquery是一个库,Angular是一个框架。

    以下链接将清除更多关于库和framworks的内容,

    1. What is the difference between a JavaScript framework and a library?
    2. What does AngularJS do better than jQuery?
    3. jQuery vs. AngularJS: A Comparison and Migration Walkthrough