w3ctech

Vue.js比jQuery更好学

本文转载自:众成翻译

译者:sea_ljf

链接:http://www.zcfy.cc/article/2650

原文:https://medium.com/js-dojo/vue-js-is-easier-to-learn-than-jquery-abbbb9c12cf8

大家普遍认为,对于新手web程序员来说,jQuery被认为是一个好的入门点,甚至于很多程序员都是先学jQuery,再学原生Javascript。

为什么呢?首先是因为jQuery非常流行,但更重要的是,有经验的程序员都认为jQuery十分简单,推己及人,对于新手来说当然也应该是非常简单的,然而这并不正确。

jQuery简洁,但不简单。

jQuery绝对可以帮你处理掉很多老浏览器的麻烦事(译者注:比如各种兼容性问题),但对于简化DOM API操作和封装Javascript变化而言,它就帮不上什么忙了。

当然,对于敲 $(‘#id’).click(function(event) {..}); 这样代码的时候,肯定比原生的Javascript要简洁。但一些知识你是必须要掌握的,比如DOM选择器,事件处理,回调函数等等,不然你可写不出上述的代码。

jQuery能让你更简单地写代码,前提是你懂得DOM API和Javascript的相关知识,但这对新手来说并不容易。

Vue.js

Vue.js是Javascript世界的新宠,我几乎可以说它是最好学的。简约之道,深入其中。

我坚信,当一名新手使用Vue.js编写完一个简单的应用后,会比他使用jQuery(编写同一应用)更好地理解代码是如何工作的。

那么,让我们一起动手,分别用Vue.js和jQuery编写一个相同的简单应用,看看那个更好理解。这个应用会计算点击按钮的次数,并显示在显示出来。

使用jQuery编写

以下是使用jQuery编写的典型例子:

<div id="output"></div>
<button id="increment">Increment</button>
<script>
  var counter = 0;
  $(document).ready(function() {
    var $output = $('#output');  
    $('#increment').click(function() {
      counter++;
      $output.html(counter);
    });
    $output.html(counter);
  });
</script>

看起来挺简单的,但这只是因为你是个经验丰富的程序员。如果要搞清楚代码是怎么工作的,还是挺复杂的,不信你看:

  1. 在使用jQuery编程的时候,脚本中首先输入的是$(document).ready(function() { .. }); 。在这三十来个字母的代码中,如果你不知道以下这四个概念其中之一,你一定浑身难受而且不懂为什么代码能工作。1.DOM节点选择器。2.事件处理。3.文档加载过程。4.回调函数。

  2. 当需要选择一个DOM元素的时候,你要使用jQuery的构造器$(‘…’)。然而不幸的是你无法确切地指出获取到的是什么节点,你需要使用一个像CSS3选择器一样的过滤器,才能保证代码运行时(获取的DOM节点)是你想要的。为了更好的完成这工作,你需要在脑海中模拟出DOM节点并模拟出你通过选择器选取时会发生什么。当你写的任一个方法更新DOM元素时,你也需要在脑海中模拟出那节点到底怎么更新,并确定这个选择器还能如期工作。

  3. 由于一些因素的考虑,jQuery只可以使用一种模式:选择某些东西,通过API方法去操作被选择的东西。但这种模式存在问题。jQuery有超过100种方法去应对不同的业务场景,如处理AJAX、数组遍历等,但这些API都是一维平面的(译者注:其实就是吐槽jQuery的API名称过分简洁,不分层),这些方法的名称不可能一眼就可以看出它的用途及其返回值。祝新手们好运吧,希望他们能理解这些方法到底要如何使用。

使用Vue.js编写

以下是使用Vue.js编写的典型例子:

<div id="app">
  <div>{{ counter }}</div>
  <button v-on:click="increment">Increment</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() { 
        this.counter++;
      }
    }
  });
</script>

Vue.js解决了上述jQuery的很多痛点:

  1. 不需要考虑文档加载后才能执行回调函数,其中的各种复杂性已被Vue.js隐藏起来。如果你需要更精细的操作,可以使用Vue.js生命周期函数提供的相应钩子。

  2. data属性中的counter会与DOM节点相互关联(译者注:即数据驱动),counter产生变化时DOM节点会被重新渲染。不再需要在脑袋中记着DOM了,(当点击按钮时,)你会肯定页面中的计数器会被更新,不会出错,而不必担心由于使用了靠不住(jQuery)选择器导致出现的莫名其妙错误。

  3. 我们不需要去查找或者回忆那些模棱两可的API方法。在Vue.js的构造对象中,不同的功能被分层组织,一目了然,或者是通过指令给予更多的上下文,更好地理解DOM节点在模板中是如何工作的。

啰嗦太多了,总结如下:

如果你熟悉原生Javascript与DOM API操作,jQuery确实会更容易。但这对新手来说并不可能。jQuery简洁,但不简单。

另一方面,Vue,简约之道,深入其中。DOM API中许多难的部分都被封装起来了。新手可以写出他们真正能懂的代码,而当他们想写出更复杂的代码时,Vue也是支持的。

所以当下次有人问你,新手web程序员该学什么的时候,jQuery可不一定是个好答案。

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复