移动端想学点前端，就差一点执行力与路径

最近经常收到留言，有朋友问，如何学前端，今天写篇文章聊聊。

移动端的朋友如果想学习一点前端，但是不知道从哪开始学起，以及该咋么学，作为一个从 iOS 转战到前端领域的我，谈一谈这些年所经历的过程。

首先，我是一个对技术比较开放的人，不想把自己限制在某个单独的领域内，总想尝试下不同的方向。如果你不想折腾，我是非常不建议转方向的，因为这样你需要花更多的精力投入到新的方向上。

虽然，技术是相通的，花点时间可以学会，但是一旦踏入新的方向，与之相来的是需要你掌握该生态的所有知识，这部分知识学起来，并不是想象中的那么简单。

所以，我的建议是，换方向需要慎重考虑，一旦决定后做好学习的准备。其实，如果有时间的话，我鼓励大家可以尝试学习下其它方向，作为一个业余爱好。当你掌握两个方向后，有些知识，你会感觉到非常容易理解，因为有些编程思想在发展较早的领域中，它有更成熟的解决方案，更全面的资料可以参考。

对于移动端的朋友来说，前端是非常值得尝试的方向，可以作为移动技能的扩充，也可以作为备选技能。通过本文聊聊移动端该如何学习前端，以及哪些思想可以应用到移动端。

前端总的来说，技术比较复杂，但有个规律，「万变不离其中」，最终都是 HTML + CSS + JavaScript 这三大技术，然后交给浏览器渲、染执行。但前端生态比较“变态”，开发者总喜欢造轮子，而不是把一个轮子改造成一个更好的轮子，这导致遍地都是轮子。如果你不去理解轮子的核心技术，盲目的使用，很容易掉进「轮子的陷阱」。反过来，如果你能够理解轮子使用到的技术原理，你回头再看前端的生态，反而会轻松许多。

先从 UI 说起吧，在浏览器中主要通过 HTML + CSS 来渲染页面，HTML 可以用来表示页面的基本结构和 UI 元素，可以理解为盖楼房用的砖。而 CSS 主要用来对这些 UI 元素进行布局和设置样式。这两部分内容往细了学，需要花费很多时间，不建议直接看书，即使看找一本比较薄的书。对于入门选手来学习 CSS 来说，看《CSS世界》会一头雾水，更适合有工作经验后看。推荐大家可以直接看 MDN。

再谈语言，前端使用的是 JavaScript，这门语言比较「随意」，千人千面，每个人的写法不一，总会出现莫名其妙的问题。这几年前端领域发展迅速，越来越规范。ECMAScript 规范增加了更多现代编程语言的特性，这使得 JavaScript 更现代。JavaScript 本身是弱类型的，微软开发了 TypeScript 可以支持强类型。关于 JavaScript 的学习可以看

这本书包含了与浏览器相关的特性，比如 DOM、BOM、事件。

学会 HTML + CSS + JavaScript，你基本上可以开发一个页面，但是做一个大型项目时，成本比较大，配套设施不齐。就在这时，node 出现了，JavaScript 可以运行在 Linux 上了，比如用 JavaScript 写服务端、写运行在 windows，mac 上的工具。

Vue、React 框架的出现，使得 Jquery 走向末路。如果你想学习前端，一定要学一个框架，因为写前端不是在写 HTML，而是在使用框架来写，这里以 vue 为例。没有 vue 之前，当你想动态修改一个文本时，不得不在 DOM 中找到该元素，然后修改 DOM 来实现，而使用 Vue 只需要修改 JavaScript 变量即可修改 HTML 中的文本。而且 vue 中提供了大量的特性，比如组件，总之，使用 vue 能让你开发起来更便捷。对于框架学习，直接看官方文档即可。vue 对于初学者学起来比较友好，可以直接用 vue-cli 创建一个项目，非常简单。

兼容问题在前端是一件比较头疼的事情，每个浏览器运行的环境不一致，在浏览器中提供了 JavaScript 执行引擎，不同版本的浏览器提供的 JavaScript 执行能力不一样，比如 ECMAScript 新出的规范，并不是所有的浏览器都能支持，对于老版本的浏览器来说不能使用一些高级的语法特性。但开发者想使用最新的特性咋么办？

社区中提供了一种方案，可以把你写的代码转换成浏览器能够支持的语法，在开发中环境中直接配置你要兼容的浏览器版本，就可以把该浏览器中不支持的语言特性进行转换。这一切依靠于背后的功臣 babel（ 不能遗忘功臣 babel），它提供了一个编译器可以把 JavaScript 代码转换成另一种形式。

前端人总是喜欢不断尝试，好好的 CSS 不写，非要写 Less、Scss、Stylus，这很头疼，不过使用 Less、Scss、Stylus 写起 CSS 更便捷一些，他们提供了更强的语法能力，但最终需要转换成 CSS，这不得不依赖一个转换的工具。

你看，写前端会用到大量的工具对源代码进行转换，生成最终能够被浏览器渲染、执行的代码。工具太多了，咋么办？

那就写一个工具的工具吧，啥意思？就是可以把这些工具整合到一起的工具，目前最火的是 webpack，当然还有 rollup、fis、gulp 等等，现在又出了个 vite，写到这里素燕情不自禁感叹「真乱」。打包工具最终做的是能够让开发者更便捷的开发，产出浏览器可渲染、执行的代码。有了 webpack 这个打包工具，你可以用这一个工具做到 JavaScript 代码压缩、高级语法特性经过 babel 转换、Less 转换成 CSS、使用 Vue 框架等等。

本文介绍的工具只是冰山一角，还有更多的工具，总的来说前端的线下代码和线上代码有非常大的区别。如果你能把上面我所提到的内容学完，开发个网站没啥大问题。如果想找个项目练手，可以看看 vuePress（1 分钟给的的开源库做个网站）。

大家比较好奇，前端都能干啥？我举例子吧，你每天用到的网站、各种后台系统、小程序框架、web IDE、编辑器、可视化、运营活动页面、App 内嵌 H5 页面等，总之前端要做的事情比较多，方向比较广，同时也有很多高难度的方向。

对于移动端同学来说，前端中一些思想能够帮助你，我列举一些例子，比如给自己的开源项目免费做一个文档网站、做命令行工具、更好地理解 webview 与网络、vuex 数据管理、学习编译原理有更全面的资料与代码、热修复技术、Hybrid 方案等。

总之，前端不只是画画 UI 这么简单，它有更广阔的天地。学前端核心其实就是 HTML、CSS、JavaScript、框架 Vue 或 React、打包构建 webpack、node，其它的用到再学即可。详细内容可以看 学习前端的 7 个专题，我总结了学习前端的路线。

学前端期间我把我所经历的过程写了下来，构成《前端小课》，希望能帮助 10W 人入门并进阶前端，网站：https://lefex.gitee.io/，

期间还有两期电子书，想要的朋友可以点击在看，然后公众号后台输入 suyan 即可获得。大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/