如何从零开始学习一个框架

简介:

近我本人也在学习一些新技术:webpack + vue全家桶。实际上它俩从去年就开始很流行了,今年已经不算新了。但我之前并没有在项目中使用。

前端框架更新频率快如疯狗,有时候会给我们前端er带来心理上的恐慌:艾玛,又出新框架了,要不要开始学呀!我对此的看法是,知其存在、保持关注、不必跟风。所以我到现在才开始学习vue也不觉得丢人,敢讲出来。今天跟大家分享一下,我是如何从零开始学习一个框架的,希望能给大家带来一点收获。

平时留意相关新技术

先说一点题外的,对于新技术,我不会立马跟风去上手,但是会关注一些关于它的动态,比如说新版本发布啦,有配套框架啦等等。比如vue最近发布了2.0版本,饿了么团队打造出了一套基于vue2.0的UI框架。

保持一个关注即可,这样等你需要上手的时候,起码知道目前的大环境是怎样,哪里有好的资源。我主要通过微博来获取这些信息,我关注了很多圈内大牛,基本上业界消息不会遗漏。

搜索中文资料

对于新框架,我还是习惯先搜一下国内的资料,目的是对框架先有一个整体概览。这个阶段主要是先在脑中形成一幅蓝图,知道这个框架是如何从头到尾搭建的,有哪些坑需要注意,以及国内的使用者都是如何评价它的。

我不介意用百度,有时候也google中文,总之,能得到中文参考资料就行,毕竟读中文要比读英文快很多。因为这个阶段的目的就是快速有一个整体把握。所以一般会搜「教程」「入门」这样的关键字。

这个时候我也不着急动手写,再进行下一步。

通读官网文档

官方文档是一定要读的,否则你不知道遗漏了什么重要东西,也不知道国内的作者是不是写错了什么。这是原汁原味的一手资料,官方文档一般都会分guide和api两类。guide是引导你从头开始一步步使用框架的主要功能,api则是所有功能的一个汇总文档。

guide一定是通读,从how to install开始,不要嫌麻烦。原因很简单,你要知道如何「标准」的使用框架。在上一步搜到的中文资料中,可能有一些作者对框架的理解有出入,写的demo代码不是官方推荐的写法,如果你直接copy走,那就永远无法知道使用框架的正确姿势,原作者哭晕在厕所了。

api的话,文档量一般会很多,大概扫一扫就行,等使用的时候具体查阅。

动手搭建小项目

对民间的教程以及官方的文档了然于胸之后,就可以开始动手搭建一个小项目了,或者是小demo(看具体框架)。

如果官方的guide说的比较具体,我会参照官方的步骤来。或者此时再动手找一些资料,参照别人的操作步骤来,有一些质量高的文章会解释的很清楚,比官方的全。

说到高质量的资料,就不得不看一些英文的了。我们最熟悉的两个国外网站应该是github和stackoverflow了。对照谷歌翻译,阅读上面的文章还是没什么压力的。如果有,那就逐字翻译...

告诉大家一个秘密,github上不光只是代码仓库,还有很多资源收集类型的项目,想必有些同学是看过的。后来这些项目搞了一个不成文的规矩,统一都叫awesome-xxx,比如awesome-vue、awesome-webpack、awesome-react等等,上面的资料又全又质量。你要搜任何框架的资源,都可以在github上搜awesome加它的名字。

至于搭建什么样的小项目,我一般是把公司的项目抽出一个小模块来,作为一个单独项目来实践新框架。这样最省事,而且以后这个新框架说不定还能借机上位。

去QQ群、论坛吧

实践新框架的过程中,难免会遇到一些问题,需要请教有经验的大牛。这个时候可以找一些QQ群,比如vue交流群之类的“专科医院",或者可以找相应的论坛,只不过现在国内没几个高质量的前端论坛,其实我一般也不去。能在QQ群找到答案当然是好的,如果没有的话,自己用google各种搜吧,或者是在github上的issue里面找关键字,据我的经验,总能找到解决办法。

实在不行,就找个大牛的博客,给他留言吧。或者,关注我的微信公众号:doctor_programmer,给我留言。(内心戏:顺理成章的就打广告了,厉害)

视频教程有必要看吗?

有些同学是喜欢看视频教程的,手把手嘛,更容易理解。但是缺点就是看视频耗时太长了,而你的时间也有限,毕竟不是念书的时候了。

我个人的话,除了刚开始学编程的时候看过马士兵的java教程,后来就基本没看过视频了。除了学cocos2d-js的时候,原因是游戏开发这块没怎么涉及过,这个框架又太复杂,我自己都没法写出个hello world,官方文档那叫一个烂啊。只得跟着视频一步步来。

所以我的建议就是,如果你对学的框架一无所知,而且无法下手,可以看视频教程。其他的话,能看文档解决的就尽量节省时间吧。

谈谈看源码

有些同学会觉得看了源码就很厉害的赶脚,所以迫不及待想看框架的源码。这个我是不反对的,阅读源码确实能学到很多知识,关于框架的,以及框架之外的js技巧。

但是我本人来讲,看的源码并不多,主要还是时间精力分配问题。好比是你买了一辆车,刚开始肯定是先开,熟悉车的各种性能和功能。而后出问题了或者是想深入研究了,再拆。所以我一般是用过一段时间后才看源码,这“一段时间”可能是两个月,也可能是半年。

我看源码也不是通读,一般是带着疑问看的,比如想看看某个功能是如何实现的,就crtl + f一路搜索关键词。

有时候如果对框架的某个功能感到奇怪,也会去打开源码看看。比如:用js原生的innerHTML嵌入<script>标签的时候,里面的代码不执行,但是用jquery的html()方法,嵌入的<script>却能执行。打开源码才知道,html()方法最终会正则匹配到<script>标签,并用eval()执行里面的代码。

关于新框架的学习,大概就说这么多吧,读者有疑问可以留言讨论。

相关文章
|
18天前
|
移动开发 前端开发 JavaScript
从零开始学习前端开发:入门指南
本文将介绍从零开始学习前端开发的入门指南。通过学习HTML、CSS和JavaScript等基础知识,读者将了解前端开发的基本概念和工具,并学会如何构建简单的网页应用程序。无论您是初学者还是有一定经验的开发人员,本文都将帮助您打下坚实的前端开发基础。
|
2月前
|
网络协议 前端开发 数据库
从零开始学习后端开发
【2月更文挑战第9天】后端开发是目前互联网行业中非常热门的技术方向之一,也是很多程序员进阶的必经之路。本文将从零开始,系统性地介绍后端开发相关的知识点和技术栈,帮助初学者快速入门。
40 2
|
2月前
|
存储 开发框架 前端开发
从零开始学习前端开发
前端开发是现代互联网应用程序开发中不可或缺的一部分。本文将带您从零开始学习前端开发,包括HTML、CSS和JavaScript等核心技术,以及常见的开发框架和工具。
|
3月前
|
前端开发 JavaScript 开发工具
从零开始学习前端开发技术
随着互联网的快速发展,前端开发成为了一个备受关注的职业。本文将从零开始介绍前端开发所需的基础知识和技能,并重点介绍常用的HTML、CSS和JavaScript语言,帮助初学者快速入门前端开发。
36 0
|
8月前
|
运维 算法 数据可视化
从零开始学习R语言编程:完全指南
R语言是一种流行的数据分析语言,广泛应用于学术界、商业界和社会科学研究等领域。与其它数据分析软件相比,R语言的优点包括免费开源、高效可靠、具有强大的数据分析和可视化能力等。R语言的编程基础包括了各种控制结构和函数,可以方便地实现算法和数据操作。本篇文章将介绍R语言的基本编程结构,涵盖if-else语句、for循环、while循环和函数等,帮助读者快速上手学习R语言编程。
240 0
|
9月前
|
C语言
从零开始学习编程的旅途
从零开始学习编程的旅途
68 0
|
10月前
|
数据采集 Web App开发 JSON
从零开始学习 puppeteer
从零开始学习 puppeteer
198 0
|
11月前
|
存储 编译器 开发者
Makefile基础教程:从零开始学习
在软件开发过程中,Makefile是一个非常重要的工具,它可以帮助我们自动构建程序,管理程序依赖关系,提高开发效率。本篇博客将从基础开始,介绍Makefile的相关知识,帮助大家快速掌握Makefile的使用方法
107 0
Makefile基础教程:从零开始学习
|
12月前
|
存储 程序员 C语言
从零开始学C
从零开始学C
37 0
|
存储 XML 移动开发
🏆从零开始学习JS进阶2️⃣🏆
文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理 可扩展标记语言(html或xml文档) 的标准 编程接口。它是一种与平台和语言无关的 API,它可以动态操作HTML文档,如 对html标签作增删改查操作。DOM 是一种基于树的 API 文档,在处理html文档的过程中,DOM以对象的形式存储在内存中。因为DOM是基于树结构存储在内存中的,所以DOM又称为文档树模型。
161 0
🏆从零开始学习JS进阶2️⃣🏆