5

最近开始自学Vue.js2.0,无奈看到官方文档的进阶部分之后就看的很吃力了,文档中讲得很多术语和名词都无法理解。总觉得自己在学习过程中肯定缺少了前端技能树上的某些知识(知识链断裂)。

我发现在学习各种前端框架的时候都不可避免的接触到了ECMAScript2015,bable,webpack,我现在大致知道这些东西起什么作用,但是不知道除了学习这些以外还需要学习什么,或者明白什么概念?(比如说前端模块化这个概念是不是需要去学一学CommonJS或者sea.js这些东西?)

如果从STAR面试法则上来看的话,这些技术的场景,要解决的问题是什么,如何去解决的,解决完之后的结果(带来的好处)是什么?

另外我们平时在学校以及各种书籍上学的js是哪个版本的ECMAScript?我们该如何从这个版本的ECMAScript过渡到ECMAScript2015?

求各位前端大神回答一下上面的问题,并且给予我们这些新手一些学习路线,谢谢各位啦!

昌维 4.4k
2016-12-30 提问
13 个回答
19

看了大家的回答,感觉很多人都没说到点子上
大概大家对如何有效的掌握一门新的框架也是一头雾水吧
为了给题主解惑,以及各位如此耐心回答问题的朋友提供一个学习思路,所以我决定要抖点干货。
主题就是《如何快速掌握一种框架》,方法适用于目前所有的流行框架

最近前端比较流行的几类框架,包括Vue,weex,react, react native, 以及小程序
他们有一个共性,就是,组件化的思维非常非常非常重要

组件如何创建?
在组件中,数据如何传递?
组件与组件之间如何交互?
如何合理的划分与组合组件?
这些问题你搞明白了,你就会发现,其实掌握一个框架,还是没有想象中那么难的。

我并不愿意一上来就说别人基础不好,其实大多数所谓的基础不好,只不过是有的知识没记住嘛。
但是有一个基础,那一定是要牢牢的刻在脑子里的,那就是题主自己提到的模块化思维。

因为组件是基于模块化思维的。

而关于模块化,这几年就有好多个模块化的规范。
CMD,AMD,commonjs,以及最新的ES6的模块思维。
我们抛开他们的具体原理不谈,单从使用者的角度来说的话,其实道理都是一样的。
所以,只需要掌握其中一种,另外的,也只是语法表现不一样而已。
既然最新的是ES6,那么干脆就建议大家按照ES6的来吧,现在很多文档教程也是基于ES6来写的。
那么总要我们自己去搞明白import,export这些是来干嘛的对吧。
基础语法不多说,耐心花一个小时认真了解一下就基本OK了。

但是想要凭空了解模块化也是没那么容易的。因为模块化,恰恰是基于js的面向对象思维。
啊,这个时候,终于和基础知识扯上关系了。学习面向对象,推荐前面有同学提到的《JavaScript高级编程》

所以你至少需要了解常规的创建对象是怎么玩的,单例模式是怎么玩的,订阅-通知模式是怎么玩的。

订阅-通知模式涉及到数据的管理与组件的交互,因此异常重要,具体实现与重要性可参考redux。

所以我给题主的学习路线建议如下

1. 面向对象,设计模式中的单例模式与订阅-通知模式,这里建议通过ES5的语法进行学习
2. 搞明白为什么要模块化
3. 模块化,这里开始,可以结合ES6的语法来学习ES6的模块化思维,
   如果你没有ES6的开发环境,就建议通过require.js来学习模块化。     

4. 组件化

5. 以及需要支撑这条学习路径的所有基础知识。

尽管这里面涉及到的内容很多,但是当你真正完成此路径之后,你就已经掌握了ECMAScript在使用角度上的核心了。
你将不会畏惧去重新学习任何新的框架。

就比如大家都在说小程序入门简单,其实是建立在你的这整套思维都完善的情况下的,否则你仍然只能最多按照官方文档写写小例子,并没有什么卵用

至于解决了什么问题,这个等你把组件化搞清楚再来考虑吧,简单的篇幅还真讲不清楚。
这里你可以给自己留2个思考题,在模块化思维下,如何实现

1.在一个app中,设置切换皮肤,整个app的皮肤就自动切换了
2.点击了一个组件的按钮,另一个组件的颜色大小都发生指定的变化

另外为了减轻学习压力,我有几条额外的建议

  • 做好脱离jquery的思想准备,也就是多数框架的组件化中,我们不再需要获取DOM元素

  • 和数据处理有关的方法都要重点关注

  • 暂时不要考虑动画与交互如何实现

  • 不要被各种语法的变化吓到,比如ES6与ES5相比,只是同样的功能,换了一种语法而已。语法永远都是没有学习障碍的,记住:只要是语法的问题,都不是问题

最后分享一点小干货,多种方式实现拖拽
看懂了此例子将会对你学习进步的帮助非常大

4

学习前端要【发散式思维】
最开始我自学javascript也想知道哪些是基础,然后想一步一步循序渐进,后来发现所谓的基础很少,大部分知识点散而多。

举例来说,最开始写JS实例,可能是一个【下拉菜单】,然后发现【TAB选项卡】原理和下拉菜单原理很相近,然后又发现【slider轮播图】的原理和index控制的选项卡也原理相同,再又发现了【冒泡、事件委托】等等。。。

就是不断发散,让所有散乱的知识点之间产生联系,并不是必须要先学哪个,才能继续学另外的知识


针对楼主的问题:
1、ECMAScript是一个标准,就像CSS2.0/3.0一样,实际我们使用的JS不是ECMAScript的任何一个具体版本,而是它的实现,也就是说像CSS一样,只要浏览器厂商支持,你可以写2.0也可以写CSS3,混着写也行。

2、WEBPACK只是无数前端工具之一,只是现在比较火,搭配VUE用的人多,其他的还有GULP、GRUNT等等,它既不是一种编程语言,也不是什么高深的东西,网上有很多在线压缩JS/CSS,在线编译SASS/LESS,在线生成雪碧图一大堆工具,以前都是用那些,现在可以把诸如此类的功能都用WEBPACK实现,就这么回事,有兴趣可以学学,没兴趣不学就不是什么大不了的事,除非公司强制要用。

**3、babel,这个就更简单了,就是把ES6编译成ES5,它搭配webpack就是babel-loader,搭配gulp就是gulp-babel,像我以前不用gulp和webpack,可以直接在sublime Text3上装个就用。。就是个编译器。
顺带一提,IE8连ES5都不支持,所以如果你有要兼容IE8及以下的场合,ES6ES5Babel都可以扔**

最后还是那句话,学习前端是发散性思维,不要给自己一堆条条框框的计划,知识点之间没有绝对的前后基础关系,计划死了到头来也是一团乱麻,从实例着手,再发散到其他知识和实例

2

之前对 ES6,Webpack,Vue 的接触几乎为 0,硬啃了两天文档看了几个别人的 demo 上手了,感觉 ES6 的话,稍微了解点 module 那块就好了,代码看多了也就慢慢习惯了,Webpack 还不了解,用了 vue-cli

觉得还是得实践,自己写代码,我写的三个入门级 demo 供你参考 https://github.com/hanzichi

2

既然你诚心诚意的问,我就大发慈悲的回答你。?

咱们一条一条的来看。

1.缺了哪些知识
我也猜不出你具体是什么水平。所以列出来的都是一些比较关键的问题。

  • 原生js操作DOM、jQuery操作DOM

  • js事件

  • js对象

  • js原型

  • js面向对象编程

  • 模块化

  • 组件化

2.ECMAScript2015、bable、webpack
我想你现在只是知道这些东西,也能跟着网上的教程写点小玩意儿。但是,你不理解这些东西具体是什么,用来干嘛,怎么用。没关系,遇到这些新东西,就跟着官方文档一点点模仿就对了。模仿是学习新玩意儿最好的方式。

  • 对于ES6(ECMAScript2015),如果你熟悉js的语法,你只需要去看看ES6的基本语法。首先let、const、箭头函数,变量结构赋值、模板字符串,这五项你得先明白,这会解决你70%的语法障碍。如果遇到其他的不明白的语法,则直接查相应的资料。阮一峰老师的《ECMAScript 6 入门》在网上开源,讲解的非常清晰,通俗易懂,地址在这里:ECMAScript 6 入门。其他的ES6相关内容,不建议你在深入ES5之前去深入,只要明白使用就好。其他的功夫,你可以花在ES5的深入学习上。

  • babel 是一个代码转换器。现市面上的5大主流浏览器对ES6的支持暂时不足,不能运行。所以,有个很聪明的外国人就做了一个转换器,让你写ES6语法的代码,它帮你转换成ES5的。ES6比ES5先进好用,所以用ES6会很爽。但是,这需要你对ES5比较熟悉。(几个小问题:js对象是地址引用的你明白吗?数组是地址引用的你知道吗?js原型链是什么?)。

  • webpack是一个前端工程化的完整解决方案。意思是说,它是一系列功能的集合体。要理解它,你首先要明白模块化。
    我知道,模块化这个东西说起来简单,但是它是一个概念主要的名词。所以,新人学习这东西的时候确实有点麻求烦。不过,请相信我,它真的很简单。学习它建议你学习一下CMD,nodejs实现的CMD模块化规范。网上大部分的文章你看着肯定会懵逼。它们没有解释到精髓。我是在《深入浅出node.js》里面2.1.2小节--> "CommonJS的模块规范" 里面看到的解释最为精髓易懂。可以在网上找到相应的资料。

3.场景、解决的问题、如何解决、解决结果

  • 场景:最开始vue.js这些MVVM框架是为了解决SPA单页应用的开发问题。现在也不局限在SPA了,而是用来解决复杂的、大型的web应用了。

  • 解决的问题:前端开发三个痛点:

    • 大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。

    • 开发者在代码中大量调用相同的 DOM API, 处理繁琐 ,操作冗余,使得代码难以维护。

    • 界面展示数据,用户操作产生事件,事件需要反馈,也代表着我们要处理用户的行为。当页面很复杂的时候,处理数据和界面相对应的变化,会很头疼。MVVM框架(此处为vue)帮我们做了一些事,让我们可以操作数据,界面相对应的就变化了。

    • 拓展阅读:Vue.js 和 MVVM 的小细节

  • 如何解决?

    • 这个就不是几句话能说明白的。虽然不难,但是很啰嗦。

    • 你知道的,前端很多东西就是很分散的。

  • 解决结果

    • 结果就是大家都很开心的用vue这些MVVM框架来开发了呀。

    4.书上学的大部分是ES3和ES5。ES为主。FF、Chrome、Opera、Safari这些的新版本对ES5的支持已经很完善了。IE9部分支持,IE10支持比较完善。

  • 如何过渡?用bable啊!ES6的语法来写代码,bable帮你转换成ES5的,完美!


5.建议
《JavaScript高级程序设计》是一本不错的进阶书籍。读一遍吧。读完这本书,才算是js入门了。

1

其实我学的也不是很好,但是我可以给你这方面一点建议

在学习vue之前呢,你要确保你的原生js没有问题(一些基础性的概念),如果你的原生js没有问题了,那这些框架对于你来说就不会有太大的问题(框架嘛,就是基于原生js基础上的一些封装,本来就方便与我们开发的),那些框架的概念会在你的事件中融会贯通,因为每个框架都有他个人的魅力

你要记住,千万不要纸上谈兵,即使不会写项目,也要看着官网的示例代码敲一敲,敲得多了犯的错多了,会解决错误了,这样你才可以很好的运用它。

还有,不要在开始学一些东西之前就有计划要做什么什么储备,因为这会拖垮你的精力,不要怕,直接去用它,出了问题去解决它,什么不会再去学它,就想你去看一本javascript高级程序设计,你从头开始一页一页的看,有多少次你都是又从头翻开,但是你要你每次都看一看目录呢,看看哪里不太熟练,又或者在遇到问题之后再去翻一翻,那会有不一样的效果,事半功倍。

总之就是这样,我就不啰里啰嗦了,加油~

1

很佩服这样细心的人。不过我的学习方法完全不是这样的。 有什么好担心的,一开始就大胆去尝试,先有感性的认识。需要你学习什么、注意细节的时候,你自然会去再仔细看和研究。

别让学过的知识成为学习新东西的羁绊。

1

vue?没用过,因为公司没有用他。如一楼所说:你看vue文档看不懂,说到底还是js基础太浅薄了。用好各类框架,首先要学好原生js。感觉是句屁话,但是你得承认,这是事实,框架只是人家借助原生集成出来的辅助工具,但是任何一个框架都逃不了被取代或者优势弱化的趋势(曾经的jq就是的),然后你会发现你一离了框架,做什么都眼高手低。所以,先不急去看框架(如果公司没有让你用的话),先把原生js过一下级,进进阶。一味的追求框架,会导致自己舍本逐末的。就如知乎上有一篇:《2016学前端是一种什么样的体验》这篇文章一样,各种框架,你能学的过来?所以对于楼主这个问题,结合我现在的计划:首先,我目前不会去深入学任何一种框架,除非在工作中需要用到,部门老大让我学。其次,我仍然觉得自己的js还不过关,我给自己的心理预期是,能比较轻松造出一些实用的插件,能轻松看完jq底层代码,然后把js比较经典的几本书通读至少2遍...基本上达到这一点后我才会考虑去了解一些框架

1

我是一个自学然后到小公司上班快半年的菜鸟前端,html css 就不说了,就像背英语单词一样。至于js,JavaScript,暂时大多都是在写jq,原生js才是js的重点吧,所以我买了本JavaScript高级程序设计准备慢慢怼,这本书目录就很好的说明了JavaScript要学的知识点,我相信这些知识学好再看react vue node angular等等框架应该会轻松许多吧,其实,在这之前可以边打原生js基础边学一些jqUI、bootstrap 、ajax、json,H5C3比较火的点或者了解一些后端比如Java、php的基础知识,对接的时候会用到。还有就是设计,现在有些前端会包办设计网页,因为美工大多不了解代码,有时候设计的方案可能偏离了技术可行性,前端来设计的话就会好很多,当然这要根据兴趣而定。你在项目中多承担了一部分事务,可以多要一些工资啊。都说前端简单,上到后端下到设计都有涉及,本职工作事也多,切图,写动画,改兼容性,雪碧图,正则,CDN,不仅要完成还要高质量的代码,还有一些前端自动化的工具等等,比较流行的框架vue react angular 等等,这是目前我认识的前端,还有很多不知道等待探索的,我是个菜鸟,这些只是很主观的建议,说的不对的不好的请海涵。祝题主早日成为大神,带我飞。

1
回复 昌维

没有一本书这么完整,知识都是浅到深,js DOM编程艺术 然后JavaScript高级程序设计 然后各种动物书,我也根据知乎上的大小牛推荐的学习路线,那些什么入门到精通,一看名字就是忽悠人买书的,前端做设计的话要看个人喜好还有有没有基础,没基础还得学,PS肯定要学的,前端要用,起码基础操作要会,深不深入看个人,这个个人感觉深入PS很难啊,目前我觉得基础操作应付工作OK的,设计也要看书学,我看过一点点《写给大家看的设计书》觉得写的很好,都是讲基础易懂,我必须说一下,重心放在学js ,然后是工作需求技能然后是扩展技能,让自己更全面更强大或者我感兴趣我想学。工作挣钱养活自己然后才是梦想。

吃葡萄不吐番茄皮 · 2016年12月30日

展开评论
1

谢邀。我来的比较晚,我简单说说我的看法吧。vue提供一套现成的东西,模板渲染,快捷的操作,快捷的写法。如果你js十分的高级,你可以自己写一套类似vue的东西。

我认为前端不同其它语言的是,他是有html+css+js组成。他所依赖的环境由用户决定。。所以最好是多接触基础,然后根据你喜欢的决定你最后的方向

html可以做什么?可以承载你的内容。

css可以做什么?让你的内容表现的更为直观,清晰。

js可以做什么?业务逻辑,复杂效果。

0

我来简单说说吧,从你的问题中,我感觉楼主你的基础底子还是有点薄弱的,你说的那些东西像bable,webpack,或者别的什么ng2,vue等等其实都是属于JS的工具或者框架或者库,如果你的JS基础或者功底足够,去了解这些东西你会发现你其实上手很快的,如果你JS功底不行,当然肯定也就不怎么看得懂,说到底还是因为功底问题。

建议你可以先看看HTML,CSS和JS方面一些基础的书籍,系统的了解学习下,思维上有了一个架构然后再去看别人的代码,流行的工具等等,弥补自己的不足。

同时往后的话建议也要看一些比如code complete,clean code这样的书增长自己的代码功底,也要了解一些编程思想,设计模式,算法等等,这些可以以后慢慢补充。

如果你系统学习过你就会知道ECMAScript是什么,一般js书籍开头在介绍JS的时候肯定会介绍js的历史,构成等等信息,进而在学习node.js的时候你就会知道node.JS是什么什么东西CommonJS是什么东西了。

1

<javascript高级程序设计>这本书不错的,作者是 Nicholas C. Zakas 相信你看完会有很多收获。还有《高性能javascript》也是他写的,还有很多书也写的不错,比如《你不知道的javascript》等等。我自己的感受是看书是一方面,能让你系统的学习和知道一些东西,尤其是理论思想方面的。主要就是要你多看别人的代码,多写自己的东西来结合起来相信收获会很大。

AfarWind · 2016年12月30日

展开评论
0

一切都因nodejs而生,所以先学习nodejs,传智播客有个8天的nodejs教程,可以找找看。

0

照着案例来,大胆的敲代码,遇到问题GOOGLE,stack overflow,或者在segmentfault提问,框架的问题,多用用就会了

0

node.js gulp webpack ES6 npm 接触过这些之后vue.js就能比较容易弄明白。说白了底层也是js及工具包的整合。

撰写答案

推广链接