面向非前端的前端开发指南

原文地址：https://imshengli.com/blog/20...
如需查看文章最新内容，请访问源地址。

背景

前端这些年发生了很大的变化，导致有些前端基础的非前端同学在现在的情况下，也不知道如何下手了，甚至连发送一个请求可能都要绕半天。因此，本文就”非前端同学如何做前端开发？“这个主题聊聊这些年前端的变与不变。

万变不离其宗

不管前端如何变化，前端最核心的三个概念始终未变：HTML、CSS、JavaScript。HTML 负责页面结构，CSS 负责页面样式，JavaScript 负责用户交互。

前端任何新的概念，都是这三个概念的变种。React框架采用类似JavaScript的JSX语法，生成HTML结构。LESS、SASS的出现无非是降低CSS的开发成本。各种库、组件的出现，也无非是对开发中常见的问题抽象的实现。总的来说，只使用HTML、CSS、JavaScript完全可以满足我们自己的前端开发需求。

说说”万变“

变的原因也很简单，就是”实际诉求“。诉求是如何提升我们的开发效率，如何保持整体的风格统一，如何同时支撑多端，如何应对复杂的业务需求。

第一个变：语法

和Java语法更新迭代一样，前端的语法也在升级换代中，现在JavaScript一年一个迭代版本。不过不用担心，JavaScript代码中即支持新的语法，也可以用老的语法，注意一下其中的区别即可。想了解新的语法，可以参考：阮一峰 - ES6 入门教程。

另外一点需要注意的是，需要采用新的语法，浏览器如果没有对应的实现，我们需要先将它编译为老的语法，才能在浏览器中执行。常用的工具是：babeljs。这一点也不用自己去做，成熟的工具已经将它纳入其中，比如 Antd Design Pro 中采用的 UmiJS。

LESS、SASS并不是CSS新的语法，只是为了简化CSS的写法，可以看作CSS的语法糖。在浏览器中运行之前，需要编译为CSS。

第二个变：组件化

Web页面中存在大量的相似结构，只是数据不同。因此这些相似的Web页面结构和对应的样式，开启了前端组件化的征程。

最开始，大家只是利用HTML、CSS、JavaScript做一些简单的封装，比如Bootstrap，虽然谈不上组件化，至少减少了部分开发工作量。后来，国内出现了AmazeUI，算是有了一点点组件化的雏形。W3C 也制定了组件化的标准，Polymer Project 是基于此标准的实现。不过发展的都不太好，个中原因，众说纷纭。再后来，AngularJS、ReactJS、VueJS，由于其更先进的理念，更完善的生态，开始大行其道，现在基本是这三者的天下。Antd、Fusion、ElementUI 等都是基于这三个框架组件化的实现。

现在，推荐大家使用基于这三大框架的组件库。选择时，选择文档全面、github star 多的组件库。使用组件时，多参考组件使用文档。遇到的问题，一般其他人都有遇到过，Google 搜索一下即可。

第三个变：工程化

组件化的到来，出现了一个新的问题，如何处理组件之间的依赖问题，如何把组件打包成一个JS文件，如何拆分组件中的样式文件，还有如何编译新的语法，本地开发时如何监听文件变化自动编译，如何发布，这都归为前端工程化的范畴。

对于非前端同学来讲，了解工程化的细节不是必要的。掌握一个顺手的，使用的来的便可。在下节要介绍的”整体解决方案“中，方案本身已经集成了工程化的能力。

第四个变：整体解决方案

现在有大量的博客系统、中后台系统需求，面对这种情况，开箱即用的整体解决方案应用而生。

最早的莫过于WordPress，只不过功能比较单一。在前端上，做的最多的可能是开发一个主题，但也仅限于列表和详情。对于博客系统，除了 WordPress 这种外，另外还有专门根据 MarkDown 文件生成静态站点的工具，比如：Hugo、Hexo、Next.js 等。面对复杂的中后台系统，现在比较流行的是：Antd Design Pro，集成了组件，集成了工程化的能力，封装了网络请求的方式，制定了规范的目录结构，统一了设计风格，及其他开发工程中可能需要的工具。

对于整体解决方案，熟读文档，是最便捷的方式。在我们不了解一件事物时，最好的办法是”照猫画虎“，但这有一个弊端是，如果出现问题，会不知所措。所以阅读每一章节时，最好知道问题是什么、解决的方式、背后的基本原理。所有的原理，最后都会落到前端的三个核心概念上。

总结

前端已独立为一个岗位好多年，自然有不少的产出。对于非前端同学，不必为不能一天掌握前端而苦恼，前端能为自己服务、解决自己的问题即可。