前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端应该怎么学?

前端应该怎么学?

原创
作者头像
艳艳代码杂货店
修改2021-09-19 20:56:00
7280
修改2021-09-19 20:56:00
举报

世界的变化通常不是革命,而是四季更替。

在学之前,先“玩”

Chrome Dev Tools

前端核心工具,没有之一,浏览器是前端项目的“操作系统”,Devtools是这个操作系统的控制台。

用Devtools分析页面,“解构”某个前端实现,用Devtools“试验”小段代码,做Hack,用Devtools能做很多东西。

最重要的,用Devtools“探索”前端系统,最核心的概念都在这个工具里。

你应该关注Chrome Dev Tools团队的官方博客,Twitter,Youtube。

快速原型与代码分享工具

http://jsbin.com 和 http://codepen.io,不碰编辑器把想法快速实现出来。

最好的思维工具往往是能帮你动手的工具。

提取封装:最基本的程序设计技巧

很多人学了半天编程,学了各种“技巧”,还不知道“提取、封装”的通用性和重要性。

有提取封装,才有可能产生高质量的“抽象”,才有后面的“信息隐藏”,“可读性”,“复用”,“模块化”,“低耦合”,“架构设计”,“Simplicity”,“DRY”,“可维护性”,“代码质量”这一堆东西。

现在的编程教育太多本本教育,啰嗦了半天“模块化”,铺陈各种技巧,却没有提程序设计最最普世最最根本的常识:提取封装。

我说它是常识,就像你要出远门,带很多行李,于是分门别类,分箱子打包好了递送,提取封装无非如此,理解概念间的联系和区别,远近亲疏,做一个选择,把他们“合理”地归置起来。

这是无处不在的,HTML,CSS,JS,PHP,Java … 好的程序设计无非合理的提取封装。只不过虽然说起来简单,做起来未必,问题是复杂的,合理地提取封装变得困难,就像你出远门要多带很多东西打包变得困难一样。

在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993 希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。

HTML5

HTML5不难,但每个标记用得恰到好处没你想象的容易。

HTML5容错率高,该用section的地方你用div也不会报错,但仍有不少讲究,比如把Table系列标签用得恰到好处。我可以肯定市场上有90%+的前端程序员并不100%掌握Table系列标记的确切语义和用法。

HTML5的很多书本都大谈特谈HTML5的新功能,新API(JS),这些东西有用,但并不重要,要用的时候拿起来用就行了。

HTML的重要性,体现在理解HTML本身已经不再只是文档结构标记语言,现代前端开发,HTML本身是“编程接口”,是抽象的基本形态,如何理解?举例来说:

这是现代前端模块化的基石,前端组件化的基础,产生这样的HTML代码是一个“设计问题”,接口设计,输入输出设计,模块设计,你怎么叫都行,反正现代前端开发语境下的HTML不是简单用用HTML定义好的标签这么简单,这是前端开发的强大、美妙之处。

不要看轻HTML,它不复杂,但很重要。

CSS3

CSS是一种很深的技术,是非常值得投资的技能,光是一个transition最小白的使用,能给一个单调的页面带来生机。尽管多数前端项目对开发者CSS的能力要求不高。

这个技能能给项目带来质变,视觉,交互,甚至能直接影响程序设计本身。很多用JS做的低效实现,现在都有成熟的CSS方案,比如超级灵活的适应性布局,状态转换,动画等等。

带着兴趣与尊重学HTML5,CSS3

两者结合起来,是很深的技术,有时候我们经常纳闷一个页面实现实现的关键技术是什么,很多时候这个关键技术并非高超的JS编程技巧,而是对HTML5,CSS3的深刻理解、创造性地应用,这种用例往往给我们醍醐灌顶的感觉。

是的,HTML5,CSS3也有大师,并不是开玩笑。表面看起来简单的东西,比如骑自行车,也可以玩成极限运动。

区别在于“主动探索”。

说回基础,CSS3的核心并不难列出,布局定位,盒子模型,度量衡,字体规则等等。

但列出来并没有意义,因为学编程不是画好重点照本宣科,而必须实际运用中理解,没有替代方案。

就是将HTML5和CSS3做有相当复杂度的静态页面。

没有耐心的人觉得做这种东西简直索然无味,HTML5,CSS3我都会啊,我看看就懂了。

这类孩子会绕一大个圈子。

怎么学Javascript语法

我们学编程不学语法,而是学概念,这是一个重要的意识上的区别。

这里统统是语法,但同时又统统是概念:函数声明(输入),函数名,参数列表,参数校验,局部作用域,输出返回,函数签名(signature),调用等等。 语法只是概念的呈现,是概念的皮囊,学编程该问的不是这个怎么写,而是“这是什么,作用是什么”,概念明了,语法是不用学和记的。

如果学习者只记忆表象,“这个该用大括号,这个该用return”,将只能建立起很肤浅的直觉。

在我们眼里,每一段代码都应该是一台活动的机器,有着内在的机理和逻辑,你看到代码应该像看到工作中的机器呼呼冒着白气,看代码不是看静止的文本,这是普通技术和顶级技术的根本意识区别。

算法是否重要

好一点的公司面试都有算法考核,这是应该的,就像大馆子招厨师,基本修养是一定要过关的,八大菜系这种是业内“常识“,你一个专业厨师能不掌握吗?

算法思维对编程的影响是潜移默化的,我这里用文字说是说不明白的,哪天算法给你灵感的时候你自然明白。

算法与Javascript的关系

算法和语言无关,语言只是对算法的实现而已,实现五花八门,纯过程,OO还是怎么样,随便,Javascript照样可以实现算法,这重要,但不是关键。

学算法的关键是”理解算法原理“,”理解“的最好方法,我认为是”可视化“。你可以自行Google ”algorithm visualization“。如果你能看到一个算法的执行过程,慢镜头看得清清楚楚,把算法原理映射到脑子里,随着对语言的熟悉,你自然能用JS写出代码来。

掌握Javascript DOM操作的必要性

你要理解DOM是HTML文档结构在浏览器内部的逻辑表示,是前端应用的底层接口,而学习编程收益最高的投入之一,就是在前期理解底层工作原理,理解了底层工作原理,可以一通百通,扫除后续很多障碍。

有时候我们做应用会怀疑底层的意义,学习底层有没意义,我有一个不是回答的回答,学了你才知道意义,不学你很可能意识不到。即使现代前端框架潮流执之下,DOM操作被充分隔离屏蔽,理解DOM底层仍然重要。

还得明白,不是所有的应用都依赖现代框架,业务的世界是复杂的,没有放之四海皆准的技术方案,框架开发方法在增值的同时,并非完全对传统开发方法的替代,世界是多远的,不是非此即彼的标准答案。

学习DOM编程

第一,如果零基础,从“DOM编程艺术”这本书开始,目的是提取DOM知识,做一些适应性训练,全面地完成这本书,同时熟悉JS语言

第二,做一个完整项目,作大量DOM操作,学习者应该自己确定一个项目(如todoist这样的应用就很值得模仿),用纯JS(ES5)配合原生DOM API操作完成

DOM核心也不难列:节点的增删改查,获取节点(及属性)的方法,css selector api,事件操作,样式操作等。把注意力放在理解概念上,理解各种概念在代码上下文是如何工作的。

从第一步到第二部是“不平滑”的,不要假设“我”把书上的代码都做了一遍,就立刻能独立开发出东西来,通常并非如此。

事实是头一个完整项目会让很多学习者倍感艰难挫折,“我看了书,之前消化了那么多资料,为什么还是写不出来“。

这是正常的,但很多人的假设和期望错了,在我们认知水平低的时候,往往越容易有不切实际的期望,我们会低估问题的复杂程度。

训练代码怎么写

工作流和工具链的意义这时候就体现出来了,所有的训练代码都该这么写:

训练项目应该放到github,不懂git就去学,这是不用教的

项目必须有规范的README.md,交代项目内容,实施计划等内容,中英文均可

用npm(或者yarn)来管理依赖,项目应该用npm init来初始化,应该有package.json

项目应该有代码规范,应该集成eslint,做好相应配置(包括编辑器)

第一个项目应该基于ES5,因为传统JS语法有一些宝贵的概念你需要掌握

如果项目基于ES6,就该集成Babel

是否使用gulp或webpack是学习者的选择

好好做commit

放慢速度,学习越是开始阶段,基础越是薄弱,速度越应该慢(很多孩子是被自己的速度击败的)

做事有板有眼不只是给自己看,更重要的是给别人看,你在github上的每一次提交,每个README都能潜在决定别人对你水平的判断,这是和求职直接相关的,所以一定要重视,招聘方不会希望招你进去帮你改掉坏习惯,他们希望你带去好习惯,好实践。

熟悉jQuery的重要性

你也许在哪里读过jQuery已死的文章,我不知道你怎么判断。但你得注意到jQuery是一个仍在迭代的项目,而且仍是使用最多的前端基础库之一,你可以自己去google数据。

中文技术圈在给成熟技术判死刑,和把新技术捧上天这两件事情上做的极好,尤其是国内一线互联网公司的人竟也一般鼓吹,粗俗武断,让我觉得遗憾。

技术人品位的内核,是一种笃定的理性。世界的变化通常不是革命,而是四季交替。

jQuery在前端开发社区的作用不需要我来强调,jQuery在Javascript语言运用和对DOM底层的理解上,jQuery的API设计,有宝藏,即使你不直接用jQuery,他山之石,可以攻玉。

程序设计的意识

国内外编程教育的根本不同,国外的编程教育强调程序设计(有很多为什么,很多尝试),国内的编程培训不强调程序设计过程,强调结果,一般问题的解决方案是很容易到达的,所以总是止步于work但没有工程品位的实现。

而做这一行的真正乐趣,在程序”设计“之中。设计是开放的思维活动,设计有约束,但设计没有标准答案,设计不是一蹴而就的,设计是演化的,但设计达成的问题最终解决是本质的。

如果我们觉得解决问题就”只是“达成某个特定结果,并止于这个特定结果,那么我们将会失去发现方法论、或作出创新的宝贵机会,就像拿红酒来解渴的人体味不到佳酿的醇厚。红酒的目的并非解渴,同样解决问题的目的并非解决那个”问题“,而是发现规律本身,前者只是解决方案,而规律确实智力资产,哪个更有价?

学编程的人,要习惯“设计”程序,设计不来源于灵感,来源于常识,只不过很多时候常识被我们忽略而已。我相信等你体会到这一点的时候,将得到编程的莫大乐趣。

做第一个完整前端项目

如前所述,这应该是你的第一个DOM编程项目,一个实实在在的应用。

做好项目准备工作,集成工具链,走专业工作流

先用HTML5实现页面结构

考虑移动端友好,响应式等UI关键指标

充分运用CSS3布局实践

学会管理CSS代码

然后用ES5实现交互

用原生DOM API

运用CSS selecto

运用异步程序设计的基本方法,回调,Promise

运用事件管理应用状态,事件流,应该学会事件代理这样的模式

运用IIFE的封装,closure的运用,ES5模块化,ES5模块化的区别

用indexeddb存储数据

先关注功能设计与实现

再关注程序改善

找老师review你的代码

配合书本 “Javascript模式” 重构你的代码

你要在这时候学会原型,闭包等JS核心概念

这是一个至关重要的项目,你不应该追求尽快把它做完,而应该最大限度地把技术用透,这个项目会让你真正跨过”入门“的门槛。

你会做得非常磕巴,如果不磕巴只说明你对应用本身和技术的探索不够。

异步程序设计,习惯回调

无论如何,回调是异步程序设计的根本结构,它本身很简单。

function foo(callback) { /* 执行上下文 */ callback(); }

把函数作为参数传入某个执行上下文,伺机执行,称为”回“调。

变化一下,每当你οnclick=handleClick,即把函数传入事件触发上下文,称之为”事件“回调。

这是异步程序设计的基本模式,我们每次封装Javascript function,考虑的一个方面是它需不需要接受回调函数。

另一个设计工具是Promise,每当我们设计一个Javascrpt function,可以考虑它可否返回Promise。

还有其他的异步程序设计结构可用,程序设计归根到底,无非接口设计,理解接口设计工具至关重要。

我想特别支出,请你习惯所谓的“回调地狱”学会用程序设计技巧去化解它,你用的是一种异步语言,你不应该害怕它的自然形式。

第二个实际项目

自己决定做什么,但不管做什么,要选有相当复杂度的应用

做什么不重要,重要的是做深

按照第一个项目的大致开发流程进行,但多一点顶层设计

可以考虑使用ES6

考虑数据类型,数据结构,数据流和数据存储

分析应用有哪些自包含的UI部分

理解事件流,哪些事件,哪些交互,改变哪些状态

考虑是否可以适当集成第三方类库

UI是如何初始化的,初始化要做哪些事

整个应用程序有哪些部分,如何彼此分离,又如何相互通信

找人专门来评价你的程序设计,而不是简单帮你看看“代码”

做深两个项目,你对前端的一切应该已经相当熟悉。

把框架捡起来用

我认为框架是不需要教的,如果你的前端基础扎实,不可能学不会框架,基础扎实,你不可能不具备自学框架的能力。如果你基础好,框架将给你的开发插上翅膀,如果你基础漏洞百出,框架不会自动让你成为好程序员,它可能放大你的技能缺陷。

框架比原生前端开发简单,但也比它复杂,框架开发有独立于原生技术的概念体系,使用框架是习惯它的“约束”,约束就是做某件事的特定方法,特定形式。

第三个实际项目

自己决定做什么,不管做什么,一定要做有相当复杂度的应用

使用框架

接受框架的特定工具链和工作流,如React的create-react-app

在框架的语境下做好程序设计

争取一次性地理解框架的核心概念

把框架提供的概念工具用透,框架就是你的了

最后,学习编程最重要的是什么?

答曰:主动探索。前端也不例外。

一定要主动探索。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据保险箱
数据保险箱(Cloud Data Coffer Service,CDCS)为您提供更高安全系数的企业核心数据存储服务。您可以通过自定义过期天数的方法删除数据,避免误删带来的损害,还可以将数据跨地域存储,防止一些不可抗因素导致的数据丢失。数据保险箱支持通过控制台、API 等多样化方式快速简单接入,实现海量数据的存储管理。您可以使用数据保险箱对文件数据进行上传、下载,最终实现数据的安全存储和提取。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档