原文地址：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。完全不用自己动手，成熟的工具已经包含了，比如AntdDesignPro中使用的UmiJS。LESS和SASS并不是新的CSS语法，而是为了简化CSS的书写，可以看作是CSS的语法糖。在浏览器中运行之前，需要编译成CSS。变化之二：组件化的网页中有大量相似的结构，只是数据不同。于是，这些相似的网页结构和相应的风格，开启了前端组件化的征程。一开始大家只是用HTML、CSS、JavaScript做一些简单的封装，比如Bootstrap。虽然没有组件化，但至少减少了一部分开发工作量。后来国内出现了AmazeUI，算是有点组件化的雏形了。W3C也制定了组件化标准，PolymerProject就是基于这个标准。但是发展的不是很好，至于原因众说纷纭。后来AngularJS、ReactJS、VueJS因为更先进的理念和更好的生态而大行其道，现在基本上是这三者的天下。Antd、Fusion、ElementUI等都是基于这三个框架的组件化实现。现在，推荐大家使用基于这三个框架的组件库。选择的时候，选择文档齐全，githubstar多的组件库。使用组件时，多参考组件使用文档。遇到的问题一般都是别人遇到的，google一下就可以了。第三个变化：随着工程组件化的到来，出现了一个新的问题，如何处理组件之间的依赖关系，如何将组件打包成一个JS文件，如何拆分组件中的样式文件，如何编译新的语法，本地开发时如何监听文件变化自动编译，如何发布，都属于前端工程的范畴。对于非前端的同学，没必要了解工程的细节。拿你舒服的，用你该用的。在下一节要介绍的“整体解决方案”中，解决方案本身就具备集成工程能力。第四个变化：整体解决方案现在对博客系统和中后台系统有大量的需求。面对这种情况，一个开箱即用的整体解决方案应用诞生了。最早的是WordPress，但是功能比较简单。前端做的最多的可能就是开发一个主题，但仅限于列表和细节。对于博客系统，除了WordPress，还有基于MarkDown文件生成静态站点的工具，如：Hugo、Hexo、Next.js等。面对复杂的中后台系统，越来越多的比较流行的有：AntdDesignPro，集成组件，集成工程能力，封装网络请求的方式，制定标准化的目录结构，统一设计风格，以及其他一个开发项目中可能需要的工具。对于整体解决方案，熟悉文档是最方便的方式。当我们有什么不明白的时候，最好的办法就是“跟猫画虎”，但这有一个坏处，就是一旦出了问题，我们就会不知所措。所以在阅读每一章的时候，最好知道问题是什么，如何解决，背后的道理。所有的原则最终都会落在前端的三个核心概念上。综上所述，前端作为一个职位独立多年，产出自然也不少。对于非前端的同学来说，也不用担心前端一天学不会，只要前端能为自己服务，解决自己的问题即可。
