译者:陈亮,安徽庐江人,无线专业研究生。
复习:像月亮一样清晰
JQuery通常被认为是Web开发者入门的好切入点。
很多人在学习Vanilla Javascript(一种快速、轻量级、跨平台的Javascript框架)之前都学习过jQuery。
这是为什么呢?
这部分是因为jQuery非常流行,更多的是因为很多有经验的开发者的一个误解:
JQuery对他们来说很容易,所以对初学者来说应该也同样容易。
JQuery简洁但不简单。
JQuery确实摆脱了一些老浏览器存在的很多烦人的问题。
但是,它在封装DOM API或Javascript的复杂性方面没有做多少工作。
是的,我知道如何使用$ ('# id ')。单击(功能(事件){...});
这比用普通的Javascript做这些事情要方便得多。
但是你还是需要了解其他同事写的代码:DOM节点选择,事件处理,回调函数等等。
如果你已经学习并理解了DOM API,并且很好地掌握了它,那么jQuery对你来说是非常容易的。
但这对于初学者来说往往并不容易。
vue . j
Vue.js是Javascript家族的新成员。
在它的诸多优点中,我认为它的“简单易学”应该排在第一位。
简约贯穿其设计。
我认为用Vue创建一个简单应用程序的初学者会比用jQuery更好地理解他们的代码是如何工作的。
接下来,让我们使用jQuery和Vue.js来实现一个简单的应用程序,并比较它们的不同之处。这个应用程序将计算按钮被点击的次数并显示出来。
JQuery实现:
下面是一个使用jquery的典型实现:
从一个有经验的开发人员的角度来看,这似乎非常简单。
但是很难理解这段代码在做什么。因为你必须考虑:
1.通常在jQuery脚本中,您需要输入的第一件事是
$(文档)。ready(function(){...});
在这30多个字符中,你会被以下四个概念难倒:DOM节点选择、事件处理、文档加载和回调函数。
如果你不理解这些东西,你就很难理解你刚刚写的代码。
2.要获得并使用一个DOM节点,您需要jQuery构造函数$(' ... ')),但遗憾的是,您无法确切指定您将获得哪个节点。
你需要使用一个类似于CSS3的选择器来创建一个合适的过滤器,你将得到的节点要等它运行后才能决定。
要做好这一点,你需要在脑海中映射一个DOM的副本,并模拟当你的过滤器工作时会发生什么。
并且每次重写DOM结构时,都需要更新DOM副本,并考虑它是否能按预期工作。
3.如果说有什么好消息的话,那就是jQuery只有一种模式:选择一些元素,然后使用API中的方法来处理选中的元素。
这个模型的问题是,如果我们有一个一维平面API,有100个内置方法可以做从AJAX到数组迭代的所有事情。
在这种情况下,我们无法用足够多的方法名来描述它们做什么和返回什么。
但愿初学者能明白这些链方法到底在做什么。
Vue.js的实现:
以下是Vue.js的典型实现:
Vue考虑到了使用jQuery带来的许多棘手问题:
1.不需要关心DOM准备的回调函数,这个复杂度已经封装好了。Vue的生命周期挂钩将允许更精确地控制何时发生。
2.数据属性计数器和呈现它们的DOM节点之间有明显的相关性。
不需要把DOM结构记在脑子里,在页面上就可以看到,而且可以保证在更新计数器的时候,不会因为不可靠的节点选择而导致不可预知的结果混入你的DOM中。
3.我们没有任何模糊的API方法需要查询或记忆。
不同的函数被Vue构造函数对象完美地组织起来,或者直接被模板中的DOM节点组织起来,通过直接给它们更多的上下文来帮助它们理解。
包裹
只有当你真正了解Javascript和DOM API时,JQuery才是容易的。这只是不适合初学者。JQuery并不简单,它只是一个简写。
另一方面,在设计过程中会简单考虑Vue。DOM API的许多困难部分都被封装了。新手可以写自己真正能理解的代码,在需要做比较复杂的事情的时候也适用。
所以,下次有人问你WEB开发新手应该先学什么的时候,
JQuery将不再是最佳答案。
参考:
Vuejs中文网:http://cn.vuejs.org/
Jquery官网:jquery.com
温馨提示:注:内容来源均采集于互联网,不要轻信任何,后果自负,本站不承担任何责任。若本站收录的信息无意侵犯了贵司版权,请给我们来信(j7hr0a@163.com),我们会及时处理和回复。
原文地址"vue和jquery哪个好学,vue.js和jquery.js的区别":http://www.guoyinggangguan.com/xedk/244137.html。
微信扫描二维码关注官方微信
▲长按图片识别二维码

