Posted on 4 评论

前端开发需要学什么

前端开发要学什么

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

 

在学之前,先“玩”,“接地气”

Chrome Dev Tools

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

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

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

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

快速原型与代码分享工具

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

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

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

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

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

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

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

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

HTML5

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

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

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

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

<div
  class="weather"
  data-source="NASA"
  data-geolocation="Kansas"
  data-format="fahrenheit"
  data-autoupdate="30s"
  onclick=fn
  onmouseover=fn
  onmouseout=fn
  onuupdatecomplte=fn
  ongeolocationchange=fn />

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

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

CSS3

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

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

带着兴趣与尊重学HTML5,CSS3

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

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

区别在于“主动探索”。

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

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

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

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

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

怎么学Javascript语法

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

function foo(bar) {
  if (Array.isArray(bar)) {
    console.log(bar);
  }

  return 'foo';
}

foo();

这里统统是语法,但同时又统统是概念:函数声明(输入),函数名,参数列表,参数校验,局部作用域,输出返回,函数签名(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 selector
  • 运用异步程序设计的基本方法,回调,Promise
  • 运用事件管理应用状态,事件流,应该学会事件代理这样的模式
  • 运用IIFE的封装,closure的运用,ES5模块化,ES5模块化的区别
  • 用indexeddb存储数据
  • 先关注功能设计与实现
  • 再关注程序改善
  • 找老师review你的代码
  • 配合书本 “Javascript模式” 重构你的代码
  • 你要在这时候学会原型,闭包等JS核心概念

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

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

异步程序设计,习惯回调

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

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

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

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

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

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

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

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

第二个实际项目

  • 自己决定做什么,但不管做什么,要选有相当复杂度的应用
  • 做什么不重要,重要的是做深
  • 按照第一个项目的大致开发流程进行,但多一点顶层设计
  • 可以考虑使用ES6
  • 考虑数据类型,数据结构,数据流和数据存储
  • 分析应用有哪些自包含的UI部分
  • 理解事件流,哪些事件,哪些交互,改变哪些状态
  • 考虑是否可以适当集成第三方类库
  • UI是如何初始化的,初始化要做哪些事
  • 整个应用程序有哪些部分,如何彼此分离,又如何相互通信
  • 找人专门来评价你的程序设计,而不是简单帮你看看“代码”

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

把框架捡起来用

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

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

第三个实际项目

  • 自己决定做什么,不管做什么,一定要做有相当复杂度的应用
  • 使用框架
  • 接受框架的特定工具链和工作流,如React的create-react-app
  • 在框架的语境下做好程序设计
  • 争取一次性地理解框架的核心概念
  • 把框架提供的概念工具用透,框架就是你的了

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

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

一定要主动探索。

 

4 thoughts on “前端开发需要学什么

  1. 请教个问题。
    我是其他行业的从业者,是否WordPress就足够用了?
    还有必要学一些前端知识吗?
    麻烦了大神

    1. 首先,wordpress的“易上手,规避编码”是相对的,“易上手”绝不等于“容易”,所以说“足够用”的时候,很多人未必知道他在说什么,我自己也是,wordpress其实是挺深的技术栈,它虽然看起来主题插件组合组合就行,但组合是要摸索的套路,有一些固定的,但有相当东西没有标准答案,所以投资wordpress,要投资足够时间,我觉得起码搞个两年吧。

      代码是实现的本质,代码的控制力其实远高于主题插件,但代码的门槛很高,对非技术人,其实对技术人也还是不低,因为代码存在的wp场景是“特别”的,有领域知识。

  2. Thanks for sharing! Learn about concepts, not syntax. 感谢,解决了我学编程的许多困惑。以前都是“记住知识”,然后忘记,然后再记….这样的Infinite loop.

  3. “世界的变化通常不是革命,而是四季更替。” , 看到这么棒的句子,突然瞳孔都放大了。 :)

发表评论

电子邮件地址不会被公开。 必填项已用*标注