zoukankan      html  css  js  c++  java
  • Vue.js比jQuery更好学

    大家普遍认为,对于新手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可不一定是个好答案。

  • 相关阅读:
    mysql 远程登陆不上
    hdu 5339 Untitled【搜索】
    SqlServer 书目
    passwordauthentication yes
    oracle 11g RAC ocfs2
    Oracle 11g RAC database on ASM, ACFS or OCFS2
    CentOS ips bonding
    Oracle 11g RAC features
    openStack 王者归来之 trivial matters
    openstack windows 2008 img
  • 原文地址:https://www.cnblogs.com/changningios/p/6775583.html
Copyright © 2011-2022 走看看