【学好】前端新人如何能把框架学好?

这个问题是咱们学习群里的同学问我的,

就是说,基本的js、html、css都ok啦,但前端框架要怎么学习会进度比较快呢?比较笼统的回答当然是要多写多看多练。但是,怎么样做会进度快一点呢?这其中应该也会有一些规律和窍门吧。确实是有一些规律,但也不能说是窍门,因为学习是很难取巧的事情,讲究的是一分耕耘一分收获。

<!-- -->

首先要明白,即:JavaScript不管它变成什么样子,它依然是JavaScript,依然是解释型的脚本语言,依然是事件驱动,依然是从上到下的一行行的运行。

任何一个前端框架,都是对于JavaScript的再封装,目的是提高效率,简化操作。无论这个框架搞了多么奇怪的自有的语法、它内在的运行规律,都是JavaScript,这就是说,你的JavaScript的核心概念要清晰,否则你在学习框架的时候,会遇到“不知为什么会这样”的问题。

就例如,ES6,很多同学担心学不会ES6,其实你ES5搞定的话,ES6你就会发现,它不过是ES5的优化加糖而已,本质上并没有变化。(依然是脚本,依然没有类,依然没有继承。所谓的extends无非是prototype的变形、所谓的Promise无非是把嵌套拉直为一串.then、所谓的generator、yield无非是函数分段执行...)

<!-- -->

WEB前端框架,无论是react还是vue,它们的目的都是收集页面的数据,然后传递给后端,再从后端获得数据,显示在页面上。无论它们的思想是什么双向绑定,还是数据驱动视图,或是其它什么思想,都是为了达成这个目的。

那么第一个阶段,就是要熟悉它们的基本的API操作。我在web前端零基础课之中,也是这么样的顺序来讲解框架,先讲一个思想,再通过一些例子来学习基本的api、命令、语法。然后看它们的数据、值是如何的传递,最后再形成一个整体的项目。

如果是自学前端的话,无论什么样的框架,一定要先看搞清它的基本的api,这个阶段你找任何人东问西问,那都没有用,必须自己多看api。

第二个阶段,就是找到它的“核心”。刚才叫你看api了,但你不要拿着api文档就从第一个开始一直往下看。而是要以框架的“核心”为圆心,通过一些小例子,先掌握一些常用方法,再向外辐射着的去学习、去看。

<!-- -->

例如,我已经掌握一些html、css、js了。那么,VueJs,我会怎么学?

首先肯定是看看这是个什么东西。上网查,喔,这是一个MVVM的框架,讲究的双向绑定,组件化开发,等等。也就是说,vueJs的页面都是用它的组件搭建出来的,在vue这里没有真正的静态页面。

那么我第一步就是,“先在页面上,使用vueJs显示个什么东西出来”,例如一行字。那我怎么显示呢?“字”是什么?其实是数据。那就变成了,怎么把数据显示在页面上。

再查,喔,vue使用 {{}} 这种插值的语法,

再查,它的数据放在哪呢?喔,是放在vue的实例里,

new Vue({

el:'#xxid',

data:{

msg : 'xx 123'

}

});

那么,就是在 div标签里写,{{msg}},搞定了,文字显示出来了。这时,再回头看看api,关于data这块的说明是什么样的内容,...

<!-- -->

刚才说了,vue什么的,它里面其实都是js,那么js是事件触发的。那我也给vue添加个事件吧,就是点某个按钮,输出个文字什么,..

查,文档里应该有事件的说明,喔,是v-指令,怎么用?

v-on:click="xxbtn";

这个xxbtn是个函数,写哪呢?喔,在Vue的实例的methods里,

new Vue({

el:'#xxid',

data:{

msg : 'xx 123'

},

methods:{

xxbtn(){//...}

}

});

就这么一步一步的往下走着学,...几个例子做起来,vue的基本操作也就ok了。

学会了基本的v-指令之后,再看VueJs的组件,全局和局部。这些基础的都ok之后,就用node安装一个vue-cli,在 .vue 文件里,把之前的东西再写几遍,基本上vue的常用操作就掌握了。

<!-- -->

上面学vue这段是说你如何去熟悉它,但本文的标题是说,“如何学好前端框架”?

那就需要你从三个方面来理解、看待前端框架:

1、从JavaScript的层面 。这是所有前端框架的底层;

2、从业务、需求的层面。为什么有了jQuery之后,又有了reactjs?为什么再之后又有了VueJs?是因为react、vue的思想比jq更先进;

3、从前端框架本身的属性来看,“它”是工具,不是技术。不是学会了前端框架,就是学会了前端开发。

只有从这三点出发,才能去把前端框架给学好。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2018-06-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

提高工作效率的几个小技巧

1554
来自专栏Flutter入门到实战

Flutter 的手势(GestureDetector)分析详解一、手势识别器分类二、手势识别器的相关闭包函数统计分析表:

GestureDetector手势操作是开发中必不可少的,Flutter中的GestureDetector一共有 7大类25种。

2163
来自专栏互联网杂技

20个为前端开发者准备的文档和指南4

1.I want to use 基于的数据和功能都在Can I use网站上列出来了,这个app可以给你选择很多前端开发功能的能力和获得全世界用户看到你选择的功...

34010
来自专栏程序员互动联盟

【专业技术】chromium GPU 硬件加速合成

前言: 在传统浏览器网页渲染实现方案中,网页完全依赖CPU的能力去渲染网页(软件渲染简介:网页生成一张bitmap丢给CPU去绘制),然而一台机器的CPU不仅...

2666
来自专栏ATYUN订阅号

Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣

Medium网友Peter Weinberg开发了一款名叫CS-Playground-React的应用程序,可以使大家更有意思、也更加轻松地学习算法和数据结构。...

4495
来自专栏星流全栈

Announcing Vue.js 2.0

1124
来自专栏武军超python专栏

2018年8月3日pygame的安装和快速入门,飞机大战

pygame中提供了一个用于表示这四个数据的对象:位置对象:pygame.Rect

2922
来自专栏前端知识铺

入口文件开始,分析Vue源码实现

网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行。

39312
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第一节)

4988
来自专栏CDA数据分析师

初学指南| 用Python进行网页抓取

引言 从网页中提取信息的需求日益剧增,其重要性也越来越明显。每隔几周,我自己就想要到网页上提取一些信息。比如上周我们考虑建立一个有关各种数据科学在线课程的欢迎程...

2258

扫码关注云+社区